我正在尝试使用 prism 制作代码编辑器,我从这里的代码框复制了一个模板。错误是:
./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:我不知道这是否相关,但我使用的是安装了节点的引导程序。