网址：highlightjs.org/

doc: github.com/highlightjs… 版本：11.6.0

网页说明

在线引用

官网实例：highlightjs.org/download/

引用默认样式

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css"> 
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>

更换样式为github，则修改引入的css文件

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/github.min.css"> 
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>

下载引用

下载地址：highlightjs.org/download/ 选择对应的语言，点击下面的下载，得到一个highlight.zip的下载包

解压下载包，得到如下目录

styles目录下存放的为样式，找到对应的样式，复制到项目中即可

简单使用

静态文件使用

• 引入文件

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css"> 
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>

• html中写入相应内容

<div>
    <pre>
        <code>
            {
                "id": "uuid",
                "name": "highLight",
                "input": {
                        "time": "2022-09-02 16:42:23",
                        "header": "content",
                        "body": "test"
                },
                "output": [{
                        "status": true,
                        "number": 21
                }, {
                        "status": false,
                        "number": 89
                }]
            }
        </code>
    </pre>
</div>

注意：格式化文件必须写到code标签中，不然没有效果

• 调用默认方法

hljs.highlightAll();

注意：hljs是highlight中的变量，用于初始化。

动态文件使用

• 文件引用

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css"> 
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>

• 代码示例

<div><pre><code id="bodyCode"></code></pre></div>

<script>
    $(function(){
        var jsonStr = '{"id":"uuid","name":"highLight","input":{"time":"2022-09-02 16:42:23","header":"content","body":"test"},"output":[{"status":true,"number":21},{"status":false,"number":89}]}';
        var json = JSON.parse(jsonStr);
        $("#bodyCode").html(JSON.stringify(json, null, 4));
        hljs.highlightAll();
    });
</script>