この動画でCodeMirrorのエディタのシンタックスハイライトの設定を学んだ

フォルダ構造は以下のようになっている

.
├── index.html
├── lib
└── mode

シンタックスハイライトの設定

シンタックスを適用するには以下の手順で行う

適用したい言語のシンタックスの設定ファイルを取り込む
CodeMirrorオブジェクトの生成時にmodeで言語を指定する

まずはシンタックスの設定ファイルを読み込む

modeフォルダにいろんな言語のシンタックスの設定ファイル(.jsファイル)が入っている
CSSのシンタックスハイライトをしたい場合、CSSの設定ファイルを取り込む。CSSの設定ファイルは以下の場所にある。

.
├── index.html
├── lib
│   ├── codemirror.css
│   └── codemirror.js
└── mode
    ...
    ├── css
    │   ├── css.js       // これがCSSのシンタックスハイライトのファイル
    │   ├── gss.html
    │   ├── gss_test.js
    │   ├── index.html
    │   ├── less.html
    │   ├── less_test.js
    │   ├── scss.html
    │   ├── scss_test.js
    │   └── test.js
    ...

CSSのシンタックスのファイルはmode/css/css.jsなので、以下のように読み込む
(CSSだから少しややこしいけど、JavaScriptの場合、mode/css/javascript.jsとなる)

<head>
  <script src="mode/css/css.js"></script>
</head>

もし、なにも読み込んでいなかった場合、色は変わらない

次に、CodeMirrorオブジェクトの生成時にシンタックスを指定する
mode: モードというように指定する。もし指定しなかった場合(modeすら渡さない)、最初に読み込んでいるシンタックスの設定ファイルが適用される

<body>
  ...
  <script>
    const editor = CodeMirror(document.getElementById("codeeditor"), {
      mode: "css"   /* CSSのシンタックス */
    });
  </script>
</body>

全体のソース

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CodeMirror</title>
  <!-- 以下の2つは必ず読み込む -->
  <link rel="stylesheet" href="lib/codemirror.css">
  <link rel="stylesheet" href="theme/monokai.css">
  <script src="lib/codemirror.js"></script>
  <script src="mode/css/css.js"></script>

  <style>
    body {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="codeeditor"></div>

  <script>
    const editor = CodeMirror(document.getElementById("codeeditor"), {
      mode: "css"    /* modeの指定 */
    });
  </script>
</body>
</html>

TIL

Today I Learned. 知ったこと、学んだことを書いていく

シンタックスハイライトの設定 CodeMirror - JavaScript

シンタックスハイライトの設定

全体のソース

参考文献