vue highlight

Vue Highlight是一个用于在web界面上美化pre标签的插件。它使用highlight.js来实现高亮显示代码。具体使用方法如下：

首先，在需要高亮显示的内容标签上使用v-highlight指令。例如：

<div>
  <pre v-highlight>
    <code class="lang-javascript">
      {{codeText}}
    </code>
  </pre>
</div>

然后，在Vue的环境中配置highlight.js。需要安装highlight.js依赖并在main.js中导入所需配置。可以选择导入自己喜欢的样式文件。例如：

import hljs from "highlight.js";
import "highlight.js/styles/atelier-cave-dark.css";

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

最后，在Vue组件中使用highlight.js。官方提供了两种组件的用法，autodetect和language。例如：

<highlightjs autodetect :code="code" />
<highlightjs language="javascript" code="var x = 5;" />

可以根据需要选择使用不同的样式。

总结：Vue Highlight是一个使用highlight.js来美化pre标签的插件，在Vue中使用v-highlight指令来实现高亮显示代码，并根据需要导入不同的样式文件。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [在vue中使用highlight](https://blog.csdn.net/u011364720/article/details/90417302)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]