0

我看到了很多例子，它适用于所有人，但我不知道为什么它没有突出显示我的代码。我尝试了许多解决方案，但没有一个对我有用。

此外，当用户单击代码的演示时，我需要在其中注入我自己的自定义 HTML 文件作为初始文件，并且用户可以更改文件并运行用户想要的自己的自定义代码。

这是输出的屏幕截图：

在此处输入图像描述

我用于编辑器的代码

import React from 'react';
import {Controlled as ControlledEditor} from 'react-codemirror2';
import {language} from "@hapi/accept";
import {codecs} from "next/dist/next-server/server/lib/squoosh/codecs";

if (typeof navigator !== 'undefined') {
    require('codemirror/mode/xml/xml');
    require('codemirror/mode/css/css');
    require('codemirror/mode/javascript/javascript');
    require('codemirror/mode/markdown/markdown');
}
    
const Editor = (props) => {
    const {
        displayName,
        value,
        onChange
    } = props
    
    const handleChange = (editor,date,value) => {
        onChange(value);
    }
    
    return (
        <div className="editor-container">
            <div className="editor_title">
                {displayName}
                <button>O/C</button>
            </div>
            <ControlledEditor
                onBeforeChange={handleChange}
                value={value}
                className={'code-mirror-wrapper'}
                options={{
                    lineWrapping:true,
                    lint:true,
                    mode:language,
                    theme:'dracula',
                    lineNumbers:true
                }}
            />
        </div>
    )
}
    
export  default  Editor;

那是我调用我的编辑器的新文件：

import React,{useState,useEffect} from 'react';
import Editor from '../../component/Editor/editor';
    
const RunCode = () => {
    const [html,setHtml] = useState();
    const [css,setCss] = useState();
    const [JS,setJS] = useState();
    const [scrDoc,setSrcDoc] = useState('');
    
    useEffect(()=>{
        const timeout = setTimeout(()=>{
            setSrcDoc(
                `<html>
                   <body>${html}</body>
                   <style>${css}</style>
                   <script>${JS}</script>
                </html>`
            )
        },250)
    
        return () => clearTimeout(timeout)
    },[html,JS,css]);
    
    return(
        <>
             <div className={'pane top-pane'}>
                 <Editor
                     language={'xml'}
                     displayName={'HTML'}
                     value={html}
                     onChange={setHtml}
                 />
                 <Editor
                     language={'CSS'}
                     displayName={'CSS'}
                     value={css}
                     onChange={setCss}
                 />
                 <Editor
                     language={'JS'}
                     displayName={'JS'}
                     value={JS}
                     onChange={setJS}
                 />
             </div>
             <div className="output">
                  <iframe
                      srcDoc={scrDoc}
                      title={'Output'}
                      sandbox={'allow-scripts'}
                      height={'100%'}
                      width={'100%'}
                  >
                  </iframe>
             </div>
         </>
    )
}
    
export  default  RunCode;
4

1 回答 1

2

简短的回答是：您可能没有导入.css文件以使用“德古拉”主题。node_modules确保从使用 ControlledEditor 的组件中导入这两个文件，以便为编辑器提供主题。

  • 导入“codemirror/lib/codemirror.css”；
  • 导入“codemirror/theme/dracula.css”；

PS：我个人最喜欢的主题是：ayu-dark ;)

我也做过类似的事情。这是一个Github Repo供您参考。:)

FunFact：@juliomalves 帮助我在 vercel 上部署了这个项目。

于 2021-06-27T18:41:16.447 回答