google-code-prettify
功能:语法高亮
引入文件:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.css">
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js"></script>
更多风格样式文件请参考演示地址
HTML:
<pre class="prettyprint linenums lang-php">…</pre>
linenums:添加行号(不是必须的)
lang-php:特定语言(不是必须的)
JavaScript:
<script>window.onload = function() { prettyPrint(); }</script>
或者可以直接在文档末尾引入:
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
还可以添加主题样式,用法
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css" defer></script>
run_prettify.js 文件包含了 JS 文件并执行调用
如果不想在每个<pre>
元素里添加 prettyprint
类,可通过批量添加:
$(function() {
//代码高亮
$(‘pre’).each(function() {
if(!$(this).hasClass(“prettyprint”)) {
$(this).addClass(“prettyprint”);
}
});
})
如果行号显示不正常,可修改
<style type=”text/css”>
ol.linenums {
padding-inline-start: 40px;
}
.linenums li,
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
list-style-type: decimal !important
}
<style>