next.js框架下实现正文中代码高亮
reactnextjshighlight代码高亮
以前用WordPress之类的框架时，很多主题都内置了代码高亮，也就几乎没怎么研究过这事儿，后来用markdown语法的话也都基本支持了自动解析和样式。
现在自己搓的这个cms后台是ckEditor，内置了代码输入，nextjs写的页面就需要自己适配代码高亮的问题。
这部分基本上是AI完成的，直接贴代码。
首先，要安装两个npm包，分别是html-react-parser和highlight.js（注意这个包的名字就有.js，安装的时候别丢了）
然后，在需要解析html的页面上使用这段代码解析html中被pre和code标签包裹的内容。其中pre标签的class要符合【language-语言名称】的规则，否则你需要自己改一下。
javascript
import HTMLReactParser from 'html-react-parser';
import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.min.css'; // 选择你喜欢的样式
const highlightCode = (html) => {
return HTMLReactParser(html, {
replace: (domNode) => {
if (domNode.name === 'pre' && domNode.children[0]?.name === 'code') {
const codeContent = domNode.children[0].children[0].data;
const language = domNode.attribs.class?.replace('language-', '') || 'plaintext';
const highlightedCode = hljs.highlight(codeContent, { language, ignoreIllegals: false }).value;
return (
<div className='bg-base-100 p-3 pr-0 text-base-content overflow-scroll rounded-lg text-sm'>
<div className='flex justify-between'>
<span></span>
<span className='text-base-content/30'>{language}</span>
</div>
<div className='border-b-2 border-base-content/20 my-2'></div>
<pre>
<code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
</pre>
</div>
);
}
},
});
};javascript
//正文部分
{highlightCode(article.content)}
最后效果直接看本文即可。
