ソースコードのカラー表示

これまではソースコードを表示するときに <blockquote><pre> を使っていたのですが、これだと、'<‘ を ‘＆lt;’ にしなくちゃいけなかったり、スタイルシートをいじるにも他の用途と被ってしまって、あまり思い切ったことができませんでした。今回はそういう余計なことを考えなくてもよくなるように、ソースコードをハイライト表示するプラグインを導入したいと思います。

■ SyntaxHighlighter Plus

Release: [Wordpress Plugin] SyntaxHighlighter Plus | Beyond Coding からプラグインをダウンロードしてきます。『syntaxhighlighter-plus』フォルダを丸ごと、サーバの /wp-content/plugins へコピーしてプラグインを有効化しておきます。

■ <blockquote><pre> の見た目

<?php if (get_bloginfo('home') == 'https://dev.satake7.net'  ?>
<?php  || get_bloginfo('home') == 'http://boss.satake7.net') { ?>
  <li class="page_item">
    <a href="http://satake7.net/"><span>to Satake Studio</span></a>
  </li>
  <li class="page_item">
    <a href=""><span>home</span></a>
  </li>
<?php } ?>
<?php wp_list_page('sort_column=menu_order&depth=1&title_li=&' ); ?>

これが今まで通りの表示です。見やすいと言えば見やすいですが。

■ SyntaxHighlighter Plus の見た目



  <li class="page_item">
    <a href="http://satake7.net/"><span>to Satake Studio</span></a>
  </li>
  <li class="page_item">
    <a href=""><span>home</span></a>
  </li>

これがプラグインを適用した表示です。横幅が狭いのがちょっといけてませんが、sidebarが隠れてもいいのであれば、＜div style=”width:700px”＞で囲んでやればいいだけの話ですし問題ないです。

■ 使い方(書き方)

コードを［sourcecode language=’言語’］と［/sourcecode］で囲みます。(［］は半角で)
上の例は［sourcecode language=’html’］と［/sourcecode］でコードを囲んでいます。
私の場合、『bash, c++, c#, css, diff, js, php, plain, text, python, ruby, sql, xml, html』あたりが使用頻度の高い言語になると思います。
※ WordPressの投稿設定で『不正な XHTML を自動で修正する』にチェックが入っているとソースコードに余分なスペースを入れられることがあるので、ソースコードをよく書く場合はこの設定を OFFにしておいたほうがいいでしょう。

■ 参考

■ Satake Studio では

プラグインのインストールは済んでいますので、有効化するだけでご使用いただけます。

/作成者: