在vue项目中怎么使用SyntaxhighligherLite

在 Vue 项目中使用 SyntaxhighlighterLite 可以采用以下步骤：

1. 安装 SyntaxhighlighterLite：在项目根目录中运行 `npm install syntaxhighlighter-lite` 或者 `yarn add syntaxhighlighter-lite`

2. 导入 SyntaxhighlighterLite：在需要使用的 Vue 组件中导入 `syntaxhighlighter-lite` 包，如：

import SyntaxHighlighter from 'syntaxhighlighter-lite'

3. 在组件中定义一个代码块，并给它加上一个唯一的 id

<template>
  <pre id="codeBlock">
    {{code}}
  </pre>
</template>

4. 在组件的 created 钩子函数中初始化 SyntaxHighlighter

export default {
  created() {
    SyntaxHighlighter.highlight({
      element: document.getElementById('codeBlock'),
      language: 'javascript'
    })
  },
  data() {
    return {
      code: 'console.log("Hello World!")'
    }
  }
}

5. 在组件中引入样式文件
在项目根目录中安装 style-loader 和 css-loader

npm install style-loader css-loader

然后在 main.js 中引入样式文件

import 'syntaxhighlighter-lite/styles/shCore.css'
import 'syntaxhighlighter-lite/styles/shThemeDefault.css'

6.运行项目,你会发现你的代码高亮了

注意:需要保证你的代码中有对应的语言的高亮规则文件。