【Cocoonカスタマイズ】ソースコードをエディタ風に表示するカスタマイズ方法を紹介！

Cocoonでは、簡単にソースコードをエディタ風に
表示させることができます。

 設定を変更する

まずは、ダッシュボード→Cocoonの設定を選択

コードを選択

ソースコードをハイライト表示にチェックを入れ、
変更を保存します。

これで設定は完了です。

コードを追加する

続いて、コードを追加してみましょう。

投稿画面からブロックを追加、

フォーマットのソースコードを選択。

下記のようなブロックにソースコードを入力します。

表示を確認する

//こんな風に表示されました
/***** cocoon 目次スタイル *****/
.toc {
    border-left: 5px double #cccfd2;
    border-right: 5px double #cccfd2;
　　border-top: 5px double #cccfd2;
　　border-bottom: 5px double #cccfd2;
    margin: 0 35px 10px;
}