0

我使用react-markdown库并prismjs在我的项目中突出显示代码。但是在我改变路线后突出显示并不总是有效。

例如，

  • 我有markdown代码TestPage，浏览器中的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，Switch在 App/index.js 中有一个
<Switch>
  <Route exact path="/" component={HomePage} />
  <Route path="/test" component={TestPage} />
</Switch>
4

1 回答 1

3

我和你有同样的问题。我发现这是关于加载到 highlight.js 的时间。我使用下面的代码来解决这个问题。

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

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

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

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

于 2019-11-19T18:36:21.323 回答