Crayon Syntax Highlighterを使う
HTMLやCSS・PHPなどの解説サイトで、よくソースやコード例をキレイに表示してくれているサイトがありますよね?
このように表示するには、WordPressなら『Crayon Syntax Highlighter』というプラグインが便利です。プラグインから検索してダウンロードして有効化します。
そのままでは英語表示なので、日本語化したい方はFTPソフトで二つのファイルを削除してください。
削除するファイル
- crayon-syntax-highlighter-ja.mo
- crayon-syntax-highlighter-ja.po
これだけで日本語になります。使い方は投稿画面のテキストエディタにボタンが出ます。
これを押せば設定画面になります。
プログラム言語からサイトに表示したいプログラム言語を選び、コード部分にコードを貼り付けて挿入を押せば完了です。HTMLソースの場合はDefaultで大丈夫でした。もし文字化け(HTML特殊文字こんなやつ⇒<)で表示されるようであれば、テキストエディタのHTML特殊文字のコード部分に、直接ソースは貼り付ければ正常に表示されます。
また、コード表示部分のツールバーが気に入らなければ(けっこう鬱陶しい)、ツールバーの設定部分で『表示しない』を選択すればツールバーが出てこなくすることも出来ます。
プラグインを使わなくても表示することもできる
一部分だけしかコード表示しないから、わざわざプラグインを使う必要がないと考えている方は、普通に表示させることも出来ます。
メモ
ただしそのままソース・コードを貼り付けるだけではそのソース・コードを読んでしまい、反映されてしまいます。
ですので、HTMLのソースの場合はHTML特殊文字に変換してから貼り付けなければいけません。これはこちらのサイトの変換ツールで変換することが出来ます。
ワードプレスのショートコードの場合は、[[st-kaiwa1]会話1[/st-kaiwa1]]のように、最初と最後を"["と"]"で囲めば変換されずにコードを表示することが出来ます。