如何在网站、应用或博客中为代码片段添加语法高亮显示

你是否曾经好奇过像Dev.to这样的网站、编程博客和落地页（例如https://ohmysmtp.com）是如何显示带有漂亮语法高亮的代码片段的？继续阅读，了解如何在你的网站上设置此功能。

请注意，有一些代码截图网站，例如https://carbon.now.sh/，可以提供代码的精美截图。但这些截图只是普通的 .png 图片，无法访问、搜索或复制粘贴。我们这里不会这样做，我们的输出将完全可访问，并以文本形式显示在页面上。

代码语法高亮看起来像魔法，但实际上并没有你想象的那么复杂。让我们开始吧。

依赖关系

我们将使用PrismJS来完成所有繁重的工作。

有几种方法可以将其集成到你的项目中。如果你已经在使用 JS 打包工具（例如 esbuild 或 Webpack），你可以为 Prism 设置 Babel 插件。为了演示，我们将采用传统而简单的方法，直接编写 HTML 标签。

最后，我们将它们添加到HTML页面中。CSS代码放在<head><head>部分，JS代码可以放在<head>标签的末尾<body>。

提示：将 JS 代码放在该部分的末尾<body>，以避免延迟页面其余部分的加载。

<head>
    ...
    <link rel="stylesheet" href="prism.css">
</head>
<body>
    ...
    <script src="prism.js"></script>
</body>

接下来，我们将添加想要高亮显示普通<code>标签的代码片段。例如：

<code>
   const variable = "Here's some JavaScript";
</code>

刷新页面后，您将看到未高亮显示的代码，如下所示：

const variable = "Here's some JavaScript";

我们需要告诉 Prism 高亮显示代码块以及使用的语言。为此，我们将向代码code块添加一个 HTML 类，格式如下：class="language-XXXXX"其中 XXXXX 是语言，如下所示：

<code class="language-javascript">
   const variable = "Here's some JavaScript";
</code>

最后，我们将所有内容包裹在一个<pre>标签中。这将“保留”代码块的格式和缩进，以便我们能够将其完全按照编辑器中的显示方式呈现。

<pre><code class="language-javascript">const variable = "Here's some JavaScript";</code></pre>

请注意，我已经移除了换行符/空格（HTML 解析器通常会忽略这些）。这在我们的编辑器中阅读起来可能有点别扭，但这意味着当 Prism 渲染 JavaScript 代码时，它会按照我们想要的方式显示：

const variable = "Here's some JavaScript";

我们最初的 HTML 由标准块组成<code>，这些标准块通常用于代码示例，因此浏览器知道如何在不突出显示的情况下显示这些代码。

Prism JavaScript 会扫描页面，查找带有“language-XXXXX”标签的代码块，找到后会将这些代码块视为需要语法高亮显示的代码。

Prism 通过以下方式应用语法高亮：

它主要使用正则表达式来完成大部分工作，您可以在源代码中轻松阅读这些正则表达式（例如，JavaScript 的规则在这里：https://github.com/PrismJS/prism/blob/master/components/prism-javascript.js）。

规则prism.css随后负责实际的着色。这些正则表达式及其实现可能相当复杂，但概念相对简单。

就是这样——只要知道方法，添加起来就很容易。