Блог

Я пытаюсь использовать 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: /(^|[^\])/*[sS]*?(?:*/|$)/,
 

Для некоторого контекста, в котором я использую реакцию, сначала код работал, затем он перестал работать, а затем снова начал работать без меня, что странно, я попытался удалить зависимости и переустановить их безрезультатно, я обыскал весь Интернет, но информации по этому вопросу не так много (если таковая имеется), поэтому я застрял.

Это соответствующий код из компонента:

 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: Я не знаю, уместно ли это, но я использую загрузочную версию, установленную с node.