利用highlightJs或者Prism.js给代码加上高亮


目前用的最多的就是highlightJs和Prism.js两种代码高亮的方法。反正我觉得highlightJs蛮傻瓜式的,Prism.js还要在插入代码的时候声明该代码是什么语言。

highlightJs蛮傻瓜式实现方法

将下面引用加入你主题header.php头部即可。

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script >hljs.initHighlightingOnLoad();</script>

觉得这个cdnJs加载慢的同学建议自己保存到本地主题文件夹内再进行引用。

代码高亮css

下面是我主题内的代码高亮css,感觉比较适合简洁色调的。当然你也可以自己个性化css。

/*代码高亮*/.hljs-comment,.hljs-quote{color:#8e908c}
.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#c82829}
.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#f5871f}
.hljs-attribute{color:#eab700}
.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#718c00}
.hljs-section,.hljs-title{color:#4271ae}
.hljs-keyword,.hljs-selector-tag{color:#8959a8}
.hljs{display:block;overflow-x:auto;background:#fafafa;color:#4d4d4c;padding:1em}
.hljs-emphasis{font-style:italic}
.hljs-strong{font-weight:700}
.diff .hljs-header,.hljs-javadoc{font-style:italic}
.css .rule .hljs-keyword,.hljs-cdata,.hljs-class .hljs-title,.hljs-doctype,.hljs-id,.hljs-keyword,.hljs-pi,.hljs-pragma,.hljs-preprocessor,.hljs-regexp,.hljs-request,.hljs-shebang,.hljs-status,.hljs-subst,.hljs-title,.hljs-type,.hljs-winutils,.nginx .hljs-title,.scss .hljs-preprocessor,.tex .hljs-command,.vhdl .hljs-literal{font-weight:700}

上面只是其中一种css选择,这里还有更多css选择。
github地址:https://github.com/isagalaev/highlight.js/tree/master/src/styles

代码插入方法

<pre><code>...这里是代码位置...</code></pre>

Prism.js代码高亮的方法

连 JavaScript 之父 Brendan Eich 也在个人博客上使用!

如何使用:

你只需要在页面上引入 prism.css 和 prism.js 文件:

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

遵循 HTML5 标准,Prism 使用语义化的 <pre> 元素和 <code> 元素来标记代码区块:

<pre><code class="language-css">p { color: red }</code></pre>

如果你感兴趣,可以 查看更多官方示例 或者 在线试用

试试吧,真的很棒!

Prism 官网 | 代码示例 | 立即下载 | GitHub

我选用的是主题自带的和UEditor里的highlight插件

参考:http://c7sky.com/syntax-highlighting-with-prismjs.html

声明:TIL|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA[ZH]协议进行授权

转载:转载请注明原文链接 - 利用highlightJs或者Prism.js给代码加上高亮


Life is very interesting. In the end, some of your greatest pains become your greatest strengths.