Rendering code with syntax highlighting from a CMS

Question

I am using a headless CMS(Strapi) and React on the frontend. I would like to render code blocks with highlighting using PrismJS (or anything).

In my render():

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

The code wrapped with <pre> tags serves as an example of what I'm trying to do.

The problem is that since I'm using the Strapi CMS, the code block not recognized by PrismJS. Here's how it's rendered:

The top part is the code directly written in my component while the bottom is returned from the CMS. In the WYSIWYG of the CMS I have the following <pre><code class="language-css">p { color: red }</code></pre>

Is there a way that I can write content with text and code and have the code highlighted properly?

This seems like a similar issue: React : Rendering a syntax highlighted code block

Answer 1

This solved my problem: https://github.com/akiran/react-highlight

Be sure to set your CSS in index.html and I added the following in my project:

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

Works perfectly! Hope this helps someone.