Ace Editor-Modus nicht funktioniert

Question

Ich versuche, Syntax-Hervorhebung zum Laufen zu bringen, aber wenn Sie den Modus zu ändern es nicht

<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

Sie haben einen Tippfehler in Ihrem HTML funktioniert <script=" auch Skripte für Thema und Modi müssen nach ace.js

eingefügt werden Es ist besser, Namen an Ass übergeben und laden Sie Modi und Themen selbst

<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>