高亮的样式--包工具highlight

实现效果展示： 

 分析：

1.想要让代码高亮, 必须在后台发布文章时, 就要把代码分段用pre+code标签包裹

2.前端可以通过获取这些标签名/指定类名, 分别给予相应样式

步骤

基于 highlight.js 美化详情页的代码片段

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

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

npm安装包

==一定要带.js名字==npm i highlight.js -D

在utils文件下创建highlight.js文件

// 代码高亮的样
import hljs from 'highlight.js' // hljs对象
import Vue from 'vue'
Vue.directive('highlight', function (el) { // 自定义一个代码高亮指令const highlight = el.querySelectorAll('pre, code') // 获取里面所有pre或者code标签highlight.forEach((block) => {hljs.highlightElement(block) // 突出显示这些标签(以及内部代码, 会自动识别语言)})
})//注意highlight默认给pre，code高亮效果，这里可以不写自定义一个代码高亮指令

在main.js中引入heightlight.js文件

// 导入高亮
// import '@/utils/highlight'
import 'highlight.js/styles/default.css'

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！