「Crayon Syntax Highlighter」:HTML や PHP などのソースコード表示に最適のプラグイン

「Crayon Syntax Highlighter」サイト

「Crayon Syntax Highlighter」は投稿記事や固定ページにPHPやHTMLなどのソースコードを表示させたいときに便利なWordPressプラグインです。とくに技術系ブログを書かれている方にはおすすめです。これがあると自分の好みにあった表示のさせ方を選べます。いろいろと細かな設定ができますが、デフォルトのままでも十分です。

ソースコードを適切に表示できる

ブログやサイトのカスタマイズについて記事を書こうとすると、どうしてもソースコードの変更や追加に話が及びます。サイト訪問者がコードの書かれた記事を参考にして、同じように修正を加えたいとおもった場合、コードを詳細に分析したり、コピー&ペーストされる場合も多いでしょう。

もし投稿記事にHTMLやPHPなどのコードを書いて「文字」として表示させたいとおもっても、「プログラム言語」として認識されるので適切に表示されません。

TeraPadでのHTML表示
プレビューしても、

HTMLで書いた内容がプレビューで表示されない
となります。

したがって、ソースコードをそのまま表示させるには別の方法が必要になります。このプラグインを使えば簡単に表示させることが可能です。

多彩なカスタマイズ性

サイト訪問者が表示されたコードを見るときに、色分けされていたり、見やすいレイアウトにされていると助かります。

このプラグインではテーマの数が29あり、フォントは12から選べます(バージョン2.4.3現在)。ハイライトしたい枠のサイズや上下左右の余白なども、サイトに合わせて細く設定できるので、お好みの表示にしてみましょう。

インストール

「プラグイン」の新規追加から「Crayon Syntax Highlighter」と検索すればすぐに表示されます。

「Crayon Syntax Highlighter」のインストール画面

あとはインストールして、有効化しましょう。

設定

管理画面「設定」欄に「Crayon」と表示されます。細かな設定はここで行います。以下、かんたんに説明していきます。

テーマ・フォント・サイズ

「Crayon Syntax Highlighter」の一般設定

こちらでおおまかな設定を変更できます。「リアルタイムのプレビューを有効にする」にチェックが入っていると、テーマやフォントを変更したときに、表示がすぐに反映されます。これを確認しながらお好みの表示にするといいでしょう。

表示例(1)

「Crayon Syntax Highlighter」の表示例1

表示例(2)

「Crayon Syntax Highlighter」の表示例2

ツールバー・行・コード

「Crayon Syntax Highlighter」のツールバー・行・コードの設定

「ツールバー」の設定には好みがあるとおもいます。また、デフォルトの状態でチェックされていますが「コードのコピー/貼り付けを有効にする」はサイト訪問者に親切です。

タグ・プログラム言語・読み込みファイル・Posts・タグエディタ

「Crayon Syntax Highlighter」のその他の設定

「タグ」の「Crayonsとして<pre>タグをキャプチャする」のチェックを外しておくと「Crayon」内でpreタグが使用可能になります。必要に合わせて変更してください。また、「 」のチェックの有無も、ブログやサイトによってそれぞれです。

デフォルトのままで不都合なければそのままでいいでしょう。

もしプラグインを有効化して表示が崩れてしまったら、「タグエディタ」のチェックを外すと直るかもしれません。試してみてください。

その他・デバッグ・エラー・ログファイル

「Crayon Syntax Highlighter」の残りの設定

残りはそのままでいいでしょう。あとは「変更を保存」をクリックして完了です。

使い方

いつもの新規投稿画面のテキストの方を見てください。

新規投稿画面に「Crayon Syntax Highlighter」ボタンが追加される

「crayon」ボタンが表示されているので、これをクリックします。

「Crayon Syntax Highlighter」でのコード入力画面

赤枠の中にソースコードを書き込んで「挿入」を押すだけです。細かい設定もこの画面で調整することが可能です。

ソースコードを頻繁に表示する方にはおすすめ

「Crayon Syntax Highlighter」に似たプラグインは多くあります。その中でもこのプラグインは細かな設定ができ、表示がキレイで、バージョンアップもよくされています。

別のプラグインを使用されていた方が、こちらに変更している場合もあります。多くのブログでも使用されていますね。

基本的にはデフォルトのままでも十分に使えます。技術系ブログ・サイトを運営していたり、コード修正によるブログのカスタマイズ方法を共有したい人などは、導入をしておくとよいでしょう。

関連記事

「Acunetix WP Security」:サイトの脆弱性スキャン・パーミションの設定・データベースの接頭辞の変更・その他の安全性を高めるセキュリティ対策が総合的にできるプラグイン

WordPressプラグイン「Acunetix WP Security」が指摘する全ての対策方法を解説しています。とくに手動で行う必要がある「.htaccess」「install.php」「upgrade.php」ファイルについても書いています。

「WP Social Bookmarking Light」:サイト内の投稿記事や固定ページにソーシャルボタンを設置するプラグイン

「WP Social Bookmarking Light」は、サイト内の投稿記事や固定ページに、国内外でよく使われている多くのソーシャルボタンを設置することができるWordPressプラグインです。ソーシャルボタンを設置しておくと、サイト訪…