vue3怎么引入highlight.js進行代碼高亮

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開發中取得更多成果！