mieki256's diary

JavaScriptで書かれた ACEエディタというものがあると先日知ってちょこちょこ使い始めているのだけど、複数のソースを並べて表示させる方法が分からなくて悩んだり。

今のところ、以下のような書き方をしちゃってるけど…。これでいいのだろうか…。本当に合ってるのか…？ もっと上手い書き方があるのでは…？

  <h2>Source code</h2>

  <h3><a href="main.rb">main.rb</a></h3>
  <div id="editor1" class="editor"></div>

  <h3><a href="dxrbmapjson.rb">dxrbmapjson.rb</a></h3>
  <div id="editor2" class="editor"></div>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.3.1/ace.js" charset="utf-8"></script>

  <script>
    var file_list = [{
        id: "editor1",
        filename: "main.rb"
      },
      {
        id: "editor2",
        filename: "dxrbmapjson.rb"
      }
    ];
    var editors = (file_list).map(function(file_info) {
      var id = file_info["id"];
      var filename = file_info["filename"];
      var editor = new ace.edit(id);
      // editor.setTheme("ace/theme/chrome");
      editor.getSession().setMode("ace/mode/ruby");
      // editor.setFontSize(16);
      $.get(filename, function(rb) {
        editor.setValue(rb, -1); // -1: set cursor to document start
      });
      return editor;
    });
  </script>