Web 的语法高亮显示 - Javascript (1)

📌 相关文章

📜 Web 的语法高亮显示 - Javascript (1)

📅 最后修改于: 2023-12-03 14:48:25.417000 🧑 作者: Mango

Web 的语法高亮显示 - Javascript

在 Web 开发中，我们经常需要在页面上显示代码片段，为了使代码更易读，通常需要用到语法高亮显示。Javascript 是 Web 开发中最常用的语言之一，这篇文章将介绍如何在 Web 页面上进行 Javascript 代码的语法高亮显示。

现有解决方案

在 Web 开发中，有多种语法高亮显示的解决方案，如：

这些解决方案都有各自的优势和不足，可以根据项目需要进行选择。

使用 highlight.js 进行 Javascript 语法高亮显示

在这里，我们将使用 highlight.js 来进行 Javascript 代码的语法高亮显示。highlight.js 以轻量级的方式支持大量的编程语言和文档格式，并能够自动识别代码的语言类型。

步骤 1：引入 highlight.js 库文件

你需要在 Web 页面中引入 highlight.js 库文件。你可以从官方网站下载最新版本的 highlight.js，或者使用以下 CDN 引入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/build/styles/github.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/lib/highlight.min.js"></script>

步骤 2：选择语言类型

选择语言类型，根据需要修改 code 和 pre 标签中的 class 属性，如下面的例子中使用的是 javascript 类型：

<pre><code class="javascript">
// 这里是你的 Javascript 代码片段
console.log("Hello, World!");
</code></pre>

步骤 3：初始化 highlight.js

你需要在 Web 页面中初始化 highlight.js，代码如下：

hljs.initHighlightingOnLoad();

这个函数会在页面加载完成后自动扫描 pre code，将其中的代码片段进行语法高亮显示。

结果

这样，你就可以在 Web 页面上实现 Javascript 代码的语法高亮显示了。下面是一个完整的例子：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Web 的语法高亮显示 - Javascript</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/build/styles/github.min.css">
  <script src="https://cdn.jsdelivr.net/npm/highlight.js@10.7.2/lib/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
  <pre><code class="javascript">
    // 这里是你的 Javascript 代码片段
    console.log("Hello, World!");
  </code></pre>
</body>
</html>

结论

通过使用 highlight.js 库，可以轻松地实现 Javascript 代码的语法高亮显示。不仅能够提高代码的可读性，还能够让代码更加美观，让开发者更加舒适地编写和阅读代码。