语法荧光笔无法使用带 Next.js 的 codemirror 2

Question

我看到很多例子，它对所有人都很好，但我不知道为什么它不突出我的代码。我尝试了很多解决方案 none，其中对我有用。

此外，我需要在其中注入我自己的自定义 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;

Answer 1

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

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

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

我也做过类似的东西。这里有一个Github Repo供大家参考。 :)

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

语法荧光笔无法使用带 Next.js 的 codemirror 2

Syntax highlighter not working using codemirror 2 with Next.js

javascript

codemirror

reactjs

next.js

react-codemirror2