编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

利用百度编辑器ueditor实现代码高亮

wxchong 2024-09-25 23:10:28 开源技术 79 ℃ 0 评论

做项目的时候尤其是程序员的例如自己的博客或者一个网络公司的站点,免不了我们都会用Ueditor百度编辑器,今天小编要分享的不是如何去集成百度编辑器到项目里,而是要介绍的利用百度编辑器实现代码高亮。如下

我自我认为做的这个设计还是可以的大致仿的是mac的浏览器的样子,下面就来给大家一一介绍如何实现的。

第一步:找到你的集成的编辑器里面的代码高亮文件如下
ueditor\third-party\SyntaxHighlighter
下面的两个文件
shCoreDefault.css
shCore.js
可以直接调用你的编辑器所在的路径,但是我喜欢单独出来所以你直接copy一份到你自己设定的目录里面。

第二步:调用对应的js和css文件
<link rel="stylesheet" href="XXX(你自己的路径)/shCoreDefault.css?v=v1.3.5" >
<script src="XXX(你自己的路径)shCore.js" ></script>
在这里我们还需要加一段js代码如下

<script type="text/javascript">      
//为了在编辑器之外能展示高亮代码
SyntaxHighlighter.all();   
</script>

tips:至此你已经集成上了这个代码高亮插件,然后我们需要的就是后台添加对应的代码即可

这样添加上后就可以看到前端的样子了。这里呢我做了一些调整默认的代码高亮样式不是这样的,如果有需要这个样式的,您可以在评论区留下邮箱我会尽快发送给您。

最后还是希望能帮助到需要的人。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表