Cocoonでシンタックスハイライトを使う方法（ソースコード表示）

シンタックスハイライト（構文強調 ) とは、テキストエディタの機能で、テキスト中の一部分を、コードの種類・その分類ごとに異なる色やフォントで表示するもので、サイト上でソースコードを表示したい際などに、わかりやすくする事が出来るのでとても便利です。

Cocoonには、コードハイライトする機能がある為、簡単な設定でシンタックスハイライターを利用出来ます。

は以下をご覧ください。

コピーボタンが表示される「prism.js」でのコード表示サンプルは以下です。

Cocoonでシンタックスハイライトを使う方法

Cocoonで利用できるハイライターは、以下です。

「Cocoon設定」を開きます。

「コード」タブを選択します。

ハイライト表示の「ソースコードをハイライト表示」にチェックを入れます。

ソースコードに行番号を表示する際は、「行番号表示」にもチェック。

ライブラリ選択で、対応言語を増やす事が出来ます。

軽量版で使えるコードは以下です。

公式サイトより引用：対応ソースコード

上記以外のコードも使いたい場合は、ライブラリの選択を「全て」にする事で利用できます。

デフォルトでは「monokai」になっていて、以下のような黒背景表示です。

デザインは９１種類（？）ほどありますので、好みのものを選択します。

デザインサンプルは、以下のページのデモで見られます。
https://highlightjs.org/static/demo/

綾糸: 綾糸　主婦 1990年代、汎用機時代のエンジニア趣味で長くやっていたweb制作は、未だにエディタでの手コーティング現在は自宅でゆるりとweb制作やライターをしています