任意のWebサイトにコードエディタを実装できるスクリプト・「Copenhagen Editor」

Copenhagen Editor

Copenhagen Editorは任意のWebサイトにコードエディタを実装できるスクリプトです。

highlight.jsとfeather iconsが内蔵されていますが、その他のライブラリには依存しません。

シンタックスハイライトに加えてコード入力補完やマルチフォーカスもサポート等もサポートされています。

<link rel="stylesheet" href="copenhagen.0-1-4.min.css">
<script src="copenhagen.0-1-4.min.js"></script>

CSSとCopenhagenを読み込みます。

window.addEventListener('DOMContentLoaded', function () {
  var editors = Copenhagen.initSelectorAll('.editor');
});

セレクタを指定します。

<div class="editor" data-language="html" data-maxrows="20">
  // some code
</div>

要素を用意して完了です。

言語はdata-language属性で決めておきます。事前にコードを入れておけるので上記例ならコメントアウトしているsome codeの部分にコードを書いておけばユーザーがコードを編集できる、といった事も可能です。

なかなか面白いですね。ライセンスはMITとの事でした。

Copenhagen Editor