ソースコードをsyntax highlighで見やすく挿入する

使用アドオンCode Snippet

CodeSnippetアドオンをインストールすると表示される、Code Snippetブロックを任意のエリアにドラッグします。

表示されるフォームで入力したいソースとテーマ、言語を設定します。


保存するとページで構文に応じて配色されたコードが表示されます。

ブロックを編集でテーマをCodepen Embedに変更してみます。

異なった配色のテーマでプログラムコードが表示されます。

Syntax highlightはhighlight.jsを利用しているため。
https://highlightjs.org/にアクセスしてトップ画面にあるテーマのサンプルの下部のstyle:のところをクリックすると次々にテーマが入れ替わりますので、気に入ったテーマを見つけることができます。


検索

concrete5の基本的な使い方や、コミュニティでのFAQなどの情報共有はhttp://concrete5-japan.org/をご覧ください。

追加テーマや拡張ブロック(アドオン)のインストール・アンインストール方法は5.6の記事ですが方法は同じですでのこちらを参照ください。