我博客的文章管理页面中文本编辑器是用的百度的Ueditor。
百度的Ueditor本身也是支持代码高亮的。但是代码高亮的效果我不是特别满意。
我先来一个示例,展示一下Ueditor自带的代码高亮的效果。
找了一段expressjs示例js代码:var express = require('express');
var app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
之前使用Ueditor自带的SyntaxHighlighter插件
Ueditor下载的代码包中自带了一个SyntaxHighlighter的第三方文件夹,用的是shCore.js
使用的时候,引入一个shCoreDefault.css的文件和一个shCore.js的文件。然后执行SyntaxHighlighter.all();便可实现代码高亮。
用Ueditor自带的效果是这样:
下面使用Prismjs
百度搜索Prismjs之后,找到了它的官网 http://prismjs.com/
这是一个既小又强大的语法高亮插件。
点击首页右上角的醒目的DOWNLOAD之后进入下载页面。
你会发现它是可以自定义下载的,可以选择开发版或者压缩版,同时提供了7种主题。我预览了之后选择了Okaidia。
编程语言支持是相当的多。我想了一下,我选择了markup,css,c-like,javascript,go,java,less,markdown,sass,php,python,react jsx。html对应里边的markup,没找到vue相关的vux。
还有可选的许多的插件,
我选择了一个Line Numbers的插件。
这些插件很细心,比如那个Previewer:Color插件:
当你的鼠标放置在代码的颜色文本上,就会有一个气泡出来,让你预览这个颜色。
选好之后,分别点击DOWNLOAD JS,DOWNLOAD CSS,下载两个文件。我把它放在项目中
在页面中分别引用
然后编写代码把Ueditor的pre格式转成Prismjs兼容的格式。我这里的具体做法是,找到页面中所有带有class属性的pre标签,用正则表达式提取出接在brush:后面的语言字符。然后把代码放置在一个code元素里边,给code元素添加一个language-xxx的class,用code元素作为参数调用Prism.highlightElement。代码如下:
var $codepre = $("pre[class]");
if($codepre.length>0){
for(var i = 0;i
var item = $codepre.eq(i);
var language = "";
item.attr("class").replace(/brush:([^;]+)/,function(a,b){
language = b;
});
if(language){
var codehtml = item.html();
var code = $("");
code.attr("class","language-"+language);
code.html(codehtml);
item.html(code);
Prism.highlightElement(code[0]);
}
}
}
大功告成!
献上效果图:
效果还不错。我后面再关注它有没有BUG方面的问题。
测试完之后就把这个功能上线到我的这个博客。