📌  相关文章
📜  语法高亮库 - Html (1)

📅  最后修改于: 2023-12-03 15:41:46.975000             🧑  作者: Mango

语法高亮库 - Html

语法高亮库是程序员在写代码时使用的工具，它能够将代码中的关键字、变量名、注释等部分按照不同的颜色进行区分，使得代码更加美观易读。Html是一种常见的语言，有许多语法高亮库可以用于Html代码的高亮。

常见的语法高亮库
1. Prism

Prism是一个轻量级的语法高亮库，它支持许多常见的编程语言和标记语言，包括Html、CSS、JavaScript、Java、C++等。Prism使用简单明了，支持自定义样式和插件。

<link href="//cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
2. Highlight.js

Highlight.js是一种适用于web的语法高亮库，支持超过180种编程语言和文本格式的高亮。它在使用方面也非常简便，只需引入相应的js和css文件即可。

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

Codemirror是一款专业的在线代码编辑器，拥有先进的代码高亮和语法检测能力。除了Html，它还支持多种编程语言的高亮，如Java、Python、Ruby等。Codemirror具有良好的可扩展性，用户可以自定义样式和插件。

<link href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/codemirror.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/theme/dracula.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/mode/htmlmixed/htmlmixed.min.js"></script>
使用方法
1. 静态页面

在静态页面中使用语法高亮库时，只需将相应的js和css文件引入到html文件中即可。以Prism为例，我们可以在<head>标签中加入下面的内容：

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

在需要高亮的代码块前后分别加上<pre>和<code>标签，并在<code>标签内部加上class属性，指定要高亮的语言。例如：

<pre><code class="language-html">
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
        &lt;head&gt;
            &lt;title&gt;My Webpage&lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;p&gt;Welcome to my webpage!&lt;/p&gt;
        &lt;/body&gt;
    &lt;/html&gt;
</code></pre>

注意到上面的代码块中，&lt;和&gt;是Html中保留字符的转义形式。

2. 动态加载

在动态加载的情况下，我们可以使用语法高亮库提供的API进行高亮。以Highlight.js为例，我们可以在js文件中使用下面的代码：

import hljs from 'highlight.js/lib/highlight';

hljs.registerLanguage('html', require('highlight.js/lib/languages/html'));
hljs.registerLanguage('css', require('highlight.js/lib/languages/css'));
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));

document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
});

在这个例子中，我们注册了Html、CSS、JavaScript三种语言的高亮规则，然后通过遍历文档中的<pre>和<code>标签，对其中的代码块使用highlightBlock方法进行高亮。