Prismjs 无法工作错误 Prism 未定义

Question

我正在尝试使用 prism 制作代码编辑器，我从这里的codesandbox复制了一个模板。错误是：

./node_modules/prismjs/components/prism-clike.js
E:/Trabajos/Personal projects/OpenAI/Code translator/code-tranlator/node_modules/prismjs/components/prism-clike.js:1
> 1 | Prism.languages.clike = {
  2 |   'comment': [
  3 |       {
  4 |           pattern: /(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,

对于我使用 React 的某些上下文，代码首先工作，然后停止工作，然后在我不做任何事情的情况下再次开始工作，这很奇怪，我尝试卸载依赖项并重新安装它们，但没有成功，我已经搜索了整个互联网，但没有太多关于这个主题的信息（如果有的话），所以我被困住了。

这是该组件的相关代码：

import React, { useState } from 'react'
import Editor from 'react-simple-code-editor'
import 'prismjs/components/prism-clike'
import 'prismjs/components/prism-javascript'
import 'prismjs/themes/prism.css'
import {useCodex} from '../Context/CodexContext'

export default function CodeEditor() {
    
    const { getCompletion } = useCodex();

    const code = `function add(a, b) {
        return a + b;
      }
      
      const a = 123;
      `

    const hightlightWithLineNumbers = (input) =>
        input
            .split('\n')
            .map(
                (line, i) =>
                    `<span class='editorLineNumber'>${i + 1}</span>${line}`
            )
            .join('\n')

    const [codeValue, setCodeValue] = useState(code)

    function handleSubmit(e) {
        e.preventDefault()
        getCompletion("translate this code from javascript to python " + codeValue);
        console.log("code value: ", codeValue);
    }

    return (
        <div className="container">
            <div className="row justify-content-center align-items-center">
                <Editor
                    value={codeValue}
                    onValueChange={(code) => setCodeValue(code)}
                    highlight={(code) => hightlightWithLineNumbers(code)}
                    padding={10}
                    textareaId="codeArea"
                    className="editor"
                    style={{
                        fontFamily: '"Fira code", "Fira Mono", monospace',
                        fontSize: 18,
                        outline: 0,
                    }}
                />
                <button className="btn btn-primary rounded w-25 my-5">asd</button>
            </div>
        </div>
    )
} 

注意1：我不知道这是否相关，但我正在使用随节点安装的引导程序。

Answer 1

我在使用 Prism 进行 React 项目之一时遇到了同样的问题。我通过安装prismjs库并导入来解决它，如下所示：

import Prism from "prismjs";

这应该可以解决你的问题！