prismjs不支持html,用Prismjs给自己的博客文章增加代码高亮功能

我博客的文章管理页面中文本编辑器是用的百度的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方面的问题。

测试完之后就把这个功能上线到我的这个博客。