文章列表 代码高亮通用解决方案

有些文章内容一般会有代码 那么我们需要对这些代码进行高亮解决

这里提供一个通用解决方案

操作步骤

第一步

npm i highlight.js

第二步 在页面中引入 highlight.js

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

原理

对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)
  })
}, [])