SimpleSyntaxJs
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。
