Vue3怎么引入highlight.js进行代码高亮

在现代Web开发中，代码高亮是一个常见的需求，尤其是在技术博客、文档网站或代码展示类应用中。highlight.js 是一个流行的代码高亮库，支持多种编程语言和主题。本文将详细介绍如何在Vue3项目中引入并使用 highlight.js 来实现代码高亮。

1. 安装highlight.js

首先，我们需要在Vue3项目中安装 highlight.js。你可以使用 npm 或 yarn 来安装它。

npm install highlight.js

或者

yarn add highlight.js

2. 引入highlight.js

安装完成后，我们需要在Vue3项目中引入 highlight.js。通常，我们会在 main.js 或 main.ts 文件中进行全局配置。

2.1 全局引入

在 main.js 或 main.ts 文件中，我们可以全局引入 highlight.js 并注册一个自定义指令或全局方法。

import { createApp } from 'vue';
import App from './App.vue';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; // 引入样式文件

const app = createApp(App);

// 注册一个全局指令
app.directive('highlight', {
  mounted(el) {
    const blocks = el.querySelectorAll('pre code');
    blocks.forEach((block) => {
      hljs.highlightBlock(block);
    });
  },
});

app.mount('#app');

在上面的代码中，我们引入了 highlight.js 和一个样式文件（这里使用了 github 主题），然后注册了一个名为 highlight 的全局指令。这个指令会在元素挂载后自动查找所有的 <pre><code> 块并进行高亮处理。

2.2 局部引入

如果你不想全局引入 highlight.js，也可以在单个组件中局部引入。

<template>
  <div v-highlight>
    <pre><code class="javascript">
      const message = 'Hello, Vue3!';
      console.log(message);
    </code></pre>
  </div>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

export default {
  directives: {
    highlight: {
      mounted(el) {
        const blocks = el.querySelectorAll('pre code');
        blocks.forEach((block) => {
          hljs.highlightBlock(block);
        });
      },
    },
  },
};
</script>

在这个例子中，我们在组件内部定义了一个局部指令 highlight，并在模板中使用它来高亮代码。

3. 使用highlight.js

3.1 基本使用

在全局或局部引入 highlight.js 后，你可以在模板中使用 <pre><code> 标签来包裹代码块，并应用相应的类名来指定代码语言。

<template>
  <div v-highlight>
    <pre><code class="javascript">
      const message = 'Hello, Vue3!';
      console.log(message);
    </code></pre>
  </div>
</template>

在这个例子中，class="javascript" 指定了代码的语言为 JavaScript，highlight.js 会自动识别并进行高亮。

3.2 动态高亮

如果你需要动态高亮代码，可以在 mounted 或 updated 钩子中手动调用 hljs.highlightBlock 方法。

<template>
  <div ref="codeBlock">
    <pre><code :class="language">
      {{ code }}
    </code></pre>
  </div>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

export default {
  data() {
    return {
      code: `const message = 'Hello, Vue3!';
console.log(message);`,
      language: 'javascript',
    };
  },
  mounted() {
    this.highlightCode();
  },
  updated() {
    this.highlightCode();
  },
  methods: {
    highlightCode() {
      const blocks = this.$refs.codeBlock.querySelectorAll('pre code');
      blocks.forEach((block) => {
        hljs.highlightBlock(block);
      });
    },
  },
};
</script>

在这个例子中，我们通过 ref 获取代码块的引用，并在 mounted 和 updated 钩子中调用 highlightCode 方法来动态高亮代码。

3.3 自定义主题

highlight.js 提供了多种主题样式，你可以根据需要选择合适的主题。你可以在 highlight.js 的官方文档中找到所有可用的主题。

npm install highlight.js/styles

然后，你可以在项目中引入所需的主题文件。

import 'highlight.js/styles/github.css'; // GitHub 主题
import 'highlight.js/styles/monokai-sublime.css'; // Monokai Sublime 主题
import 'highlight.js/styles/solarized-dark.css'; // Solarized Dark 主题

你可以在 main.js 或组件中引入不同的主题文件，并根据需要切换主题。

4. 高级用法

4.1 自定义语言

highlight.js 支持多种编程语言，但如果你需要高亮一些不常见的语言，可能需要自定义语言规则。

import hljs from 'highlight.js';

hljs.registerLanguage('my-custom-language', function(hljs) {
  return {
    keywords: 'if else for while return',
    contains: [
      hljs.QUOTE_STRING_MODE,
      hljs.C_LINE_COMMENT_MODE,
      hljs.C_BLOCK_COMMENT_MODE,
    ],
  };
});

在这个例子中，我们注册了一个名为 my-custom-language 的自定义语言，并定义了它的关键词和语法规则。

4.2 异步加载语言

为了减少初始加载时间，你可以异步加载 highlight.js 的语言模块。

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import python from 'highlight.js/lib/languages/python';

hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('python', python);

在这个例子中，我们只加载了 JavaScript 和 Python 的语言模块，而不是一次性加载所有语言。

4.3 使用插件

highlight.js 社区提供了一些插件，可以扩展其功能。例如，highlightjs-line-numbers.js 插件可以为代码块添加行号。

npm install highlightjs-line-numbers.js

然后，你可以在项目中使用这个插件。

import hljs from 'highlight.js';
import 'highlightjs-line-numbers.js';

hljs.initLineNumbersOnLoad();

这个插件会自动为所有的代码块添加行号。

5. 总结

在Vue3项目中使用 highlight.js 进行代码高亮非常简单。你可以通过全局或局部引入 highlight.js，并使用自定义指令或手动调用来高亮代码。此外，highlight.js 还支持自定义语言、异步加载语言和使用插件等高级功能，可以满足各种复杂的代码高亮需求。

通过本文的介绍，你应该已经掌握了如何在Vue3项目中引入和使用 highlight.js。希望这些内容对你有所帮助，祝你在Vue3开发中取得更多成果！