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


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



目录
相关文章
|
6月前
|
存储 JavaScript 前端开发
使用Strve.js来搭建一款 Markdown 编辑器
今天,我们来使用Strve.js来搭建一款 Markdown 编辑器,没错!你没听错。我们需要创建了一个实时 Markdown 编辑器,用户可以在 textarea 中输入 Markdown 文本,然后实时显示转换后的 HTML。你可能会说使用 Strve.js 开发会不会写的特别复杂难懂啊,还不如用 Vue.js 呢!
|
4月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
JavaScript 小程序 开发工具
WebStorm中如何设置wepy文件代码高亮
WebStorm中如何设置wepy文件代码高亮
113 0
|
6月前
|
SQL 前端开发 JavaScript
使用ueditor实现多图片上传案例
使用ueditor实现多图片上传案例
|
Java 应用服务中间件 API
富文本编辑器Ueditor实战(一)
本文简单说明如何在tomcat中部署ueditor,并举例介绍了他的api以及相关工具栏,用户可以根据需要进行调整。
485 0
富文本编辑器Ueditor实战(一)
kindeditor富文本编辑器插件 如何实现将本地的图片复制粘贴
目前的需求是 将桌面上的一张图片,进行复制后,可以粘贴到富文本编辑器里面,借用了大佬的这个方法,但是ie浏览器,粘贴图片的时候没办法触发这个paste方法 不知道是因为啥?求大佬帮助
|
前端开发
highlight.js代码高亮显示插件
highlight.js代码高亮显示插件
587 0
highlight.js代码高亮显示插件
|
JavaScript .NET 开发框架
KindEditor 在线编辑器
地址 http://www.kindsoft.net/index.php 调用 下载KindEditor最新版本。打开下载页面 解压zip文件,将所有文件上传到您的网站程序目录下。例如:http://您的域名/editor/ 要显示编辑器的位置添加TEXTAREA输入框。
1025 0
|
Web App开发 Linux 前端开发