南琴浪博客

highlight.js - 代码高亮插件

03/09/2018

highlight.js 是一款 javascript 代码高亮插件(其它同类插件推荐 Google Prettify、Prism code 等),多主题可选,也算简单易用(虽然使用过程中发现对 shell 语言的支持很让人着急)。

本博客使用 highlight.js 提供代码高亮。本文介绍其基本用法。

选择主题

highlight.js 的主题还是比较丰富的,你可以在 demo 中在线预览这些主题。本站使用 github-gist 主题。

看好你想要的主题后,把例如 https://cdn.bootcss.com/highlight.js/9.2.0/styles/github-gist.min.css 中的 github-gist 字段替换成你想要的主题名字,这是你之后引入 css 主题时使用的 cdn 地址(当然你也可以自己转存)。

引入插件

<head></head> 标签内引入 js 插件和 css 主题:

<link href="https://cdn.bootcss.com/highlight.js/9.2.0/styles/github-gist.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/highlight.js/9.2.0/highlight.min.js"></script>

然后,在引入文件加载完毕后进行初始化。还是引入到 head 标签内,并建议就把这段跟在上面代码后面:

hljs.initHighlightingOnLoad();

好了,大功告成。效果可以参考本站。