Ace编辑器/嵌入多个语法高亮

Question

我使用带有“html”模式的 ace 编辑器作为 Web IDE 进行 Web 编程。我可以突出显示 HTMl、CSS 和 JavaScript 的代码。效果很好。这是我的代码：

    editor.getSession().setMode('ace/mode/html');

我想在使用时嵌入咖啡脚本和打字稿语法突出显示

    <script type='text/coffeescript'>

和

    <script type='text/typescript'>

页面上的标签。 Ace 确实有这些语言的模式，但它们是单独的文件（mode-coffee.js 和 mode-typescript.js），我不知道如何将它们嵌入到 mode-html.js 中。代码比较复杂。

你能帮我一下吗？我已经研究这些文件几个小时了，非常感谢您的帮助。谢谢你。

Answer 1

目前这是不可能的。我们正在考虑将其添加为一项功能，该功能正在通过 GitHub 问题此处进行跟踪。

Answer 2

    
<script src="/ace-builds/src-noconflict/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script src="/ace-builds/src-noconflict/ext-modelist.js" type="text/javascript" charset="utf-8"></script>

<script>
var langTools = ace.require("ace/ext/language_tools");
var editor = ace.edit("editor");
editor.setTheme('ace/theme/monokai');
editor.session.setMode('ace/mode/html');
// editor.session.setMode('ace/mode/php');
editor.setHighlightActiveLine(false);


// autocomplete
editor.setOptions({
    enableSnippets: true,
    enableBasicAutocompletion: true,
    enableLiveAutocompletion: true,
    
});

// add Custom snippet
var staticWordCompleter = {
    getCompletions: function(editor, session, pos, prefix, callback) {
        var wordList = ["<?php ?>", , `<div class=""> </div>`];
        callback(null, wordList.map(function(word) {
            return {
                caption: word,
                value: word,
                meta: "static"

            };
        }));
        // set mode php
        var modelist = ace.require("ace/ext/modelist")
        var filePath = ".php"
        var mode = modelist.getModeForPath(filePath).mode
        console.log(mode);
        editor.session.setMode(mode)

    }
}
langTools.addCompleter(staticWordCompleter);