highlight.js在vue中的使用

在Vue中使用highlight.js可以通过以下骤进行配置：
1. 首先，安装highlight.js的依赖。可以使用cnpm来安装，运行命令`cnpm install highlight.js`。
2. 然后，在main.js中导入需要的配置。使用import语句导入highlight.js和所需的样式文件，例如`import hljs from "highlight.js";`和`import "highlight.js/styles/atelier-cave-dark.css";`。
3. 接下来，在Vue的directive中配置highlight.js的使用。可以在Vue.directive中定义一个highlight指令，遍历页面中的pre标签，并使用hljs.highlightBlock方法对每个block进行代码高亮处理。例如：

Vue.directive("highlight", function (el) {
  let blocks = el.querySelectorAll("pre code");
  blocks.forEach((block) => {
    hljs.highlightBlock(block);
  });
});

4. 最后，在需要应用highlight.js的组件中使用highlight指令。在模板中的pre标签上添加v-highlight指令，例如`<pre v-highlight><code>{{ code }}</code></pre>`。

这样配置之后，highlight.js会对pre标签内的代码进行美化和高亮处理，使页面展示更加美观和易读。同时，可以根据需要导入不同的样式文件，以实现不同的代码高亮主题效果。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* [vue—highlight.js在Vue中的使用（pre标签代码高亮）](https://blog.csdn.net/qq_45997679/article/details/115027351)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
- *2* *3* [highlight.js 在 Vue 中使用的一点儿经验](https://blog.csdn.net/weixin_34121282/article/details/88875593)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]