美化页面代码--(如果浏览器页面有代码片段,可以添加高亮美化)

最新推荐文章于 2024-06-09 09:57:40 发布

旭很不戳

最新推荐文章于 2024-06-09 09:57:40 发布

阅读量546

点赞数

文章标签： html html5 css

本文链接：https://blog.youkuaiyun.com/zx960103/article/details/119897895

版权

本文档介绍了如何在Vue项目中集成并使用highlight.js进行代码高亮。首先，你需要通过yarn添加highlight.js插件，并确保引入.js文件。接着，在main.js中导入hljs对象和样式文件。然后，定义一个自定义指令`v-highlight`，遍历并应用高亮处理到所有的`pre`和`code`标签。最后，在文章详情中使用`v-highlight`指令即可实现代码块的高亮显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

英文文档(更全): https://highlightjs.readthedocs.io/en/latest/index.html

中文文档: https://fenxianglu.cn/highlight.html

1 . 下载此插件到项目中

==一定要带.js名字==

yarn add highlight.js -S

2 . 在main.js 引入即可

import hljs from 'highlight.js' // hljs对象
import 'highlight.js/styles/default.css' // 代码高亮的样式

   
3. 注册高亮代码-自定义指令

   ```js
   Vue.directive('highlight', function (el) { // 自定义一个代码高亮指令
     const highlight = el.querySelectorAll('pre, code') // 获取里面所有pre或者code标签
     highlight.forEach((block) => {
       hljs.highlightElement(block) // 突出显示这些标签(以及内部代码, 会自动识别语言)
     })
   })

4. 在铺设文章详情标签使用v-highlight指令即可