サイトにコードやソースを表示したいときの備忘録

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]]のように、最初と最後を"["と"]"で囲めば変換されずにコードを表示することが出来ます。

Copyright© 株式会社Web Agency , 2025 All Rights Reserved.