Question

我正在制作Adobe 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文件中添加对Quick Edit的支持？

Answer 1

我认为问题出在你的代码的这一部分：

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

看CodeMirror's overlay mode demo，它会略有不同：

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

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

对每个字符单独返回似乎使CodeMirror将其所有正常令牌分解为单独的一个char标记，Brackets Quick Edit代码无法识别 - 例如如果您的光标位于此处 - cl|ass - CodeMirror将其显示在名称仅为＆＃34; l＆＃34;的属性标记中，而Brackets代码则查找名为＆＃34; class＆的属性＃34;

CodeMirror和Brackets，带CSS快速编辑的自定义模式

1 个答案: