reactjs - Prismjs 没有突出显示 React 组件

Question

我正在尝试使用 PrismJS 突出显示一些 javascript 代码，但我输入的文本根本没有改变颜色。我已经尝试将 CDN 用于 prismjs 和 npm，但是当我使用 Prism.highlightAll() 时我没有看到任何变化。这是编辑器组件代码:

import React, {useEffect,useState} from 'react';
import Prism from 'prismjs';

import './editor.css';

const Editor = (props) => {
    const [content, setContent] = useState(props.content);

    useEffect(() => {
    console.log(content);
    Prism.highlightAll();
    }, [props.language, content]);

    return (
      <div className="code-edit-container">
        <textarea
          className="code-input"
          value={content}
          onChange={evt => setContent(evt.target.value)}
        />
        <pre className="code-output">
          <code className={'language-javascript'}>{content}</code>
        </pre>
      </div>
    );
  };

  export default function CodeEditor() {
    const [editorLanguage, setEditorLanguage] = useState("javascript");
    return (
      <div className="CodeEditor">
        <fieldset>
          <input
            type="radio"
            id="javascript"
            name="language"
            value="javascript"
            checked={editorLanguage === "javascript"}
            onChange={() => setEditorLanguage("javascript")}
          />
          <label htmlFor="javascript">JavaScript</label>
        </fieldset>

        <Editor language={editorLanguage} />
      </div>
    );
  }

Answer 1

我尝试了您的编辑器组件代码，它对我有用。我注意到的一件事是您没有使用 props.language 对象从 codeEditor 组件设置 prism 的语言。您的 className 表明您仅使用 javascript 作为 Prism 的语言，因此它只会解析和美化 javascript。所以将您的 className 更改为使用 className={props.language} 而不是 className={'language-javascript'}。