TIL

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

CodeMirrorを使ってみた - JavaScript

コーディング用のテキストエリアを簡単に実装できるライブラリを見つけたので使ってみた
textareとリンクさせて使うのが一般的な気がするけど、今回はすでにある要素と置き換えるようにしてみた

CodeMirror

まずは、http://codemirror.net/ にアクセスしてダウンロードする。(gitでcloneするのもいいらしい)

コーディング

まず、CodeMirrorを使うために必要なファイルをheadで読み込む

<head>
  <script src="lib/codemirror.js"></script>
  <link rel="stylesheet" href="lib/codemirror.css">
  <!-- ハイライトしたい言語を選んで読み込むらしい -->
  <script src="mode/javascript/javascript.js"></script>
</head>

第1引数に設定した要素の中にテキストエリアを作成する。第2引数にはテキストエリアの設定をdictionaryで渡すことができる。

CodeMirror(要素, テキストエリアの設定);

body内にテキストエリアを作成してみる

CodeMirror(document.body);

modeで言語の指定、valueで初期値を設定できる

CodeMirror(document.body, {
  mode: "javascript",
  value: "const text = () => {return 0;}"
});

縦、横幅の指定

setSize()で指定できるらしい。

横を100px、縦を200pxに指定する場合

const cm = CodeMirror(elem);
cm.setSize("100px", "200px");

stackoverflow.com

すでにある要素と置き換え

/**
 * CodeMirrorに置き換える
 * @param {Object} 置き換えるHTMLElement
 */
const replaceCodeMirror = (elem) => {

  // 行数の表示
  const conf = {
    lineNumbers: true,
  };

  // 置き換え
  const editor = CodeMirror(elt => {
    elem.parentNode.replaceChild(elt, elem); 
  }, conf);

  editor.setSize("100%", "100%");
};

replaceCodeMirror(document.getElementById("editor1"));

公式ページに乗ってた方法を使って置き換えをしてみた
idがeditor1の要素をCodeMirrorに置き換えている

普通の使い方はtextareaとリンクさせるらしい

いろんな設定ができるらしいから少しずつやっていこう

参考文献