1

我正在制作一个 Adob​​e Brackets Extension 以添加对 Laravel Blade 语法高亮的支持。

Blade 是一个在 HTML（更具体地说是 .php 文件）之上运行的模板系统，在没有激活我的扩展程序的情况下，我可以对 css 规则名称执行 CTRL+E快速编辑以快速在 stlye.css 文件中找到该规则。但是当我激活扩展时，CTRL+E 不再工作，但 HTML 语法工作正常。

我在 text/html 上使用覆盖模式。

这是 main.js 扩展代码：

define(function (require, exports, module) {
    'use strict';

    var LanguageManager = brackets.getModule("language/LanguageManager");


    CodeMirror.defineMode("laravelblade", function (config, parserConfig) {
        var mustacheOverlay = {
            token: function (stream, state) {

                var ch;

                //Highlight Comments {{-- --}}
                if (stream.match("{{--")) {
                    while ((ch = stream.next()) != null)
                        if (ch == "}" && stream.next() == "}") break;
                    stream.eat("}");
                    return "comment";
                }
                //--

                //Highlight {{ $var }})
                if (stream.match("{{")) {
                    while ((ch = stream.next()) != null)
                        if (ch == "}" && stream.next() == "}") break;
                    stream.eat("}");
                    return "def";
                }

                //Highlight {% $var %} (Laravel 5)
                else if (stream.match('{%')) {
                    while ((ch = stream.next()) != null)
                        if (ch == "%" && stream.next() == "}") break;
                    stream.eat("}");
                    return "def";
                }

                //Highlight {% $var %} (Laravel 5)
                else if (stream.match('{%')) {
                    while ((ch = stream.next()) != null)
                        if (ch == "%" && stream.next() == "}") break;
                    stream.eat("}");
                    return "def";
                }

                //Return Null if no condition was met.
                else if (stream.next() != null) {
                    return null;
                }
            }
        };
        return CodeMirror.overlayMode(CodeMirror.getMode(config, parserConfig.backdrop || "php"), mustacheOverlay);
    });


    LanguageManager.defineLanguage("laravelblade", {
        "name": "Laravel Blade",
        "mode": "laravelblade",
        "fileExtensions": ["blade.php"],
        "blockComment": ["{{--", "--}}"]
    });
});

真正的问题是： 如何在我的自定义模式和 *blade.php 文件中添加对快速编辑的支持？

4

1 回答 1

1

我认为问题在于您的代码的这一部分：

            else if (stream.next() != null) {
                return null;
            }

查看CodeMirror 的覆盖模式演示，它做了一些稍微不同的事情：

  while (stream.next() != null && !stream.match("{{", false)) {}
  return null;

您的代码为每个被忽略的字符返回一次 null，而演示只为每个连续的被忽略字符块返回一次 null。

为每个字符分别返回似乎使 CodeMirror 将其所有正常标记分解为单独的单字符标记，括号快速编辑代码无法识别这些标记 - 例如，如果您的光标在这里cl|ass- CodeMirror 表示它在属性标记中其中名称只是“l”，而括号代码正在查找名为“class”的属性。

于 2014-11-06T22:09:35.077 回答