Как правильно загрузить сценарий редактора ACE и добавить скрипт определения собственной подсветки? - PullRequest
Новая
       11

Как правильно загрузить сценарий редактора ACE и добавить скрипт определения собственной подсветки?

0 голосов
/ 03 января 2019

Я делаю редактор для языка LPMLN, который в настоящее время не поддерживает подсветку в редакторе ACE.Я пытался встроить сценарий в качестве руководства в свой сайт index.html, но не могу добавить его локально с локальным относительным путем.Поэтому я могу попробовать только способ CDN, добавив URL-адрес сценария, который работает.Однако затем я определил правила подсветки при подсветке файлов javascript.Таким образом, способ URL не будет работать, поскольку в существующей библиотеке нет таких файлов.Затем я попытался опубликовать код на github и скопировать ссылку CDN, чтобы загрузить мой скрипт, но, похоже, он не работает.Я проверил мой файл подсветки в ссылке создателя режима: https://ace.c9.io/tool/mode_creator.html, и он дает правильное отображение подсветки.

Это мой HTML-код (из тела): 

<body>

<div id="editor">%example:
1:go_out(today,a):-not rain(today),free(a,today).
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js" type="text/javascript"></script>
<script src="https://raw.githack.com/BobHuNanjing/myeditor/master/ace/mode/mode-lpmln" type="text/javascript" charset="utf-8"></script>


<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/lpmln");
</script>
<app-root></app-root>
</body>
</html>

И вот мой файл подсветки js: 

define('ace/mode/lpmln',function(require, exports, module) {
    "use strict";
    var oop = require("../lib/oop");
    var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;
    /* --------------------- START ----------------------------- */
    var LpmlnHighlightRules = function() {
    this.$rules = {
    "start" : [
    {
        "token" : "keyword.other.define",
        "regex" : "(\\:-)"
    },
    {
        "token" : "keyword.operator.naf",
        "regex" : "((not))"
    },
    {
        "token" : "keyword.operator.neg",
        "regex" : "([\\-])"
    },
    {
        "token" : "markup.underline.weight",
        "regex" : "(\\d+:)"
    },
    {
        "token" : "string.regexp",
        "regex" : "(^\\w+(\\.*\\d{0,2})([+*/-]\\w+(\\.*\\d{0,2}))+)"
    },
    {
        "token" : "comment.line.percentage",
        "regex" : "(\\%.*)"
    },
    {
        "token" : "support.varaiable",
        "regex" : "([\\(\\)])"
    },
    {
        "token" : "variable.parameter",
        "regex" : "(?<=\\().*?(?=\\,)|(?<=\\,).*?(?=\\))"
    },
    {
        defaultToken : "text",
    }
    ]
    };
    this.normalizeRules();
    };
    /* ------------------------ END ------------------------------ */
    oop.inherits(LpmlnHighlightRules, TextHighlightRules);
    exports.LpmlnHighlightRules = LpmlnHighlightRules;
    });

Как я вижу, тема загружена правильно, которая должна существовать по пути CDN cloudflare.Но мой скрипт не был загружен.Я также попробовал ace.config.setModuleUrl('ace/mode/lpmln',"https://raw.githack.com/BobHuNanjing/myeditor/master/ace/mode/mode-lpmln.js"), консоль не показывает ошибок, но ничего не выделяет подсветку.

Так как мне правильно импортировать ace.js и как правильно добавить новый файл подсветки js и заставить его работать?

1 Ответ

0 голосов
/ 04 января 2019

Чтобы определить синтаксис для Ace, вам нужны как правила подсветки, так и режим, управляющий автоматическим отступом сворачивания и т. Д., См. https://github.com/ajaxorg/ace-builds/blob/0d62c26de7b2e1922d8dd95ba587c9845c018c51/src/mode-json.js#L257 и https://ace.c9.io/#nav=higlighter

Вот фрагмент, который модифицирует ваш пример для работы, добавив определение режима 

define('ace/mode/lpmln',function(require, exports, module) {
"use strict";
var oop = require("../lib/oop");
var TextHighlightRules = require("./text_highlight_rules").TextHighlightRules;


// to define highlighting we need mode and highlight rules
// normally highlight rules are defined in a separate file, 
// but since this is used only in one place, this function is directly in the mode
var LpmlnHighlightRules = function() {
    this.$rules = {
    "start" : [
    {
        "token" : "keyword.other.define",
        "regex" : "(\\:-)"
    },
    {
        "token" : "keyword.operator.naf",
        "regex" : "((not))"
    },
    {
        "token" : "keyword.operator.neg",
        "regex" : "([\\-])"
    },
    {
        "token" : "markup.underline.weight",
        "regex" : "(\\d+:)"
    },
    {
        "token" : "string.regexp",
        "regex" : "(^\\w+(\\.*\\d{0,2})([+*/-]\\w+(\\.*\\d{0,2}))+)"
    },
    {
        "token" : "comment.line.percentage",
        "regex" : "(\\%.*)"
    },
    {
        "token" : "support.varaiable",
        "regex" : "([\\(\\)])"
    },
    {
        "token" : "variable.parameter",
        "regex" : "(?<=\\().*?(?=\\,)|(?<=\\,).*?(?=\\))"
    },
    {
        defaultToken : "text",
    }
    ]
    };
    this.normalizeRules();
    };
/* ------------------------ END ------------------------------ */
oop.inherits(LpmlnHighlightRules, TextHighlightRules);
exports.LpmlnHighlightRules = LpmlnHighlightRules;

var oop = require("../lib/oop");
var TextMode = require("./text").Mode;
var CstyleBehaviour = require("./behaviour/cstyle").CstyleBehaviour;
var CStyleFoldMode = require("./folding/cstyle").FoldMode;

var Mode = function() {
    this.HighlightRules = LpmlnHighlightRules;
    this.$behaviour = new CstyleBehaviour();
    this.foldingRules = new CStyleFoldMode();
};
oop.inherits(Mode, TextMode);

(function() {
    this.$id = "ace/mode/lpmln";
}).call(Mode.prototype);

exports.Mode = Mode
});

// after the mode is defined initialize the editor
// this can be in another file, but this playground doesn't allow to create multiple files
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/lpmln");
#editor{ height: 100px }
<!--include ace-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js" type="text/javascript"></script>
<!--include one of modes if you use behavior or folding rules-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/mode-json.js" type="text/javascript"></script>

<div id="editor" >%example:
1:go_out(today,a):-not rain(today),free(a,today).
</div>
...