Vue.js 中的代码语法高亮：一份简洁指南

在 Vue.js 中轻松实现代码语法高亮

作为一名资深的程序员和技术作家，我经常需要在 Vue.js 应用中展示语法高亮的代码。本文将提供一个简明扼要的指南，帮助你轻松实现这一需求。

问题：高亮 HTML 代码

假设你希望在 Vue.js 应用中高亮一段 HTML 代码，就像 Vue.js 文档中的示例所示。

解决方案

1. 安装 Highlight.js

highlight.js 是一个功能强大的语法高亮库，推荐用于 Vue.js。通过以下命令安装它：

npm install highlight.js

2. 导入 Highlight.js

在你的 Vue.js 组件中，导入 highlight.js：

import hljs from 'highlight.js'

3. 配置 Highlight.js

mounted() {
  hljs.initHighlightingOnLoad()
}

此代码将初始化 highlight.js，使其在页面加载时对所有代码块应用语法高亮。

4. 代码块包装

将你的 HTML 代码包装在 <pre> 和 <code 标签中：

<pre><code class="language-html">
  你的 HTML 代码
</code></pre>

5. 语言类

根据代码语言，将 language- 类添加到 <code> 标签。例如，对于 HTML，使用 language-html。

<pre><code class="language-html">
  你的 HTML 代码
</code></pre>

6. v-html 指令（可选）

使用 v-html 指令可以避免控制台错误：

<pre v-html="highlightedHTML"></pre>

其中 highlightedHTML 是一个包含经过高亮的 HTML 代码的 computed 属性。

代码示例

<template>
  <div>
    <pre><code class="language-html">
      {{ htmlCode }}
    </code></pre>
  </div>
</template>

<script>
  import hljs from 'highlight.js'

  export default {
    data() {
      return {
        htmlCode: '<h1>Hello, World!</h1>'
      }
    },
    mounted() {
      hljs.initHighlightingOnLoad()
    }
  }
</script>

提示

• 在线编辑器（如 CodePen 或 JSFiddle）可用于快速测试代码。
• 查看 highlight.js 文档了解其他自定义选项。

结论

使用 highlight.js，在 Vue.js 中实现语法高亮既简单又高效。通过遵循本文概述的步骤，你可以轻松地在应用中呈现清晰且美观的代码高亮。

常见问题解答

1. 为什么我的代码没有高亮？

   • 确保你已正确安装和导入 highlight.js。
   • 检查代码块是否正确包装在 <pre> 和 <code 标签中。
   • 确认你已为代码块指定了正确的语言类。

2. 如何高亮多种语言？

   • 为不同的语言创建不同的代码块。
   • 使用 v-html 指令将每个代码块渲染为经过高亮的 HTML。

3. 语法高亮是否支持所有语言？

   • highlight.js 支持大量语言。但是，如果你要高亮一种不受支持的语言，则需要创建自定义语言定义。

4. 如何自定义语法高亮主题？

   • highlight.js 提供了多种主题。你可以在其文档中找到有关自定义主题的说明。

5. 是否还有其他用于语法高亮的库？

   • Prism.js 和 Shiki 是 highlight.js 的替代品。