ueditor代码高亮实现方法

简介: 实现的方法也很简单1:页面引用以下资源文件(均位于ueditor目录中) <script type="text/javascript" src="/ueditor/third-party/SyntaxHighlighter/shCore.js"></script><link rel="stylesheet" type="text/css" href="/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">2:增加如下js脚本使高亮生效:SyntaxHighlighter.all();

QQ图片20220426172441.jpg

网上许多博客里边的文章,插入的代码都有高亮显示。


百思不得其解,他们是怎么做到的。


去网上搜了一下相关的方法,原来,ueditor本身就支持代码高亮显示


QQ图片20220426172445.jpg


实现的方法也很简单


1:页面引用以下资源文件(均位于ueditor目录中):


<script type="text/javascript" src="/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css">


2:增加如下js脚本使高亮生效:


SyntaxHighlighter.all();


这样就可以了,我的博客中代码高亮显示就是这样实现的。



目录
相关文章
|
JavaScript
VUE~富文本简单使用~tinymce
VUE~富文本简单使用~tinymce
879 0
VUE~富文本简单使用~tinymce
|
8月前
|
存储 JavaScript 前端开发
使用Strve.js来搭建一款 Markdown 编辑器
今天,我们来使用Strve.js来搭建一款 Markdown 编辑器,没错!你没听错。我们需要创建了一个实时 Markdown 编辑器,用户可以在 textarea 中输入 Markdown 文本,然后实时显示转换后的 HTML。你可能会说使用 Strve.js 开发会不会写的特别复杂难懂啊,还不如用 Vue.js 呢!
|
6月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
6月前
|
JavaScript 前端开发
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
362 0
|
JavaScript 小程序 开发工具
WebStorm中如何设置wepy文件代码高亮
WebStorm中如何设置wepy文件代码高亮
121 0
|
8月前
|
SQL 前端开发 JavaScript
使用ueditor实现多图片上传案例
使用ueditor实现多图片上传案例
|
JavaScript 前端开发 编译器
vue 代码高亮 prismjs 或 highlight.js插件的用法
vue 代码高亮 prismjs 或 highlight.js插件的用法
602 0
|
前端开发 JavaScript API
使用 Prism.js 对代码进行语法高亮
通常我们在开发博客网站或者技术社区(类似掘金)这类网站的时候,就会有需求“对代码进行语法高亮”,本文主要记录笔者在开发的时候遇到的问题以及解决方案。
1579 0
|
JavaScript 前端开发 API
js TinyMCE富文本
js TinyMCE富文本
140 0
|
JavaScript
Vue CKEditor5 剪切板事件监听,贴贴事件拦截
Vue CKEditor5 剪切板事件监听,贴贴事件拦截
348 0