我正在尝试使用 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>
);
}