hm-lab

ソースコードのハイライト表示を実現するために、SyntaxHighlighterプラグインを導入してみました。正確には、拡張版のSyntaxHighlighter Plusプラグインのほうを入れてあります。

ここの環境で利用するには若干のカスタマイズが必要だったので、その方法をログしておきます。

• プラグインをダウンロード・解凍し、wp-content/pluginsディレクトリにアップロードする。
• ダッシュボードの [プラグイン] ページで有効化
• ソースコードを下記の要領で囲って投稿する。langのところは、php, cpp, xml など、こちらのリストの中から適切なものを設定する
  

環境によっては（特にテーマに依存して）、これだけではハイライト表示されない場合があります。その時は、使用中のテーマのfooter.phpを開き、<?php wp_footer(); ?>がなければ追加します。

• テーマのfooter.phpに、<?php wp_footer(); ?>を追加する

      <?php wp_footer(); ?>
      </body>
  </html>
  

さらに、ソースコードの表示領域でずれが発生したり、出したくない横スクロールバーが出てしまう場合は、SyntaxHighlighter.cssを編集して調整します。一例として、今回行った変更を紹介します。

• 横スクロールバーを表示させないようにする

  .dp-highlighter
  {
      font-family: "Consolas", "Courier New", Courier, mono;
      font-size: 12px;
      background-color: #E7E5DC;
      width: 530px;
      margin: 18px 0 18px 0;
      padding-top: 1px;/* adds a little border on top when controls are hidden */
      /* auto を hidden にして横スクロールバーを表示させない */
      /* overflow: auto; */
      overflow: hidden;
  　　　
      /* fixes for IE: "overflow: auto" causes unnecessary vertical bar */
      /* corrects bottom scroll bar overlapping */
      overflow-y: hidden;
      padding-bottom: expression(this.scrollWidth > this.offsetWidth ? '15px' : 'none');
  }
  

• 行番号の表示領域の横幅が狭くて、数字が欠けてしまう問題への対処

  .dp-highlighter ol
  {
      list-style: decimal;/* for ie */
      list-style: decimal-leading-zero;/* better look for others */
      /* 背景色を変更 */
      /* background-color: #fff; */
      background-color: #E7E5DC;
      margin: 0 0 1px 45px;/* 1px bottom margin seems to fix occasional Firefox scrolling */
      /* padding-leftを変更 */
      /* padding: 0; */
      padding-left: 20px;
      color: #5C5C5C;
      white-space: nowrap;
  }
  

• さらに、ずれを隠すのと単なる好みで、領域上部のスタイルを変更

  .dp-highlighter .tools
  {
      padding: 3px 0 3px 10px;
      font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
      color: silver;
      /* [view plain] など、ツール表示部分の背景色を濃くする */
      /* background-color: #f8f8f8; */
      background-color: #E7E5DC;
      padding-bottom: 10px;
      /* ツール表示部分の緑色のラインを消す */
      /* border-left: 3px solid #6CE26C; */
  }
  

ハイライト表示されると、やっぱり見易いですね。
今回のカスタマイズは、なかなか満足のゆくものでした。

【2010/10/9追記】sourcecodeタグの使い方に関する説明の部分が、恐らくSyntaxHighlighterのバージョンアップに依存して、きちんと表示されなくなっていたので修正しました。