javascript - 如何在react中加载自定义prismjs语法文件？

Question

问题描述:如何在 React 项目中使用 prismjs 突出显示自定义语法？

我按照guide创建了一个扩展语法文件(我们称之为newlang)。 。

我知道在 prismjs 中有三种方法可以突出显示代码:

• highlightElement()
• highlightAll()
• 突出显示()

首先，我尝试在我的应用程序中要求自定义语法文件。

导入 '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}
      </code>
    </pre>
  );
}

• 方法 2:highlightAll():❌无法突出显示我的代码
• 方法 3:highlight():✅可以突出显示我的代码

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}
      </code>
    </pre>
  );
}

我想知道方法1和2有什么问题。(会是自定义语法文件加载顺序的问题吗？)

Answer 1

对于那些将来遇到这个问题的人，我能够让第一种方法发挥作用。就我而言，我在handleChange 中调用了Prism.highlight，它在使用internalText 更新DOM 之前就调用了该函数。我现在使用 useEffect 钩子(Hook)，它在 DOM 渲染后调用，技巧是您需要将 internalText 声明为订阅参数。

我已附加我的 Typescript 组件。

希望这有帮助。

import React, { useState, ChangeEvent, useRef, useEffect } from 'react'
import './prism.css'
import Prism from "prismjs";

export function CodeBlockTile() {
  const language = "javascript"

  const codeElement = useRef<HTMLElement | null>(null);
  const [internalText, setInternalText] = useState<string>("")

  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
    setInternalText(event.target.value);
  };

  useEffect(() => {
    if (codeElement.current) {
      Prism.highlightElement(codeElement.current)
    }
  }, [internalText])


  return (
    <div>
      <textarea onChange={handleChange} value={internalText}>

      </textarea>
      <pre>
        <code ref={codeElement} className={`language-${language}`}>
          {internalText}
        </code>
      </pre>
    </div>
  )
}