Как загрузить пользовательский файл синтаксиса prismjs в реагировать?

Как загрузить пользовательский файл синтаксиса prismjs в реагировать?

Вопрос Desp : Как я мог бы выделить собственный синтаксис с prismjs в реактивном проекте?

Я создал расширенный файл синтаксиса (назовем его newlang ), следуя руководству .

И я знаю, что в prismjs есть три способа выделить код:

  • highlightElement()
  • highlightAll()
  • highlight()

Сначала я попытался запросить свой файл синтаксиса в своем приложении.

import 'utils/highlight/prism-newlang';

Затем в моем компоненте выделения,

  • Метод 1: highlightElement() : ❌ НЕ МОЖЕТ подсвечивать мой код
 import Prism from 'prismjs'; function CodeHighlight({ value, language }) { const codeEle = useRef(null); useEffect(() ={amp}gt; { Prism.highlightElement(codeEle.current, false); }, []); return ( {amp}lt;pre className={`language-${language}`}{amp}gt; {amp}lt;code ref={codeEle} className={`language-${language}`}{amp}gt; {value} {amp}lt;/code{amp}gt; {amp}lt;/pre{amp}gt; ); } 
  • Способ 2: highlightAll() : ❌ НЕ МОЖЕТ подсвечивать мой код
  • Метод 3: highlight() : ✅ МОЖЕТ подсвечивать мой код
 import { highlight, languages } from 'prismjs/components/prism-core'; function CodeHighlight({ value, language }) { const codeNode = useRef(null); useEffect(() ={amp}gt; { const code = codeNode.current.textContent; const highlightHTML = highlightCode(code, language); codeNode.current.innerHTML = highlightHTML; }); return ( {amp}lt;pre className={`language-${language}`}{amp}gt; {amp}lt;code ref={codeNode} className={`language-${language}`}{amp}gt; {value} {amp}lt;/code{amp}gt; {amp}lt;/pre{amp}gt; ); } 

Интересно, в чем проблема методов 1 и 2. (Будет ли вопрос порядка загрузки файла пользовательского синтаксиса?)

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector