この動画を見て、実際にテーマの変更をしてみた
すごい簡単にできてびっくりした

themeフォルダにテーマ(.cssファイル)は格納されている

以下のようにthemeフォルダをコピーしてくる

.
├── index.html
├── lib
├── mode
└── theme   // コピーしてくる

themeの中を見てみたんだけど、gruvboxがない！！！！！大好きなテーマがなくて少しショック...

テーマの設定

今回はテーマをmonokaiにしてみる

f:id:tmg1998:20180415211447p:plain:w200

テーマの設定をするには以下のようにする

theme内にあるcssファイルを読み込む
CodeMirrorオブジェクト生成時にthemeでテーマを指定する

まずはCSSの読み込み

<head>
  ...
  <link rel="stylesheet" href="theme/monokai.css">
  ...
</head>

次に、CodeMirrorオブジェクトの生成時にテーマを指定する theme: テーマ名とすることで設定できる

<body>
  ...
  <script>
    const editor = CodeMirror(document.getElementById("codeeditor"), {
      mode: "css",
      theme: "monokai"  /* テーマの設定 */
    });
  <script>
<body>

設定はdictionaryで渡すこともできる！

<body>
  ...
  <script>
    // dictionaryを生成して渡す
    const conf = {
      mode: "css",
      theme: "monokai"
    };
    const editor = CodeMirror(document.getElementById("codeeditor"), conf);
  <script>
<body>

TIL

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

テーマの設定 CodeMirror - JavaScript

テーマの設定

参考文献