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

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

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

<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>

{this.state.text}

除了我试图用JavaScript语法突出显示的代码块之外，这一切都很好。我的代码元素如下所示

“从“React”导入React；
导入“/style.css”；
导出默认类Blog扩展React.Component{
render（）{
返回反应路由器正在工作！；
}
}"    

我使用PrismJS进行语法高亮显示，它遵循与我在这里使用的相同的类命名格式，但是由于标记到jsx转换器，整个代码块都在一个字符串中。我相信如果不是字符串，代码会正确突出显示，但我不知道如何绕过它。我尝试过多个标记转换器，它们都在HTML元素中使用字符串，但我还没有找到另一个语法高亮器来解决这个问题。我是否应该尝试以不同的方式存储我的博客帖子？还有别的办法吗？如有任何建议，将不胜感激