L Z A

markdown代码高亮库

2018-08-03 | 效率工具

写在前面

仅此文记录个人博客搭建过程中markdown代码高亮库的使用心得。

最初使用的是客户端处理代码高亮,但是有一个问题,就是代码会有一个闪动,因为是浏览器执行js对代码进行高亮处理(其实就是判断代码的类型,给代码加个class名,就像是function呢,还是var呢,还是数字呢。)这个过程的执行相比文档是靠后的,class名加的稍迟一些,所以有了闪动。发现问题后就改用服务端处理了,具体请往下看。

补充说明

文章我是使用markdown语法写的,所以还用了一个markdown转html的工具 marked.js,以下高亮工具都是配合marked使用的。

Prismjs

client-side

 <!DOCTYPE html>
<html>
<head>
    ...
    <link href="http://prismjs.com/themes/prism.css" rel="stylesheet" />
</head>
<body>
    ...
    <script src="http://prismjs.com/prism.js"></script>
</body>
</html>

server-side

首先安装prism

$ npm install prismjs marked

然后就可以使用了

import Prism from 'prismjs';
import marked from 'marked';
import loadLanguages from 'prismjs/components/';
marked.setOptions({
    highlight: (code, lang) => {
        loadLanguages([lang]);
        return Prism.highlight(code, Prism.languages[lang]);
    }
})