エースエディタ私はシンタックスハイライトの作業を取得しようとしています

Question

動作していないモードが、モードを変更するとき、それは動作しません

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/monokai.js"></script> 
    <script="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/mode-javascript.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script> 
    <script src="scripts.js"></script> 

scripts.jsは

var html = ace.edit("htmlEditor"); 
var css = ace.edit("cssEditor"); 
var js = ace.edit("jsEditor"); 

html.setTheme("ace/theme/monokai"); 
css.setTheme("ace/theme/monokai"); 
js.setTheme("ace/theme/monokai"); 

var JavaScriptMode = ace.require("ace/mode/javascript").Mode; 
js.session.setMode(new JavaScriptMode()); 

Answer 1

あなたのhtmlのタイプミスを持っています<script="また、テーマとモードのスクリプトはace.jsの後に挿入する必要があります

エースに名前を渡してモードとテーマを単独で読み込む方が良い

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script> 
 
<div id="htmlEditor">&lt;html&gt;</div> 
 
<div id="cssEditor">.css { color: red }</div> 
 
<div id="jsEditor">var js</div> 
 
<style> 
 
html, body { 
 
    height: 100%; 
 
} 
 
#htmlEditor, #cssEditor, #jsEditor { 
 
height:30% 
 
} 
 
</style> 
 
<script> 
 

 
var html = ace.edit("htmlEditor"); 
 
var css = ace.edit("cssEditor"); 
 
var js = ace.edit("jsEditor"); 
 

 
html.setTheme("ace/theme/monokai"); 
 
css.setTheme("ace/theme/monokai"); 
 
js.setTheme("ace/theme/monokai"); 
 

 
html.session.setMode("ace/mode/html"); 
 
css.session.setMode("ace/mode/css"); 
 
js.session.setMode("ace/mode/javascript"); 
 

 
</script>