google-code-prettify

GitHub 项目地址 演示地址

功能：语法高亮

引入文件：

<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>

转载请注明出处：吖Go博客 » google-code-prettify 代码高亮