JS 代码高亮插件

简介

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

代码高亮插件官网:https://highlightjs.org/

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

用法

静态渲染

注意几点:

  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 &lt; 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 &lt; 0xFFFF; i++)
    cout &lt;&lt; "Hello, World!" &lt;&lt; endl;
    char c = '\n';
    unordered_map &lt;string, vector&lt;string&gt; &gt; m;
    m["key"] = "\\\\"; // this is an error
    return -2e3 + 12l;
}
            </code>
        </pre>
    </body>
</html>

在这里插入图片描述

动态渲染

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

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

  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, "&amp;"); 
                    s = s.replace(/</g, "&lt;"); 
                    s = s.replace(/>/g, "&gt;"); 
                    s = s.replace(/ /g, "&nbsp;"); 
                    s = s.replace(/\'/g, "&#39;"); 
                    s = s.replace(/\"/g, "&quot;"); 
                        s = s.replace(/\n/g, "<br/>"); 
                    return s; 
                } 

                function htmlDecode(str) { 
                    var s = ""; 
                    if (str.length == 0) return ""; 
                    s = str.replace(/&amp;/g, "&"); 
                    s = s.replace(/&lt;/g, "<"); 
                    s = s.replace(/&gt;/g, ">"); 
                    s = s.replace(/&nbsp;/g, " "); 
                    s = s.replace(/&#39;/g, "\'"); 
                    s = s.replace(/&quot;/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 &lt;iostream&gt;
int main(int argc, char *argv[]) {
    /* An annoying "Hello World" example */
    for (auto i = 0; i &lt; 0xFFFF; i++)
    cout &lt;&lt; "Hello, World!" &lt;&lt; endl;
    char c = '\n';
    unordered_map &lt;string, vector&lt;string&gt; &gt; 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>

在这里插入图片描述

更换样式

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

https://github.com/highlightjs/highlight.js/tree/master/src/styles

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值