我使用 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(
<Markdown source="# Your markdown here" />,
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>
最佳答案
我也遇到了和你一样的问题。我发现这与加载到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 的每个页面。但它有效。我希望这会对您有所帮助。
关于javascript - 更改路线后 React Markdown 代码突出显示不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58444056/