シンプルで軽量且つパワフルなtextarea用のシンタックスハイライトJavaScriptライブラリ・「SimpleSyntaxJs」

SimpleSyntaxJs

See the Pen <a href="https://codepen.io/kachibito/pen/qBGrLob"> Untitled</a> by kachibito (<a href="https://codepen.io/kachibito">@kachibito</a>) on <a href="https://codepen.io">CodePen</a>. 
SimpleSyntaxJsはシンプルで軽量且つパワフルなtextarea用のシンタックスハイライトJavaScriptライブラリです。

上記サンプルのようにテキストエリアでコードのシンタックスハイライトを可能にする、というJSライブラリで、非依存、軽量でシンプルに使えるよう設計されています。

導入も楽々、以下👇のようにCSSとライブラリを読み込み、

<link href="https://unpkg.com/simplesyntax-js@1.0.0/dist/simplesyntax.min.css" rel="stylesheet">
<script src="https://unpkg.com/simplesyntax-js@1.0.0/dist/simplesyntax.min.js"></script>

以下👇の要領で初期化とHTML要素とCSSを用意すれば完了です。

const textarea = document.getElementById("textarea-id");
textarea.simpleSyntax();;

オプションは以下👇のように設定します。内容はサンプルで使用したもの。

textarea.simpleSyntax({
    language: 'javascript',
    theme: 'dark',
    lineNumbers: true,
    readOnly: false,
    matchBraces: true,
    findAndReplace: true,
    tabChars: '\t'
});

他にもfindAndReplaceやfontといった設定項目があります。詳細はリポジトリで解説されていますのでご確認下さい。

軽いし導入も楽だし良いんじゃないでしょうか。ライセンスはMIT。

SimpleSyntaxJs