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

これまではソースコードを表示するときに <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 の見た目

[sourcecode language=’html’]

  • to Satake Studio
  • home
  • [/sourcecode]
    これがプラグインを適用した表示です。横幅が狭いのがちょっといけてませんが、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 では

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

    0 返信

    返信を残す

    Want to join the discussion?
    Feel free to contribute!

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です