网站首页 > 开源技术 正文
做项目的时候尤其是程序员的例如自己的博客或者一个网络公司的站点,免不了我们都会用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:至此你已经集成上了这个代码高亮插件,然后我们需要的就是后台添加对应的代码即可
这样添加上后就可以看到前端的样子了。这里呢我做了一些调整默认的代码高亮样式不是这样的,如果有需要这个样式的,您可以在评论区留下邮箱我会尽快发送给您。
最后还是希望能帮助到需要的人。
猜你喜欢
- 2024-09-28 织梦 安装UEditor编辑器(织梦安装出现dir)
- 2024-09-28 springboot整合百度富文本 UEditor
- 2024-09-28 漫谈ueditor编辑器漏洞实战中利用
- 2024-09-28 前端视角漫谈百度ueditor编辑器前后端分离配置
- 2024-09-28 Ueditor二次编辑word(doc和docx格式),SpringBoot后端
- 2024-09-28 部署到服务器UEditor乱码,layUI乱码,layer乱码「非编码造成」
- 2024-09-28 百度编辑器ueditor,如何在源码模式与富文本模式相互切换
- 2024-09-25 Python项目中用富文本编辑器展示精美网页
- 2024-09-25 UEditor二次开发之为行内代码添加code标签
- 2024-09-25 百度编辑器ueditor从word粘贴图片重复分析
你 发表评论:
欢迎- 最近发表
- 标签列表
-
- jdk (81)
- putty (66)
- rufus (78)
- 内网穿透 (89)
- okhttp (70)
- powertoys (74)
- windowsterminal (81)
- netcat (65)
- ghostscript (65)
- veracrypt (65)
- asp.netcore (70)
- wrk (67)
- aspose.words (80)
- itk (80)
- ajaxfileupload.js (66)
- sqlhelper (67)
- express.js (67)
- phpmailer (67)
- xjar (70)
- redisclient (78)
- wakeonlan (66)
- tinygo (85)
- startbbs (72)
- webftp (82)
- vsvim (79)
本文暂时没有评论,来添加一个吧(●'◡'●)