highlight.js vue

<template>
  <div>
    <pre><code class="javascript" v-html="highlightedCode"></code></pre>
  </div>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; // 引入样式

export default {
  data() {
    return {
      code: `function helloWorld() {
        console.log('Hello, world!');
      }`
    };
  },
  computed: {
    highlightedCode() {
      return hljs.highlight(this.code, { language: 'javascript' }).value;
    }
  }
};
</script>

解释说明：

1. 模板部分 (<template>):

   • 使用 <pre><code> 标签来包裹代码块，并通过 v-html 指令将高亮后的代码插入到页面中。
   • class="javascript" 指定了代码的语言类型，以便 highlight.js 可以正确解析。

2. 脚本部分 (<script>):

   • 导入 highlight.js 库和相应的样式文件（例如 GitHub 风格的样式）。
   • 在 data 中定义了一个 code 字符串，包含要高亮显示的代码。
   • 使用 computed 属性 highlightedCode 来调用 hljs.highlight 方法对代码进行高亮处理，并返回处理后的 HTML 内容。

3. 样式部分:

   • 通过引入 highlight.js 的 CSS 文件，确保代码块有合适的样式。

这样就可以在 Vue 组件中使用 highlight.js 对代码进行语法高亮。