js怎么设置代码高亮

在JavaScript中设置代码高亮，可以使用各种库和框架，如highlight.js、Prism.js、CodeMirror等。这些工具帮助开发者通过简单的配置和调用，将代码片段以高亮显示的形式呈现。highlight.js是一种非常流行的选择，因为它支持多种编程语言，并且易于集成。下面将详细介绍如何使用highlight.js来实现代码高亮。

一、引入highlight.js库

1. 使用CDN引入highlight.js

要使用highlight.js，首先需要在HTML文件中引入该库。你可以通过以下方式使用CDN来引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
</head>
<body>
    <pre><code class="language-javascript">const hello = "Hello, world!";</code></pre>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
</body>
</html>

通过上述代码，你已经成功引入了highlight.js及其默认的样式文件。接下来，你只需在需要高亮显示的代码块中添加相应的语言类名即可。

2. 本地引入highlight.js

你也可以将highlight.js库下载到本地并引入：

访问highlight.js官网下载你需要的语言包和样式文件。
将下载的文件放置在你的项目目录中。
在HTML文件中引入这些文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="path/to/styles/default.min.css">
</head>
<body>
    <pre><code class="language-javascript">const hello = "Hello, world!";</code></pre>
    <script src="path/to/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
</body>
</html>

二、使用highlight.js高亮代码

1. 基础用法

在引入highlight.js库和样式文件后，你可以在HTML文件中使用<pre><code>标签来包裹需要高亮显示的代码，并为<code>标签添加相应的语言类名：

<pre><code class="language-javascript">
    function add(a, b) {
        return a + b;
    }
</code></pre>

2. 自定义样式

highlight.js提供了多种样式，你可以根据需要选择或自定义样式。例如，你可以使用“solarized-dark”样式：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/solarized-dark.min.css">

如果需要进一步自定义样式，你可以在CSS文件中添加自己的样式规则：

.hljs {
    background: #f0f0f0;
    color: #333;
}

三、使用highlight.js的高级特性

1. 动态内容高亮

有时你可能需要在JavaScript中动态添加代码块，并对其进行高亮显示。你可以使用hljs.highlightElement()方法来实现这一点：

<pre><code id="dynamic-code" class="language-javascript"></code></pre>
<script>
    document.getElementById('dynamic-code').innerText = 'const dynamic = "This is dynamic code!";';
    hljs.highlightElement(document.getElementById('dynamic-code'));
</script>

2. 自动检测语言

highlight.js还支持自动检测代码的语言。如果你不想手动添加语言类名，可以省略class="language-..."，让highlight.js自动检测：

<pre><code>
    const autoDetect = "highlight.js will auto detect the language!";
</code></pre>
<script>hljs.highlightAll();</script>

四、使用Prism.js实现代码高亮

除了highlight.js，你还可以使用另一种流行的库Prism.js来实现代码高亮。Prism.js同样易于集成，并且支持多种语言和插件。

1. 引入Prism.js

使用CDN引入Prism.js库和默认样式：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>

2. 使用Prism.js高亮代码

和highlight.js类似，你需要在HTML文件中使用<pre><code>标签，并为<code>标签添加相应的语言类名：

<pre><code class="language-javascript">
    let prismHighlight = "This is highlighted by Prism.js";
</code></pre>

3. 自定义样式

Prism.js也提供了多种样式，并允许自定义。你可以选择不同的主题，或在CSS文件中定义自己的样式：

pre[class*="language-"] {
    background: #f5f5f5;
    color: #333;
}

五、使用CodeMirror实现代码高亮

CodeMirror是一款功能强大的文本编辑器，可以实现代码高亮、自动补全、错误提示等多种功能。

1. 引入CodeMirror

使用CDN引入CodeMirror库和样式文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/javascript/javascript.min.js"></script>

2. 初始化CodeMirror

在HTML中添加一个<textarea>，并通过JavaScript初始化CodeMirror实例：

<textarea id="code-editor">const codeMirror = "This is highlighted by CodeMirror";</textarea>
<script>
    var editor = CodeMirror.fromTextArea(document.getElementById("code-editor"), {
        mode: "javascript",
        lineNumbers: true
    });
</script>

六、比较不同的代码高亮库

1. 功能和易用性

highlight.js和Prism.js都非常易于使用，适合需要简单代码高亮的场景。CodeMirror则更强大，适用于需要编辑功能的场景，如在线代码编辑器。

2. 性能

在性能方面，highlight.js和Prism.js都表现良好，但在处理大量代码时，highlight.js可能更快。CodeMirror由于其复杂性，性能可能稍逊于前两者。

3. 自定义和扩展性

三者都支持自定义样式和扩展功能。highlight.js和Prism.js通过插件和自定义样式可以实现各种特殊需求，而CodeMirror则提供了更丰富的API和插件，适合高级用户。

七、总结

在JavaScript中设置代码高亮，推荐使用highlight.js、Prism.js或CodeMirror。highlight.js由于其简单易用和广泛支持的语言种类，是一个非常不错的选择。Prism.js提供了更多的自定义和插件选项，而CodeMirror则适合需要更复杂功能的场景。根据具体需求选择合适的库，可以让你的代码展示更加专业和美观。