Cocoonで記事内にコードやコマンドをプラグインなしでイケてるエディタ風な感じにpreタグというものでハイライト表示させるハックメモ

cocoon

今回はコードやコマンドを記事内にこんな感じに表示させましょう。

Cocoon設定から変更する

画面左のメニュー部分からCocoon設定をクリックすると以下の画面に移ります。

たくさんあるタブの中から「コード」をクリックし少し下にスクロールすると下の画面になります。

「ソースコードをハイライト表示」にチェックを入れて、好みの「ハイライトスタイル」を選択します。

「変更をまとめて保存」をクリック。

これで設定は完了できています。簡単です。

それでは実際に変更できているのか試してみましょう。

新規投稿ページからブロックの+マークをクリックして、「整形済み」を選択します。

プレビューで表示してみる

選択したら、なにかコードを記述してみましょう。

そうしたらプレビューで確認してみます。

プレビューで見てみると反映されています!

以上です。

とても簡単でした。

コメント

タイトルとURLをコピーしました