如何在反应中加载自定义prismjs语法文件？

Question

问题设计：如何在 react 项目中使用 prismjs 突出显示自定义语法？

我按照guide 创建了一个扩展语法文件（我们称之为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}
      </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，它在 DOM 甚至用internalText 更新之前调用了该函数。我现在使用在渲染 DOM 后调用的 useEffect 钩子，诀窍是您需要将 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>
  )
}