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

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

0 голосов
/ 18 октября 2019

Вопрос 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(() => {
    Prism.highlightElement(codeEle.current, false);
  }, []);

  return (
    <pre className={`language-${language}`}>
      <code ref={codeEle} className={`language-${language}`}>
        {value}
);}
  • Метод 2: highlightAll(): ❌ НЕВОЗМОЖНО получить код, выделив
  • Метод 3: highlight(): ✅ CAN получить выделение моего кода 
import { highlight, languages } from 'prismjs/components/prism-core';

function CodeHighlight({ value, language }) {
  const codeNode = useRef(null);

  useEffect(() => {
    const code = codeNode.current.textContent;
    const highlightHTML = highlightCode(code, language);
    codeNode.current.innerHTML = highlightHTML;
  });

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

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

...