WordPress投稿にソースを表示するプラグイン、Crayon Syntax Highlighter

Web系のBlogを書いていると、htmlやcss、jsのソースをサンプルとして表示したいことがよくあります。
そんな時に便利なのが、Crayon Syntax Highlighter。

プラグインのインストール

WordPressのプラグイン新規追加画面で、「Crayon Syntax Highlighter」を検索してインストールして、プラグインを有効化。

設定

WordPress管理画面で、設定ーCrayonを選択。
テーマやフォント、ツールバーなどの設定ができます。

スクリーンショット 2016-08-08 12.41.48

記述方法

<pre>でソースを囲むと、こんな感じで表示されます。

投稿画面のcrayonボタン

preで囲むだけじゃなく、いろいろカスタマイズしたい時は、投稿画面に追加されている「crayon」ボタンをクリック。
色々細かな表示設定を変更できます。
スクリーンショット 2016-08-08 12.52.54

ツールバー

ツールバーは、左から

  • 行番号非表示切り替え
  • 素のコード表示切り替え
  • ワードラップ表示の切り替え
  • コピペ用全選択
  • 別画面でソース表示

となっています。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です