reactjs - 使用来自 CMS 的语法高亮呈现代码

Question

我在前端使用无头 CMS（Strapi）和 React。我想使用 PrismJS（或任何东西）突出显示代码块。

在我的渲染（）中：

<div>
 <pre>
  <code className="language-css">{`p { color: red }`}</code>
 </pre>
 <h2>{this.state.title}</h2>
 <div dangerouslySetInnerHTML={{ __html: `${content}` }} />
</div>

用标签包裹的<pre>代码是我正在尝试做的一个例子。

问题是，由于我使用的是 Strapi CMS，PrismJS 无法识别代码块。这是它的渲染方式：

顶部是直接写在我的组件中的代码，而底部是从 CMS 返回的。在 CMS 的所见即所得中，我有以下内容<pre><code class="language-css">p { color: red }</code></pre>

有没有办法可以用文本和代码编写内容并正确突出显示代码？

这似乎是一个类似的问题：React : Rendering a syntax highlighting code block

Answer 1

这解决了我的问题：https ://github.com/akiran/react-highlight

一定要设置你的 CSS，index.html我在我的项目中添加了以下内容：

<Highlight language="javascript" innerHTML={true}>
 {content}
</Highlight>

完美运行！希望这可以帮助某人。