npm i highlight.js

import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'
?
用highlight.js
? useEffect(() => {
? ? // 配置 highlight.js
? ? hljs.configure({
? ? ? // 忽略未經(jīng)轉(zhuǎn)義的 HTML 字符
? ? ? ignoreUnescapedHTML: true
? ? })
? ? // 獲取到內(nèi)容中所有的code標簽
? ? const codes = document.querySelectorAll('pre code')
? ? codes.forEach((el) => {
? ? ? // 讓code進行高亮
? ? ? hljs.highlightElement(el as HTMLElement)
? ? })
? }, [])

import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'
import { useEffect } from 'react'
export default function Question () {
? useEffect(() => {
? ? // 配置 highlight.js
? ? hljs.configure({
? ? ? // 忽略未經(jīng)轉(zhuǎn)義的 HTML 字符
? ? ? ignoreUnescapedHTML: true
? ? })
? ? // 獲取到內(nèi)容中所有的code標簽
? ? const codes = document.querySelectorAll('.dg-html pre code')
? ? codes.forEach((el) => {
? ? ? // 讓code進行高亮
? ? ? hljs.highlightElement(el as HTMLElement)
? ? })
? }, [])
? const content = `
?? ?<pre>
?? ? ?<code>console.log(abc)</code>
?? ? ?<code>console.log(abc)</code>
?? ?</pre>
?? ?<h3>nihoa</h3>
?? ?<pre>
?? ? ?<code>console.log(abc);xxx.forEach(item=>{console.log(1)})</code>
?? ?</pre>
?? ?`

? return (
? ? <div className="dg-html">
? ? ? Question
? ? ? <div dangerouslySetInnerHTML={{ __html: content }} />
? ? </div>
? )
}