JS 代码高亮插件

﹏ヽ暗。殇╰゛Y 2022-12-31 06:22 125阅读 0赞

# 简介 #

在网页的使用过程中，经常会有代码展示的必要。而不同颜色的关键词，可以让代码看起来更直观、更美观。

代码高亮插件官网：[https://highlightjs.org/][https_highlightjs.org]

*  点击图中的 “language” 可以切换语言
 *  点击图中的“style”可以切换样式  
    ![在这里插入图片描述][20201228201749851.png]支持的语言列表 [https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED\_LANGUAGES.md][https_github.com_highlightjs_highlight.js_blob_master_SUPPORTED_LANGUAGES.md]  
    ![在这里插入图片描述][20201228202247471.png]

在首页点击 “Get Version” 可以定制某几种语言，也可以直接使用默认支持的那几种语言的CDN  
![在这里插入图片描述][20201228202514757.png]![在这里插入图片描述][20201228202950167.png]

# 用法 #

## 静态渲染 ##

注意几点：

1.  pre里的代码由于会保持书写时的格式，因此要顶格
2.  需要高亮显示的代码要放在 <pre> <code> 里面
3.  如果代码里有大于或小于号，要进行转义
4.  cdn中除了default还包含很多其它样式，可以根据需要进行替换

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/rainbow.min.css">
            <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
            <script >hljs.initHighlightingOnLoad();</script>
        </head>
        <body>
            <p>下面是一段高亮SQL脚本</p>
            <pre>
                <code class="sql">
    DROP DATABASE IF EXISTS mybatis;
    CREATE DATABASE mybatis DEFAULT CHARACTER SET utf8;
    
    use mybatis;
    CREATE TABLE student(
        id int(11) NOT NULL AUTO_INCREMENT,
        studentID int(11) NOT NULL UNIQUE,
        name varchar(100) NOT NULL,
        PRIMARY KEY(id)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8
    
    INSERT INTO student VALUES(1, 1, 'Bob');
    INSERT INTO student VALUES(2, 2, 'Tom');
    INSERT INTO student VALUES(3, 3, 'Tina');
                </code>
            </pre>
            <p>下面是一段高亮JAVA脚本</p>
            <pre>
                <code class="java">
    public static void main(String[] args) {
        for(int i = 0; i < 10; i++) {
            System.out.println("index = " + i);
        }
    }
                </code>
            </pre>
            <p>下面是一段高亮的C++代码</p>
            <pre>
                <code class="c++">
    #include <iostream>
    int main(int argc, char *argv[]) {
        /* An annoying "Hello World" example */
        for (auto i = 0; i < 0xFFFF; i++)
        cout << "Hello, World!" << endl;
        char c = '\n';
        unordered_map <string, vector<string> > m;
        m["key"] = "\\\\"; // this is an error
        return -2e3 + 12l;
    }
                </code>
            </pre>
        </body>
    </html>

![在这里插入图片描述][20201228200008891.png]

## 动态渲染 ##

上面的代码是针对初始化时就已经存在的语句。但很多时候，代码是动态生成的，因此就需要动态高亮

动态生成的高亮代码块要注意以下几点：

1.  赋值时使用 innerText（会进行自动转义），如果使用 innerHTML 由于不会进行转义，特殊字符将无法显示（需要手动转义）
2.  代码块语句`<pre><code></code><pre>`必须紧紧的贴在一起，不能有换行或空格，否则生成的代码块首行前面会带若干空格
3.  highlightBlock 的效果与 initHighlightingOnLoad 还是有区别的，效果不如 initHighlightingOnLoad 好

<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/rainbow.min.css">
            <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
            <script >hljs.initHighlightingOnLoad();</script>
            <script>
                    function htmlEncode(str) { 
                        var s = ""; 
                        if (str.length == 0) return ""; 
                        s = str.replace(/&/g, "&"); 
                        s = s.replace(/</g, "<"); 
                        s = s.replace(/>/g, ">"); 
                        s = s.replace(/ /g, " "); 
                        s = s.replace(/\'/g, "'"); 
                        s = s.replace(/\"/g, """); 
                            s = s.replace(/\n/g, "<br/>"); 
                        return s; 
                    } 
    
                    function htmlDecode(str) { 
                        var s = ""; 
                        if (str.length == 0) return ""; 
                        s = str.replace(/&/g, "&"); 
                        s = s.replace(/</g, "<"); 
                        s = s.replace(/>/g, ">"); 
                        s = s.replace(/ /g, " "); 
                        s = s.replace(/'/g, "\'"); 
                        s = s.replace(/"/g, "\""); 
                        s = s.replace(/<br\/>/g, "\n"); 
                        return s; 
                    } 
                function diyCodeGen() {
                    const diyCode = document.getElementById("diyCode");
                    const diyCodeBlock = document.getElementById("diyCodeBlock");
                    const code = diyCodeBlock.firstElementChild;
                    code.className = "c++";
                    //innerText会自动转义，innerHTML则不会
                    //code.innerText = diyCode.value;
                    code.innerHTML = htmlEncode(diyCode.value);
                    hljs.highlightBlock(diyCodeBlock);
                }
            </script>
        </head>
        <body>
            <p>下面是一段高亮的C++代码</p>
            <pre>
                <code class="c++">
    #include <iostream>
    int main(int argc, char *argv[]) {
        /* An annoying "Hello World" example */
        for (auto i = 0; i < 0xFFFF; i++)
        cout << "Hello, World!" << endl;
        char c = '\n';
        unordered_map <string, vector<string> > m;
        m["key"] = "\\\\"; // this is an error
        return -2e3 + 12l;
    }
                </code>
            </pre>
            <p>动态生成高亮代码</p>
            <textarea id="diyCode" rows="10" cols="50"></textarea>
            <button onclick="diyCodeGen()">生成高亮代码</button>
            <pre id="diyCodeBlock"><code></code></pre>
        </body>
    </html>

![在这里插入图片描述][20201228205737768.png]

## 更换样式 ##

官网提供了3种CDN，样例代码都是 default.min.css，但实际远不只这一种样式。可以从下面的列表中任选你心仪的样式进行替换。

[https://github.com/highlightjs/highlight.js/tree/master/src/styles][https_github.com_highlightjs_highlight.js_tree_master_src_styles]

![在这里插入图片描述][20201229092740322.png]

[https_highlightjs.org]: https://highlightjs.org/
[20201228201749851.png]: https://img-blog.csdnimg.cn/20201228201749851.png
[https_github.com_highlightjs_highlight.js_blob_master_SUPPORTED_LANGUAGES.md]: /images/20221120/c6b043b63d804c73830603ef1f66ff11.png
[20201228202247471.png]: /images/20221120/a2d57a9b141244eab58fa032275a8f31.png
[20201228202514757.png]: https://img-blog.csdnimg.cn/20201228202514757.png
[20201228202950167.png]: /images/20221120/fcfe2704aa6c489f82593d8885a96168.png
[20201228200008891.png]: /images/20221120/0acb6c2617544f0b82cf56bcf9f9454e.png
[20201228205737768.png]: /images/20221120/f6d6e81acf9e4331a692fd24400220b5.png
[https_github.com_highlightjs_highlight.js_tree_master_src_styles]: https://github.com/highlightjs/highlight.js/tree/master/src/styles
[20201229092740322.png]: /images/20221120/f1f4d70ba709463c93c3abd93d7c04b2.png