CodeMirrorを使ってみた - JavaScript
コーディング用のテキストエリアを簡単に実装できるライブラリを見つけたので使ってみた
textareとリンクさせて使うのが一般的な気がするけど、今回はすでにある要素と置き換えるようにしてみた
まずは、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");
すでにある要素と置き換え
/** * 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とリンクさせるらしい
いろんな設定ができるらしいから少しずつやっていこう