CodeMirrorをSkulpt Textareaに追加

Question

私はオンラインのpythonエディタを作っています。私はSkulptを使用して、ユーザーがテキサーに入力したコードを実行しています。ここに私のコードは次のとおりです。

HTML：

<script src="skulpt.min.js" type="text/javascript"></script> 
<script src="skulpt-stdlib.js" type="text/javascript"></script> 
<textarea id="textbox" cols="50" rows="10"></textarea> 
<br /> 
<button type="button" onclick="runit()">Run</button> 
<pre id="dynamicframe"></pre> 
<div id="canvas"></div> 

Javascriptを：

function builtinRead(x) { 
    if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined) 
     throw "File not found: '" + x + "'"; 
    return Sk.builtinFiles["files"][x]; 
} 

function runit() { 
    var prog = document.getElementById("textbox").value; 
    var mypre = document.getElementById("dynamicframe"); 
    mypre.innerHTML = ''; 
    Sk.pre = "output"; 
    Sk.configure({ 
     output: outf, 
     read: builtinRead 
    }); 
    (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'canvas'; 
    var myPromise = Sk.misceval.asyncToPromise(function() { 
     return Sk.importMainWithBody("<stdin>", false, prog, true); 
    }); 
    myPromise.then(function(mod) { 
      console.log('success'); 
     }, 
     function(err) { 
      console.log(err.toString()); 
     }); 
} 

私はCodeMirrorに新しいです、と私はコードカラーリングを追加するために彼らのPythonのバージョンを使用したいです、行番号、テキストのインデントなどがありますが、これらの機能を追加するためにコードを変更する方法についてはちょっと混乱しています。テキストエリアへ。

CodeMirrorを既存のテキストエリアと一緒に使用するにはどうすればよいですか？私がしなければならなかったすべてのthats

var editor = CodeMirror.fromTextArea(document.getElementByid('textbox'), { 
         mode: 'none', 
         matchBrackets: true, 
         dragDrop: false, 
         styleSelectedText: false, 
         showCursorWhenSelecting: true, 
         lineWrapping: true 
        }); 
var textAreaContents = editor.getDoc().getValue(); 

：

Answer 1

これは私が私のテキストエリアに一致する括弧を強調表示するcodemirrorが追加されている方法です。設定を微調整して調整することができます。 modeを設定すると、特定のプログラミング言語でテキストを強調表示し、スマートインデントすることもできます。ここで

はlineNumbersとインデント付きのpythonモードでcodemirrorセットアップを示しフィドルです：Python用https://jsfiddle.net/gw0shwok/2/

設定オプションがhere

追加機能がいくつかaddons