<!DOCTYPE html> <html> <head> <title>Demo of ACE Editor</title> <!--導入js庫--> <script src="./ace.js"></script> <script src="./ext-language_tools.js"></script> </head> <body> <!--代碼輸入框（注意請務必設置高度，否則無法顯示）--> <pre id="code" class="ace_editor" style="min-height:400px"> <textarea class="ace_text-input"> #include int main(){ int n,m; scanf("%d %d",&n,&m); printf("%d",n+m); return 0; } </textarea> </pre> <script> //初始化對象 var editor = ace.edit("code"); //設置風格和語言（更多風格和語言，請到github上相應目錄查看） var theme = "clouds" var language = "javascript" editor.setTheme("ace/theme/" + theme); editor.session.setMode("ace/mode/" + language); //字體大小 editor.setFontSize(18); //設置只讀（true時只讀，用於展示代碼） editor.setReadOnly(false); //自動換行,設置為off關閉 editor.setOption("wrap", "free") //啟用提示菜單 ace.require("ace/ext/language_tools"); editor.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true }); </script> </body> </html>