vue 使用 highlight.js

Vue使用highlight.js可以对代码进行美化和高亮显示。首先，在main.js中需要引入highlight.js的库文件，并导入所需的样式。然后，通过Vue.directive方法定义一个自定义指令highlight，该指令会对pre标签中的代码进行高亮处理。在该指令的回调函数中，使用querySelectorAll方法获取所有pre code元素，并使用highlightBlock方法对每个code元素进行高亮处理。最后，将highlight.js的库文件通过Vue.prototype.$hljs挂载到Vue实例上，以便在组件中进行代码预处理。在具体使用时，可以通过在组件中使用&lt;highlightjs&gt;标签或者&lt;highlightjs&gt;组件传递代码和语言属性来实现代码的高亮显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue用highlight.js使代码高亮显示](https://blog.csdn.net/weixin_44409569/article/details/125018266)[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* *3* [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 ]