React组件的Prismjs未突出显示

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

我试过你的Editor组件代码，它对我很有效。我注意到的一件事是，您没有使用props.language对象从codeEditor组件设置棱镜的语言。你的className表明你只是使用javascript作为棱镜的语言，所以它只会解析和美化javascript。因此，将您的className更改为使用className={'language-javascript'}的className={props.language}接口。