使用highlight 插件高亮 代码片段

1. 下包

npm i highlight.js

2.页面中引入

import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'

3. 使用原理

对 pre > code 的代码加样式

useEffect(() => {
  // 配置 highlight.js
  hljs.configure({
    // 忽略未经转义的 HTML 字符
    ignoreUnescapedHTML: true,
  })
  // 获取到内容中所有的code标签
  const codes = document.querySelectorAll('.dg-html pre code')
  codes.forEach((el) => {
    // 让code进行高亮
    hljs.highlightElement(el as HTMLElement)
  })
}, [detail])