highlight.js轻松点亮你的Vue代码

2023-12-30 07:57:59

在 Vue 中点亮代码世界：活用 Highlight.js

简介

代码高亮是任何编程项目中不可或缺的一环，它使代码更易于阅读和理解，从而提高开发效率。Highlight.js 是一个功能强大的代码高亮库，在 Vue 项目中使用它可以轻松实现代码高亮的惊艳效果。

安装 Highlight.js

首先，通过 npm 安装 Highlight.js：

npm install highlight.js

然后，在项目中引入 Highlight.js：

import hljs from 'highlight.js'

配置 Highlight.js

接下来，我们需要对 Highlight.js 进行配置。在项目中创建一个名为 highlight.js 的文件，并写入以下内容：

// 导入 Highlight.js 样式表
import 'highlight.js/styles/default.css'

// 配置 Highlight.js
hljs.configure({
  // 是否启用行号
  lineNumbers: true,
  // 代码块标签
  tabReplace: '    ',
  // 代码块 class 前缀
  classPrefix: 'hljs-'
})

使用 Highlight.js

完成配置后，我们就可以在 Vue 组件中使用 Highlight.js 了。可以通过 v-highlight 指令对代码块进行高亮处理：

<template>
  <pre v-highlight>
    {{ code }}
  </pre>
</template>

<script>
import hljs from 'highlight.js'

export default {
  mounted() {
    // 手动调用 Highlight.js 对代码块进行高亮处理
    hljs.highlightElement(this.$el)
  }
}
</script>

代码示例

以下代码示例演示了如何在 Vue 组件中使用 Highlight.js：

<template>
  <div>
    <pre v-highlight>
      // JavaScript
      const add = (a, b) => {
        return a + b
      }
    </pre>
    <pre v-highlight lang="python">
      # Python
      def add(a, b):
        return a + b
    </pre>
  </div>
</template>

<script>
import hljs from 'highlight.js'

export default {
  mounted() {
    hljs.highlightAll()
  }
}
</script>