使用来自 CMS 的语法高亮呈现代码答案

【问题标题】：Rendering code with syntax highlighting from a CMS使用来自 CMS 的语法高亮呈现代码
【发布时间】：2018-10-30 19:48:17
【问题描述】：

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

有没有一种方法可以让我用文本和代码编写内容并正确突出显示代码？

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

【问题讨论】：

标签： reactjs strapi prismjs

【解决方案1】：

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

请务必将您的 CSS 设置为 index.html，我在项目中添加了以下内容：

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

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

【讨论】：