Vue 3与Highlight.js集成：代码块语法高亮显示

在Vue 3项目中集成Highlight.js，可以为代码块提供语法高亮显示功能，从而提升用户体验和文档的可读性。以下是实现这一功能的详细步骤及技术解析。

1. 安装依赖

首先需要安装highlight.js库。可以通过npm或yarn来安装：

npm install highlight.js --save

或者

yarn add highlight.js

2. 引入Highlight.js

在Vue 3中，可以通过全局引入或局部引入的方式使用Highlight.js。以下是两种方式的具体实现：

全局引入

如果希望整个项目中的代码块都能自动高亮显示，可以在main.js中进行全局配置：

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

const app = createApp(App);

// 挂载到Vue原型上（适用于Vue 2，但在Vue 3中推荐使用provide/inject）
app.config.globalProperties.$hljs = hljs;

// 或者直接全局注册一个方法
app.provide('hljs', hljs);

app.mount('#app');

注意：highlight.js提供了多种主题样式，可以根据需求选择不同的CSS文件。

局部引入

如果只需要在某些组件中使用Highlight.js，可以采用局部引入的方式。例如，在某个组件的<script>部分引入：

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

export default {
  mounted() {
    this.highlightCode();
  },
  methods: {
    highlightCode() {
      const blocks = document.querySelectorAll('pre code'); // 获取所有代码块
      blocks.forEach((block) => {
        hljs.highlightBlock(block); // 对每个代码块进行高亮处理
      });
    }
  }
};
</script>

3. 在模板中使用

为了确保代码块能够被正确高亮，需要按照HTML标准定义代码块。以下是一个示例：

<template>
  <div>
    <h1>示例代码</h1>
    <pre><code class="javascript">
function helloWorld() {
  console.log('Hello, world!');
}
    </code></pre>
  </div>
</template>

关键点说明

• pre标签用于保留代码的格式。
• code标签用于包裹实际的代码内容。
• class属性指定语言类型（如javascript、python等），Highlight.js会根据该值自动识别并应用相应的语法规则。

4. 动态内容的处理

如果代码块的内容是动态生成的（例如通过API获取），需要手动调用highlightBlock方法来重新渲染。例如：

methods: {
  async fetchData() {
    const response = await fetch('/api/code');
    const data = await response.json();
    this.code = data.code; // 将动态内容赋值给data
    this.$nextTick(() => {
      this.highlightCode(); // 确保DOM更新后再执行高亮
    });
  },
  highlightCode() {
    const blocks = this.$el.querySelectorAll('pre code');
    blocks.forEach((block) => {
      hljs.highlightBlock(block);
    });
  }
}

5. 使用Vite或Webpack优化

在现代前端开发中，通常会使用构建工具（如Vite或Webpack）来管理静态资源。以下是针对不同工具的优化建议：

Vite

在vite.config.js中配置highlight.js的按需加载，以减少打包体积：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['highlight.js/lib/core'],
  },
});

然后在代码中按需加载语言包：

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);

Webpack

在webpack.config.js中添加类似配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

6. 扩展讨论：自定义语言支持

如果需要支持非内置的语言（如GraphQL），可以扩展Highlight.js的功能。例如：

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

hljs.registerLanguage('graphql', graphql);

// 在代码块中使用
<pre><code class="graphql">
query GetUser($id: ID!) {
  user(id: $id) {
    name
    email
  }
}
</code></pre>

7. 流程图：代码高亮逻辑

以下是代码高亮的整体流程图：

sequenceDiagram
    participant VueComponent as Vue组件
    participant HighlightJS as Highlight.js
    participant DOM as DOM节点

    VueComponent->>DOM: 渲染包含
的HTML结构
    VueComponent->>HighlightJS: 调用highlightBlock方法
    HighlightJS->>DOM: 高亮处理代码块
    DOM-->>VueComponent: 显示高亮后的代码