Highlight style -- package tool highlight

Realize the effect display: 

 analyze:

1. If you want to highlight the code, when you must publish the article in the background , you must wrap the code segment with the pre+code tag

 

2. The front end can give corresponding styles by obtaining these tag names/designated class names

step

Code snippet for beautifying the details page based on highlight.js

English documentation (more complete):  https://highlightjs.readthedocs.io/en/latest/index.html

Chinese document:  https://fenxianglu.cn/highlight.html

npm installation package

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

npm i highlight.js -D

Create a highlight.js file under the utils file

// 代码高亮的样
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高亮效果，这里可以不写自定义一个代码高亮指令

Introduce the heightlight.js file in main.js

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