ब्राउज़र

Question

में कोड दर्पण के मोड, थीम या एडन की आवश्यकता कैसे है क्या कोई ब्राउज़र ब्राउज़र के माध्यम से कोड दर्पण का उपयोग करने का प्रयास करता है?

मुझे कुछ भी दिखाई नहीं दे रहा है, भले ही यह पहले से ही सभी एचटीएमएल टैग उत्पन्न करता है।

कोड:

var CodeMirror = require('codemirror'); 
require('codemirror/mode/javascript/javascript.js'); 

    var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 
    lineNumbers: true, 
    extraKeys: { 
     "Ctrl-Space": "autocomplete" 
    }, 
    mode: { 
     name: "javascript", 
     globalVars: true 
    } 
    }); 

मैं आश्चर्य है कि कैसे मैं js मोड की आवश्यकता होती है चाहिए?

Answer 1

मैं वास्तव में आवश्यकता होती है) ऐसे ही html5complete mode demo के प्रदर्शन के सभी निर्भरता के लिए उपयोग कर (करके उस समस्या के साथ dealed:

@import (inline) "./../../node_modules/codemirror/lib/codemirror.css"; 
@import (inline) "./../../node_modules/codemirror/theme/monokai.css"; 
// @import (inline) "./../../node_modules/codemirror/addon/hint/show-hint.css"; 

:

// require('codemirror/addon/hint/show-hint'); 
// require('codemirror/addon/hint/xml-hint'); 
// require('codemirror/addon/hint/html-hint'); 

require('codemirror/mode/xml/xml'); 
require('codemirror/mode/javascript/javascript'); 
require('codemirror/mode/css/css'); 
require('codemirror/mode/htmlmixed/htmlmixed'); 

var CodeMirror = require('codemirror/lib/codemirror'); 

var editor = CodeMirror.fromTextArea(textareaElement, { 
    mode: 'text/html', 
    lineWrapping: true, 
    extraKeys: { 
    'Ctrl-Space': 'autocomplete' 
    }, 
    lineNumbers: true, 
    theme: 'monokai' 
}); 

मेरी .less फ़ाइलों में, मैं उस तरह सीएसएस आयातित

मैंने उस चाल की गुणवत्ता के बारे में वास्तव में परवाह नहीं की थी।

Answer 2

यहां मेरे लिए क्या काम कर रहा है। बजाय आवश्यकता के आयात, लेकिन एक ही सार का उपयोग करना:

import 'codemirror/theme/3024-night.css' 
 

 
const options = { 
 
     lineNumbers: true, 
 
     readOnly: false, 
 
     mode: 'htmlmixed', 
 
     theme:'3024-night' 
 
}; 
 

 
... 
 

 

 
<Codemirror ref="editor" value={this.props.value} onChange={this.props.updateCode} options={options}/>