在react中使用CodeMirror没有语法突出显示

时间:2016-12-01 02:38:04

标签: javascript css node.js codemirror

我的npm版本:4.0.2,使用webpack,我安装了react-codemirror 和我的项目中的codemirror一样。

在我的JS中:

import CodeMirror from 'react-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript'

var options = {
    lineNumbers: true,
    readOnly: false,
    mode: "javascript"
};


<CodeMirror ref="editor" 
        value={this.state.code} 
        onChange={this.updateCode}
        options={options} 
        interact={this.interact}/>

这是生成结果: enter image description here

<div class="ReactCodeMirror"><textarea autocomplete="off" style="display: none;">console.log("helloWorld"); //Comments</textarea>
    <div class="CodeMirror cm-s-default">
        <div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 4px; left: 314.844px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
                tabindex="0"></textarea></div>
        <div class="CodeMirror-vscrollbar" cm-not-content="true">
            <div style="min-width: 1px; height: 0px;"></div>
        </div>
        <div class="CodeMirror-hscrollbar" cm-not-content="true">
            <div style="height: 100%; min-height: 1px; width: 0px;"></div>
        </div>
        <div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
        <div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
        <div class="CodeMirror-scroll" tabindex="-1">
            <div class="CodeMirror-sizer" style="margin-left: 0px; min-width: 3px; margin-bottom: -15px; border-right-width: 15px; min-height: 28px; padding-right: 0px; padding-bottom: 0px;">
                <div style="position: relative; top: 0px;">
                    <div class="CodeMirror-lines">
                        <div style="position: relative; outline: none;">
                            <div class="CodeMirror-measure"></div>
                            <div class="CodeMirror-measure">
                                <pre class="CodeMirror-line"><span style="padding-right: 0.1px;">console.log("helloWorld"); //Comments</span></pre>
                            </div>
                            <div style="position: relative; z-index: 1;"></div>
                            <div class="CodeMirror-cursors" style="">
                                <div class="CodeMirror-cursor" style="left: 314.844px; top: 0px; height: 20px;">&nbsp;</div>
                            </div>
                            <div class="CodeMirror-code">
                                <div style="position: relative;">
                                    <div class="CodeMirror-gutter-wrapper" style="left: 0px;">
                                        <div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 1px;">1</div>
                                    </div>
                                    <pre class=" CodeMirror-line "><span style="padding-right: 0.1px;">console.log("helloWorld"); //Comments</span></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="position: absolute; height: 15px; width: 1px; border-bottom: 0px solid transparent; top: 28px;"></div>
            <div class="CodeMirror-gutters" style="height: 43px;">
                <div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 1px;"></div>
            </div>
        </div>
    </div>
</div>

该方法似乎成功生成,当我观察CSS时,CSS正确加载:

enter image description here

我有什么遗漏的吗?请指教。

0 个答案:

没有答案