javascript — Реактивная подсветка кода уценки не работает после изменения маршрута

Реакция подсветки кода уценки не работает после изменения маршрута

Я использую библиотеку prismjs на prismjs и prismjs для подсветки кода в моем проекте. Но подсветка не всегда работает после изменения маршрута.

Например,

  • У меня есть код уценки в TestPage , и URL-адрес в браузере является localhost:3000/test .
 const markdown = `## How about some code? ```js var React = require('react'); var Markdown = require('react-markdown'); React.render( {amp}lt;Markdown source="# Your markdown here" /{amp}gt;, document.getElementById('content') ); ````; 
  • Если я запускаю проект, страница рендеринга по умолчанию — localhost:3000 , когда я перехожу на маршрут localhost:3000/test , синтаксис уценки работает, но подсветка кода не работает. Визуализированный HTML-код показан ниже:
 {amp}lt;h2{amp}gt;How about some code?{amp}lt;/h2{amp}gt; {amp}lt;pre{amp}gt; {amp}lt;code class="language-js"{amp}gt; var React = require('react'); var Markdown = require('react-markdown'); React.render( {amp}amp;lt;Markdown source="# Your markdown here" /{amp}amp;gt;, document.getElementById('content') ); {amp}lt;/code{amp}gt; {amp}lt;/pre{amp}gt; 
  • Если я обновлю страницу с помощью localhost:3000/test , то подсветка будет работать. Визуализированный HTML-код показан ниже:
 {amp}lt;pre class=" language-js"{amp}gt; {amp}lt;code class=" language-js"{amp}gt; {amp}lt;span class="token keyword"{amp}gt;var{amp}lt;/span{amp}gt; React {amp}lt;span class="token operator"{amp}gt;={amp}lt;/span{amp}gt; {amp}lt;span class="token function"{amp}gt;require{amp}lt;/span{amp}gt; {amp}lt;!-- For simplify, I omit the left code --{amp}gt; {amp}lt;/code{amp}gt; {amp}lt;/pre{amp}gt; 
  • Но если я testpage на другую страницу и вернусь на testpage , подсветка кода не будет работать снова.

Почему это происходит? Я хочу знать, в чем проблема моей логики кода.

Код ниже, как я использую react-markdown :

 {amp}lt;ReactMarkdown source={markdown} renderers={{ CodeBlock }} /{amp}gt; 

кодоблок:

 export default function CodeBlock({ language, value }) { const codeEle = useRef(null); useEffect(() ={amp}gt; { console.log('CodeBlock: useEffect'); Prism.highlightElement(codeEle, false); }, [codeEle]); return ( {amp}lt;pre{amp}gt; {amp}lt;code ref={codeEle} className={`language-${language}`}{amp}gt; {value} {amp}lt;/code{amp}gt; {amp}lt;/pre{amp}gt; ); } 

PS

  • Я использую react-router-dom , есть Switch в App / index.js
 {amp}lt;Switch{amp}gt; {amp}lt;Route exact path="/" component={HomePage} /{amp}gt; {amp}lt;Route path="/test" component={TestPage} /{amp}gt; {amp}lt;/Switch{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector