在react中让代码块高亮

文章内容代码块高亮

目标：能够实现文章内容代码高亮功能

分析说明：

highlight.js npm

步骤：

1. 安装 highlight.js：yarn add highlight.js
2. 在 useEffect 中获取到包含 代码 的标签（可能是 code 标签，也可能是 pre 标签）
3. 遍历这些 DOM，分别为每个 DOM 元素，应用 highlightElement 即可

核心代码：

import hljs from 'highlight.js'
import 'highlight.js/styles/github-dark.css'

// 文章详情 代码内容 高亮
useEffect(() => {
//获取渲染html的dom
  const dgHtmlDOM = document.querySelector('.dg-html')
  const codes = dgHtmlDOM?.querySelectorAll<HTMLElement>('pre code')
  // console.log(codes)
  if (codes && codes.length > 0) {
    codes.forEach(el => {
      // 让每个 code 内容实现代码高亮
      highlight.highlightElement(el)
    })
    return
  }

  highlight.configure({
    // 忽略警告
    ignoreUnescapedHTML: true
  })

  // 直接找到所有的 pre 标签
  const pres = dgHtmlDOM?.querySelectorAll('pre')
  if (pres && pres.length > 0) {
    pres.forEach(el => {
      highlight.highlightElement(el)
    })
  }
}, [detail])