用 highlight.js 为文章中的代码添加语法高亮

admin · 发表于 2017-4-17 18:47:05

1.我们需要在页面中同时引入一个 js 文件和一个 css 文件：

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>

复制代码

第一个文件是样式文件，我们采用 sublime 编辑器类似的样式；第二个文件是 highlight.js 的核心文件，就是它解析代码的。
在添加这两个文件的时候，我们还是按老规矩，将 CSS 文件添加到 <head> 中，将 js 文件添加到页面底部 </body> 标签前面，这样就完成了 highlight.js 的引入。

2.
在

<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>

复制代码

标签下面加入如下代码：

<script >hljs.initHighlightingOnLoad();</script>

复制代码

这样，highlight.js 就会自动寻找 < pre><code></code></pre > 代码块并完成代码高亮了！

3.
Bootstrap中文网的cnd：
http://www.bootcdn.cn/highlight.js/
皮肤太多了，可以先预览一下再选择：
https://highlightjs.org/static/demo/

		自动登录	找回密码
密码			立即注册

用 highlight.js 为文章中的代码添加语法高亮

相关帖子

浏览过的版块

众神之神