2015.06.09 [火] WordPressでCrayon Syntax Highlighterプラグイン
このブログでは、HTMLやCSS, JavaScriptなどのコードを使って、説明がしたい場合、以前書いた「canvas要素でパーティクル vol.2」の記事のように、Syntax Highlighterを利用しています。pre要素やcode要素でも、そのまま表示されますが、Syntax Highlighterなどを使うと要素や属性などが色分けされたり、表示するFontが変更されたりと、わかりやすい表示ができるようになります。
現在、1年生に書いてもらっている「WF1でBLOG 2015」は、WordPressを利用していますので、同じようにコードのスタイルを変更するためのプラグイン「Crayon Syntax Highlighter」をインストールしてあります。今後、コードの解説などを書く機会もありますので、簡単な使用の仕方を書いておきます。
インストールの仕方などは、WordPressのプラグインディレクトリーからダウンロードして、FTPでアップロードしてインストールするか、ダッシュボードのプラグインからインストールしてください。
インストールが成功すると、プラグインメニューにCrayon Syntax Highlighterが表示されます。設定をクリックすると、デフォルトの仕様が設定できるようになっていますが、今回は触らずデフォルトの設定で利用します。
あとは、記事を書くときに「投稿の編集」画面のテキストエディターの上部に“crayon”ボタンが設置されていますので、ソースコードを記事内に表示したい場合は、このボタンを押します。
コードを挿入したい場所にカーソルを入れて、crayonボタンを押すとモーダルでウィンドウが開きます。コードフォームの中に表示したいコードを書きます。今回は、<!DOCTYPE html>と記入しました。
上部の挿入ボタンを押せば、
< !DOCTYPE htm>
とpre要素にclassを追加し、< >を文字実態参照に変換して、テキストエディターに挿入されます。エディターで変更した部分は他の記事に影響はしないので、たとえば同じ記事内でも違う設定で挿入することが可能です。
使用すると重くなるなど影響もありますが、「Crayon Syntax Highlighter」使う使わないにかかわらず、コードを区別して表示することで、わかりやすい記事にしたいですね。
参考：Crayon Syntax Highlighter - ソースコードを記事上で綺麗に表示できるWordPressプラグイン - ネタワン
