代码高亮

引入了 Prism.js 来实现代码高亮。

Prism 只能对已经渲染出来的 DOM 做高亮处理，因此在 React 页面里，需要在 DOM 渲染出来之后，再执行 Prism.js 的代码。

把 Prism.js 的代码包在一个函数里，在指定的时机执行它。

// execPrism.js

export default function execPrism() {

  // ... Prism.js 的代码 ...

}

在页面 DOM 渲染完成后，再执行 Prism.js 的代码。对于函数组件可以使用 useEffect()，对于 class 组件可以使用 componentDidMount()。

// page.js 页面组件

import { useEffect } from 'react';
import execPrism from './execPrism';

export default function Page() {

  useEffect(() => {
    execPrism();
  }, []);

  return (
    // 文章内容，由 markdown 转为 HTML，其中包含了代码块
    <div dangerouslySetInnerHTML={{ __html: content }} />
  )

}