通过CMS突出显示语法的代码

Question

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

在我的render（）中：

<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的WYSIWYG中，我有以下<pre><code class="language-css">p { color: red }</code></pre>

是否可以使用文本和代码编写内容并正确突出显示代码？

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

Answer 1

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

请确保在index.html中设置CSS，并在项目中添加了以下内容：

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

完美运行！希望这对某人有帮助。