v-highlightjs

Vue 使用 `highlight.js` 进行代码高亮的方法如下：

1. 首先，在组件模板 `<template>` 中，设置一个可绑定变量来存放高亮后的代码：

   <div v-html="codeHtml" v-highlight></div>

2. 在组件的 JavaScript 部分，导入 `highlight.js` 并定义数据和方法。在 `mounted()` 生命周期钩子里调用 `format()` 方法初始化高亮效果：

   import hljs from 'highlight.js';

   export default {
     data() {
       return {
         codeHtml: ""
       };
     },
     mounted() {
       this.format();
     },
     methods: {
       format() {
         // 示例代码
         let code = "function() { console.log(\"Hello world!\"); }";
         const highlightedCode = hljs.highlightAuto(code);
         this.codeHtml = highlightedCode.value;
       }
     }
   }

3. 引入和应用样式。`highlight.js` 的样式通常放在 `highlight.js/styles/` 目录下，以文件名形式存在（如 `monokai.css`）。在Vue项目中，需要将文件名转换为CSS文件名，例如：
- 样式名称为 `monokai`，对应的CSS文件名为 `monokai.css`，这样在HTML中通过相对路径引用：

     <link rel="stylesheet" href="/styles/monokai.css">

或者，如果样式已经打包并位于静态资源目录，直接引用正确的URL。

注意：确保在你的项目中已经安装了 `highlight.js`，可以通过npm或yarn进行安装：

npm install highlight.js
# 或
yarn add highlight.js