前言

我们在做一些个人博客或者技术社区的网站时，通常会使用到富文本编辑，这里我推荐一款很好用的富文本编辑器，由国人编写，完全免费，并且加入了开源社区：“wangEditor”,支持JS、、JQuery、Vue、React等，具体信息可点击了解wangEditor官方文档，wangEditor提供了代码块高亮等功能，内部基于Prism.js使用，Prism.js对代码块提供了丰富的功能，如代码高亮、代码块暗黑显示等，具体内容可点击了解Prism.js官方文档，下面介绍Prism.js在React18项目中的使用

在React18中使用

步骤一：首先安装prismjs库

npm install prismjs
# 或者 
yarn add prismjs

注：Prism.js的作用范围

要注意Prism.js的作用范围是页面中

<pre><code class="language-css">这里是Prism.js生效的区域</code></pre>

code标签中的类名“language-...”，省略的内容为代码片段语言类型，如果你使用wangEditor做富文本编辑，wangEditor会为你自动添加好该类名，无需手动操作

下面是一个例子：

<pre><code class="language-css">p { color: red }</code></pre>

如果想要代码标出行号效果，则需要在pre标签或其父元素加上类名“line-numbers”， 下面是一个例子

<div className="line-numbers">
<pre><code class="language-css">p { color: red }</code></pre>
</div>

步骤二：按需创建一个Code组件

将prismjs以及所需的css、js文件导入进去 下面是Code组件的一个例子

import React, { useEffect } from "react";

//导入prismjs包
import Prism from "prismjs";

//导入tomorrow代码主题样式（按需引入）
import "prismjs/themes/prism-tomorrow.min.css";

//导入行号效果css、js文件（按需引入）
import "prismjs/plugins/line-numbers/prism-line-numbers.min.css";
import "prismjs/plugins/line-numbers/prism-line-numbers.min.js";

const Code = ({ code, language }) => {
    useEffect(() => {
        Prism.highlightAll();
    }, []);

    return (
        <div className="line-numbers">
            <h2> Code Syntax Block {language}</h2>
            <pre>
                <code className={`language-${language}`}>{code}</code>
            </pre>
        </div>
    );
};

export default Code;

下面是App组件

import React from "react";
import Code from "./components/Code";

//JS测试代码
const JSCode = `const App = props => {
  return (
    <div>
      <h1> Prism JS </h1>
      <div>Awesome Syntax Highlighter</div>
    </div>
  );
};
`;

//html测试代码
const htmlCode = `
    <div>
      <h1> PrismJS Tutorial </h1>
      <p>
      Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.
      </p>
    </div>
`;

function App() {
    return (
        <div className="App">
            <Code code={JSCode} language="javascript" />
            <Code code={htmlCode} language="html" />
        </div>
    );
}

export default App;

效果图：

以上配置基本上可满足需求，如果有更高的需求，请参照Prism.js官方文档进行文件引入

注：动态获取数据配置方法

应设置Prism.highlightAll();为异步操作，在页面完成渲染之后，调用Prism.highlightAll();

下面是一个例子：

useEffect(() => {
        async function getItemArticle() {
            const resultPromise = await axios({
            
            //数据动态获取
                url: `http://127.0.0.1:3007/api/blog/${id}`,
                method: "get",
            });
            setItemArticle(resultPromise.data[0]);
            console.log("执行1");
            await setTimeout(() => {
            
            //获取到数据之后，进行页面渲染，渲染完成之后执行该异步操作
                Prism.highlightAll();
                console.log("执行2");
            }, 0);
        }
        getItemArticle();
    }, []);