2016-08-05 19 views
1

私は、新しいテキスト言語のためのブラケット拡張を書いています。これはhtmlとハンドルバーとjavascriptが混在しています。たとえば、既存のCodeMirrorモードを使用してコードモードを作成したいとします。 htmlmixed、javascript、ハンドルバー。新しい言語の角括弧拡張を書くには?

これは私が(main.js)現在持っているもので、

define(function (require, exports, module) { 

    var CodeMirror = brackets.getModule("thirdparty/CodeMirror/lib/codemirror"), 
     LanguageManager = brackets.getModule("language/LanguageManager"); 

    CodeMirror.defineMode('htmlbars', function (config, parserConfig) { 

     var htmlMode = CodeMirror.getMode(config, "htmlmixed"), 
      javascriptMode = CodeMirror.getMode(config, "javascript"), 
      handlebarsMode = CodeMirror.getMode(config, "handlebars"); 

     function html(stream, state) { 
      var style = htmlMode.token(stream, state.htmlState); 
      return style; 
     } 

     return { 
      startState: function() { 
       var state = htmlMode.startState(); 
       return {token: html, localMode: null, localState: null, htmlState: state}; 
      }, 

      copyState: function(state) { 
       if (state.localState) 
        var local = CodeMirror.copyState(state.localMode, state.localState); 
        return { token: state.token, localMode: state.localMode, localState: local, 
          htmlState: CodeMirror.copyState(htmlMode, state.htmlState)}; 
      }, 

      token: function(stream, state) { 
       return state.token(stream, state); 
      }, 

      indent: function(state, textAfter) { 
       if (!state.localMode || /^\s*<\//.test(textAfter)) 
        return htmlMode.indent(state.htmlState, textAfter); 
       else if (state.localMode.indent) 
        return state.localMode.indent(state.localState, textAfter); 
       else 
        return CodeMirror.Pass; 
      }, 

      innerMode: function(state) { 
       return {state: state.localState || state.htmlState, mode: state.localMode || htmlMode}; 
      } 
     }; 
    }); 

    CodeMirror.defineMIME("text/x-xhbs", "htmlbars"); 

    LanguageManager.defineLanguage("htmlbars", { 
     name: "Htmlbars", 
     mode: ["htmlbars", "text/x-hbs"], 
     fileExtensions: ["xhbs"] 
    }); 

}); 

それでは、私が知りたいことの要素場合<% STARTSWITH javascriptのモードを使用するように、ここで定義する方法であると%>などで終わります...現在でのみ動作しますhtml

詳細が必要な場合はお知らせください。

ありがとうございます! :)

答えて

1

あなたは簡単にCodeMirror Multiplex Mode

などを使用することによって、これを達成することができます

define(function (require, exports, module) { 

    var CodeMirror = brackets.getModule("thirdparty/CodeMirror/lib/codemirror"), 
     LanguageManager = brackets.getModule("language/LanguageManager"); 

    brackets.getModule(["thirdparty/CodeMirror/mode/handlebars/handlebars", "thirdparty/CodeMirror/mode/javascript/javascript"], function() { 
     CodeMirror.defineMode("htmlbars", function (config) { 
      return CodeMirror.multiplexingMode(
       CodeMirror.getMode(config, "text/html"), 
       { 
        open: "<%", 
        close: "%>", 
        mode: CodeMirror.getMode(config, "javascript"), 
        parseDelimiters: true 
       }, 
       { 
        open: "{{", 
        close: "}}", 
        mode: CodeMirror.getMode(config, "handlebars"), 
        parseDelimiters: true 
       } 
      ); 
     }); 

     CodeMirror.defineMIME("text/x-xhbs", "htmlbars"); 

     LanguageManager.defineLanguage("htmlbars", { 
      name: "Htmlbars", 
      mode: ["htmlbars", "text/x-hbs"], 
      fileExtensions: ["xhbs"] 
     }); 
    }); 

}); 

公式デモ:この意志は他の誰かに役立ちますhttps://codemirror.net/demo/multiplex.html

希望。 :)