如何突出字符串中的javascript语法？

Question

我有一个独特的问题。我目前正在使用markdown语法存储博客帖子，并使用markdown-to-jsx包在React中动态呈现它们。因此，我将整个博客文章作为一个巨大的字符串，并将其呈现在像这样的组件中

<Markdown>{ this.state.text }</Markdown>

除了我试图用JavaScript语法突出显示的代码块之外，这个工作正常。我的代码元素如下所示

<pre>
  <code class="language-javascript">
    "import React from 'react';
     import './style.css';

     export default class Blog extends React.Component {
       render() {
         return <h1>React Router is working!</h1>;
       }
     }"    
  </code>
</pre>

我使用PrismJS进行语法高亮显示，它遵循我在这里使用的相同类命名格式，但由于markdown-to-jsx转换器，整个代码块都在字符串内。我相信如果代码不是正确的话，代码会被正确突出显示，但我不知道如何绕过它。我尝试了多个降价转换器，它们都在HTML元素中使用字符串，而且我还没有能够找到另一种可以解决问题的语法荧光笔。我应该尝试以不同的方式存储我的博客帖子吗？还有另一种方法吗？任何建议将不胜感激。