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();


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



目录
相关文章
|
1月前
|
SQL 前端开发 JavaScript
使用ueditor实现多图片上传案例
使用ueditor实现多图片上传案例
16 0
|
5月前
|
JavaScript 小程序 开发工具
WebStorm中如何设置wepy文件代码高亮
WebStorm中如何设置wepy文件代码高亮
66 0
|
7月前
|
JavaScript 前端开发
VSCode .vue 文件 html css 无智能提示
VSCode .vue 文件 html css 无智能提示
609 0
|
Java 应用服务中间件 API
富文本编辑器Ueditor实战(一)
本文简单说明如何在tomcat中部署ueditor,并举例介绍了他的api以及相关工具栏,用户可以根据需要进行调整。
393 0
富文本编辑器Ueditor实战(一)
kindeditor富文本编辑器插件 如何实现将本地的图片复制粘贴
目前的需求是 将桌面上的一张图片,进行复制后,可以粘贴到富文本编辑器里面,借用了大佬的这个方法,但是ie浏览器,粘贴图片的时候没办法触发这个paste方法 不知道是因为啥?求大佬帮助
|
前端开发
highlight.js代码高亮显示插件
highlight.js代码高亮显示插件
409 0
highlight.js代码高亮显示插件
|
Web App开发 Linux 前端开发
|
Web App开发 JavaScript 前端开发
常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介
1、UEditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码... 主要特点: 轻量级:代码精简,加载迅速。
5237 0
|
JavaScript 前端开发 Java