WordPress[Crayon Syntax Highlighter] ブログにソースコードを綺麗に表示

wordpressのカスタマイズでソースコードを表示させたい時、今までは「SyntaxHighlighter Evolved」使用していました。こちらのプラグインでも、ソースコードを綺麗に表示していてくれたのですが、とにかく表示が遅くて重い。表示する量が増えれば増える程遅くなって行くので解決策を探して色々ググってみました。その中で、日本のブロガーの方々で特にお勧めしている方が多かったのが「Crayon Syntax Highlighter」でした。

dmgadget(ディーエムガジェット）でも導入をしてしばらく経ちますが、過去の記事でまだ移行が終わっていない投稿も多いので、「SyntaxHighlighter Evolved」も「Crayon Syntax Highlighter」も両方インストールしたままですが、時間を見つけて早めに全部移行したいです。他にも「Crayon Syntax Highlighter」はこの様にコードを表示出来ます。殆どのソースコードに対応しているので問題なく使用して頂けると思います。

ブログにソースコードを綺麗に表示させる為に「Crayon Syntax Highlighter」を導入

カスタマイズ系ブログをやっている方以外では、ソースコードをブログに表示させる事は殆どないと思いますが、やってみたい方へ向けて導入備忘録として残したいと思います。早速インストールしてみましょう。

管理画面　→　プラグイン　→　新規追加　→　「Crayon Syntax Highlighter」と検索　→　「いますぐインストール」をクリックして、インストール後忘れず「有効化」をします。

「有効化」を行った後、管理画面から設定　→　「Crayon」に行くと詳細設定が表示されます。ちょっと前に日本語にも対応したので、日本語で表示されているはずです。一般設定では主にテーマの変更や表示されるフォントの種類が選択出来ます。

他にも沢山詳細設定があるのですが、dmgadget（ディーエムガジェット）ではソースコードにマウスを当てた場合、ツールバーをソースコードに被せない様に表示させるために、一般設定にある「ツールバー」設定欄の一番上「コードを押し下げるのではなく、コード上に重ねて表示」だけチェックボタンを外しています。

「Crayon Syntax Highlighter」を使って実際にコードを投稿してみましょう

エディタ内に「Crayon」と書かれたボタンが表示されるので、クリックしてコードを登録します。

「挿入画面」では「コードのタイトル」や「ソースコードの種類」そして「ソースコード」を入れて、右上の「挿入」ボタンを押せばエディターに挿入されます。自分は普段「タイトル」は入れてません。

完成

プレビューしてブログ上での表示を確認してみましょう。

いかがだったでしょうか？ソースコードを簡単に綺麗に表示させる事が出来ました。読んで頂いてありがとうございました。