dedecms更换ueditor后使用google-code-prettify.js实现代码高亮并显示行号

时间:2020-04-02 06:11:40 来源:巅峰霸主 作者:烈火大地 点击:
摘要:百度ueditor默认已经集成了代码高亮插件,只是很多人在使用的时候没有发现,不论是单独使用或者与dedecms集成都是开源完美解决的,只需要在前端引用相关的js和css文件就能实现……

发现有很多同学在寻找代码高亮的插件,我的网站也用到了这个功能,因为是dedecms更换了百度ueditor编辑器后没有实现代码高亮,研究了一下百度ueditor编辑器,发现ueditor默认已经集成了好几款代码高亮的插件,只要在前端页面上引入对应的js和css文件就能解决问题,其他的均不需要。

prettify.js代码高亮修改方法

一、在网站后台发布文章时,需要把代码发布在<pre>这个标签里面,如下图所示,选择一个代码语言,然后拷贝或编写代码在对应的框内,通过这样的方式发布的代码默认会是<pre>你需要高亮的代码</pre>这样的,不需要手动添加pre标签,只要选择了一个代码语言发布代码默认会自动加上pre标签。其他的不需要修改,直接发布文章。

ueditor发布代码块

二、修改前端代码引入prettify的JS和css文件

打开网站根目录 templets/default/aticle_article.htm文件,在</head>标签的前面添加如下代码:

<link href="{dede:global.cfg_templets_skin/}/style/prettify.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/prettify.js"></script>

下载下面的附件把js和css文件分别拷贝到 empletsdefaultstyle和 empletsdefaultjs文件夹内,然后网站后台,重新生成静态页面,前台浏览器清空缓存看下是不是出效果了。

js和css这两个文件的下载:

prettify.js.zip

附件下载之后解压缩,直引用js和css文件就可以,无需做其他改动,最终显示效果和本文的文章是一样的了。


也可以直接使用cdn测试,如果你已经把代码发布在包含pre的标签内,那么直接修改模板文件添加以下代码:

<link href="https://cdn.dedemao.com/prettify/prettify.css" rel="stylesheet">
<script src="https://cdn.dedemao.com/prettify/prettify.js"></script>

保存后,重新生成静态,清空缓存查看即可。不喜欢上面的颜色背景?可以去这个网站上挑选喜欢的皮肤,把上面的css替换掉就可以了。

https://jmblog.github.io/color-themes-for-google-code-prettify/


(责任编辑:陆柏熺)
相关分类: dedecms ueditor prettify
评价:
用户名: 验证码: 看不清?点击更换

相关内容推荐

关注站长自媒体 获取更多优质内容

2019-2020 ©巅峰霸主网 京ICP备12023415号-2
返回顶部