用Prismjs给自己的博客文章增加代码高亮功能

用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

用Prismjs给自己的博客文章增加代码高亮功能

使用的时候,引入一个shCoreDefault.css的文件和一个shCore.js的文件。然后执行SyntaxHighlighter.all();便可实现代码高亮。

用Prismjs给自己的博客文章增加代码高亮功能用Prismjs给自己的博客文章增加代码高亮功能

用Ueditor自带的效果是这样:

用Prismjs给自己的博客文章增加代码高亮功能

下面使用Prismjs

百度搜索Prismjs之后,找到了它的官网 http://prismjs.com/ 

这是一个既小又强大的语法高亮插件。

点击首页右上角的醒目的DOWNLOAD之后进入下载页面。

你会发现它是可以自定义下载的,可以选择开发版或者压缩版,同时提供了7种主题。我预览了之后选择了Okaidia。

用Prismjs给自己的博客文章增加代码高亮功能

编程语言支持是相当的多。我想了一下,我选择了markup,css,c-like,javascript,go,java,less,markdown,sass,php,python,react jsx。html对应里边的markup,没找到vue相关的vux。


还有可选的许多的插件,

用Prismjs给自己的博客文章增加代码高亮功能

我选择了一个Line Numbers的插件。

这些插件很细心,比如那个Previewer:Color插件:

用Prismjs给自己的博客文章增加代码高亮功能

当你的鼠标放置在代码的颜色文本上,就会有一个气泡出来,让你预览这个颜色。


选好之后,分别点击DOWNLOAD JS,DOWNLOAD CSS,下载两个文件。我把它放在项目中

用Prismjs给自己的博客文章增加代码高亮功能

在页面中分别引用

<link rel="stylesheet" type="text/css" href="@{static}/ueditor/third-party/prismjs/prism.css">

<script type="text/javascript" src="@{static}/ueditor/third-party/prismjs/prism.js"></script>

然后编写代码把Ueditor的pre格式转成Prismjs兼容的格式。我这里的具体做法是,找到页面中所有带有class属性的pre标签,用正则表达式提取出接在brush:后面的语言字符。然后把代码放置在一个code元素里边,给code元素添加一个language-xxx的class,用code元素作为参数调用Prism.highlightElement。代码如下:

<script>
    var $codepre = $("pre[class]");
        if($codepre.length>0){
            for(var i = 0;i<$codepre.length;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>");
                code.attr("class","language-"+language);
                code.html(codehtml);
                item.html(code);
                Prism.highlightElement(code[0]);
            }
        }
    }
</script>

大功告成!

献上效果图:

用Prismjs给自己的博客文章增加代码高亮功能

效果还不错。我后面再关注它有没有BUG方面的问题。

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