シンタックスハイライト

[ongaeshi]

候補1: CodeMirror

https://codemirror.net/mode/ruby/

インデントは2がいいな。

<form><textarea id="[code]()" name="[code]()">
.
.
</textarea>

    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        mode: "text/x-ruby",
        matchBrackets: true,
        indentUnit: 4
      });
    </script>

[ongaeshi]

CDN経由で見た目は変わったが、なぜかtextarea.valueが取得できなくなってしまった。npm経由で取得してrequireしたら変わる？

[ongaeshi]

#23 で80%位できた。残りはテーマの調整とrubyモード専用のオプションをTypeScriptに渡せるようにする。

[ongaeshi]

mobileで使うと微少なズームが起きて使いにくい。TryRubyでは起きていないので回避方法があるだろうか。

[ongaeshi]

codemirror/codemirror5#6258 関係あるだろうか

[ongaeshi]

bootstrapのtextareaクラスとの組み合わせの相性が悪いのかもしれない。

[ongaeshi]

スタイルはrailscasrとかrubyblueがいいかも。

https://codemirror.net/demo/theme.html#railscasts

[ongaeshi]

縦幅が変更できないのが不便。%指定したらもう少し大きくなるかな。

https://sumiretool.net/article/d/web_app_tips/codemirror

// 数値指定
editor.setSize(600, 400);

// %指定
editor.setSize("100%", "100%");

[ongaeshi]

#27