zoukankan      html  css  js  c++  java
  • Ace 在HTML中使用方法

    <!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>
  • 相关阅读:
    分形之城
    【SDOI2011 第2轮 DAY1】消防 树上问题+二分+贪心
    【Usaco Nov08 Gold】玩具 三分+贪心
    分治 复习
    快读板子
    最小线段覆盖 C神奇项链
    比赛经验积累1
    字符串 专题
    界面小项目之W3C
    前端小基础
  • 原文地址:https://www.cnblogs.com/chiangyibo/p/7448136.html
Copyright © 2011-2022 走看看