javascript - 更改路线后 React Markdown 代码突出显示不起作用

Question

我使用 react-markdown 库和 prismjs 来突出显示项目中的代码。但在我更改路线后，突出显示并不总是起作用。

例如，

• 我在TestPage中有markdown代码，浏览器中的url路径是localhost:3000/test。

const markdown = `## How about some code?
\`\`\`js
var React = require('react');
var Markdown = require('react-markdown');
React.render(
  <Markdown source="# Your markdown here" />,
  document.getElementById('content')
);
\`\`\``;

• 如果我启动项目，默认渲染页面是localhost:3000，当我跳转到路由localhost:3000/test时，markdown语法可以工作，但是代码高亮不起作用。渲染后的html代码如下:

<h2>How about some code?</h2>
<pre>
  <code class="language-js">
    var React = require('react');
    var Markdown = require('react-markdown');
    React.render(
      &lt;Markdown source="# Your markdown here" /&gt;,
      document.getElementById('content')
    );
  </code>
</pre>

• 如果我使用 url localhost:3000/test 刷新页面，则突出显示有效。渲染后的html代码如下:

<pre class="  language-js">
  <code class="  language-js">
  <span class="token keyword">var</span> React 
  <span class="token operator">=</span> 
  <span class="token function">require</span>
  <!-- For simplify, I omit the left code -->
  </code>
</pre>

• 但是，如果我路由到其他页面并返回 testpage，代码突出显示将不再起作用。

为什么会发生这种情况？我想知道我的代码逻辑有什么问题。

下面的代码是我如何使用react-markdown:

<ReactMarkdown source={markdown} renderers={{ CodeBlock }} />

代码块:

export default function CodeBlock({ language, value }) {
  const codeEle = useRef(null);

  useEffect(() => {
    console.log('CodeBlock: useEffect');
    Prism.highlightElement(codeEle, false);
  }, [codeEle]);

  return (
    <pre>
      <code ref={codeEle} className={`language-${language}`}>
        {value}
      </code>
    </pre>
  );
}

附注

• 我使用react-router-dom，在App/index.js中有一个Switch

<Switch>
  <Route exact path="/" component={HomePage} />
  <Route path="/test" component={TestPage} />
</Switch>

Answer 1

我也遇到了和你一样的问题。我发现这与加载到highlight.js 的时间有关。我使用下面的代码来解决这个问题。

useEffect(()=>{
    hljs.initHighlighting.called = false;
    hljs.initHighlighting();
},[]);

您可能还需要包含highligh.js 和highligh.js 中的样式。

import hljs from 'highlight.js'
import "highlight.js/styles/github.css";

我不确定这是否是解决问题的正确方法。这似乎有点多余，因为您需要将这段代码添加到要呈现 markdown 的每个页面。但它有效。我希望这会对您有所帮助。