取り急ぎ。
Mozzilaのススメ

WordPress：CoolCodeプラグイン

2008.6.3 火曜日

ひとまず、blogの内容的に、ソースコード等を載せることになることは確実だと思われるので、
表示方法を考えてみる。

最初はcssで対応しようかと思っていたけど、
探してみると、コード表示補助のプラグインをいくつか発見。

ひとまずCoolCodeを導入してみる。
こちらからダウンロードして来て、解凍して/wp-content/plugins/にアップロード。
管理画面の「設定」→「プラグイン」で有効化したら使用可能。

記事を投稿する際に
<coolcode>
　[コード]
</coolcode>
と囲むとその部分に適用される。

オプションは３つあって、

  • lang=”言語名”(PHP/ACTIONSCRIPT 等)
  • linenum=”on/off” (行番号の表示/非表示)
  • download=”ファイルのパス”

例えば

  1. <coolcode lang="php">
  2. <?php
  3. echo "Hello World";
  4. ?>
  5. </coolcode>

こんな感じで使用。
言語名のオプションは、つけると、その言語に合わせてコードをカラーリングしてくれる。
無しだとそのまま表示。

現在

* actionscript
* cpp
* css
* diff
* dtd
* html
* java
* javascript
* mysql
* perl
* php
* python
* ruby
* sql
* xml

に対応してるらしい。

とりあえず、download=””のオプションをつけると、ダウンロードのリンクの文字が中国語になってるので、該当部分を探して修正。
coolcode.phpの298行目

$this->blocks[$blockID] = '<div class="hl-title">&#19979;&#36733;: <a href="'

を

$this->blocks[$blockID] .= '<div class="hl-title">Download: <a href="'

に変更。

段々欲が出てきた。
長いソースを貼り付けるとページがもの凄く長くなってしまうので、WP-syntaxのようにスクロールで表示できるようにしてみよう。
DIVタグで囲んで出力するようにして、overflowで制御すればいいかな、と思って軽く考えてたけど、
全部にそれを適用してしまうと、今度は短いコード貼りたいときに困るので、オプションで指定できるように変更してみる。

coolcode.phpのdo_CoolCode関数を

  1. function do_CoolCode($content, $txt, $options)
  2.     {
  3.         global $post;
  4.         $options = str_replace(array("\\\"", "\\\'"), array("\"", "\'"), $options);
  5.         if (preg_match('/lang="(\w*?)"/i', $options, $match)) {
  6.             $lang = $match[1];
  7.         }
  8.         else {
  9.             $lang = "";
  10.         }
  11.         if (preg_match('/linenum="(\w*?)"/i', $options, $match)) {
  12.             $linenum = $match[1];
  13.         }
  14.         else {
  15.             $linenum = "on";
  16.         }
  17.         if (preg_match('/download="(.*?)"/i', $options, $match)) {
  18.             $download = $match[1];
  19.         }
  20.         else {
  21.             $download = "";
  22.         }
  23.         if (preg_match('/scroll="(.*?)"/i', $options, $match)) {
  24.             $scroll = $match[1];
  25.         }
  26.         else {
  27.             $scroll = "";
  28.         }
  29.         $txt = str_replace("\\\"", "\"", $txt);
  30.         $txt = trim($txt);
  31.         $txt = str_replace("\r\n", "\n", $txt);
  32.         $txt = str_replace("\r", "\n", $txt);
  33.         $blockID = $this->getBlockID($content);
  34.         if ($download == "") {
  35.             $this->blocks[$blockID] = '';
  36.         }
  37.         else {
  38.             $this->blocks[$blockID] .= '<div class="hl-title">Download: <a href="'
  39.                 . get_settings('home')
  40.                 . '/wp-content/plugins/coolcode/coolcode.php?p=' . $post->ID
  41.                 . '&amp;download=' . htmlspecialchars($download)
  42.                 . '">' . htmlspecialchars($download) . '</a></div>';
  43.         }
  44.         if (strtolower($scroll) == 'on') {
  45.             $this->blocks[$blockID] .= '<div class="coolcode codeScroll">';
  46.         }else{
  47.             $this->blocks[$blockID] .= '<div class="coolcode">';
  48.         }
  49.  
  50.         $hackphp = false;
  51.  
  52.         if (strtolower($lang) == 'php') {
  53.             if (strpos($txt, '<' . '?') === false) {
  54.                 $txt = '<' . "?php\n" . $txt . "\n?" . '>';
  55.                 $hackphp = true;
  56.             }
  57.         }
  58.  
  59.         if ((strtolower($linenum) == 'on') or (strtolower($linenum) == 'open')) {
  60.             if(!in_array(strtolower($lang), $this->acceptable_lang)) {
  61.                 $this->blocks[$blockID] .= '<div class="hl-surround"><ol class="hl-main ln-show" '
  62.                     . 'title="Double click to hide line number." '
  63.                     . 'ondblclick = "linenumber(this)"><li class="hl-firstline">'
  64.                     . str_replace("\n", "</li>\n<li>", htmlspecialchars($txt))
  65.                     . '</li></ol></div>';
  66.                 $this->blocks[$blockID] = str_replace("<li></li>", "<li>&nbsp;</li>", $this->blocks[$blockID]);
  67.                 $this->blocks[$blockID] = str_replace('<li> ', '<li>&nbsp;', $this->blocks[$blockID]);
  68.             }
  69.             else
  70.             {
  71.                 $options = array(
  72.                     'numbers' => HL_NUMBERS_LI,
  73.                 );
  74.                 $hl =& Text_Highlighter::factory($lang, $options);
  75.                 $this->blocks[$blockID] .= '<div class="hl-surround">' . str_replace($this->hl_class, $this->hl_style, $hl->highlight($txt)) . '</div>';
  76.                 $this->blocks[$blockID] = preg_replace('/<span style=\"[^\"]*?\"><\/span>/', '', $this->blocks[$blockID]);
  77.                 $this->blocks[$blockID] = str_replace('<ol class="hl-main">',
  78.                     '<ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)">',
  79.                     $this->blocks[$blockID]);
  80.                 $this->blocks[$blockID] = str_replace("\"> </span></li>", "\">&nbsp;</span></li>", $this->blocks[$blockID]);
  81.                 $this->blocks[$blockID] = preg_replace('/<li><span style=(.*?)> </si', '<li><span style=\\1>&nbsp;<', $this->blocks[$blockID]);
  82.  
  83.                 if ($hackphp) {
  84.                     $this->blocks[$blockID] = str_replace("<span style=\"color: Blue;\">&lt;?php</span></li>\n<li>", '', $this->blocks[$blockID]);
  85.                     $this->blocks[$blockID] = str_replace('<li><span style="color: Blue;">?&gt;</span></li>', '', $this->blocks[$blockID]);
  86.                 }
  87.             }
  88.         }
  89.         else {
  90.             if(!in_array(strtolower($lang), $this->acceptable_lang)) {
  91.                 $this->blocks[$blockID] .= '<div class="hl-surround"><div class="hl-main">'
  92.                     . str_replace("\n", "<br />", htmlspecialchars($txt))
  93.                     . '</div></div>';
  94.             }
  95.             else
  96.             {
  97.                 $hl =& Text_Highlighter::factory($lang);
  98.                 $this->blocks[$blockID] .= '<div class="hl-surround">' . str_replace("\n", "<br />", str_replace("</pre>", "", str_replace("<pre>", "", str_replace($this->hl_class, $this->hl_style, $hl->highlight($txt))))) . '</div>';
  99.                 
  100.                 if ($hackphp) {
  101.                     $this->blocks[$blockID] = str_replace('<span style="color: Blue;">&lt;?php</span><span style="color: Gray;"><br /></span>', '', $this->blocks[$blockID]);
  102.                     $this->blocks[$blockID] = str_replace('<br /></span><span style="color: Blue;">?&gt;</span>', '</span>', $this->blocks[$blockID]);
  103.                 }
  104.             }
  105.             $this->blocks[$blockID] = str_replace('<br /> ', '<br />&nbsp;', $this->blocks[$blockID]);
  106.         }
  107.  
  108.         // correct the indent
  109.         $this->blocks[$blockID] = str_replace("  ", '&nbsp; ', $this->blocks[$blockID]);
  110.         $this->blocks[$blockID] = str_replace("  ", ' &nbsp;', $this->blocks[$blockID]);
  111.          $this->blocks[$blockID] .= '</div>';
  112.  
  113.         return $blockID;
  114.     }

このように変更。※赤字が追加した箇所
これで、scroll=”" というオプションを認識して、囲むDIVを書き分けるようになった。

あとはcoolcode.cssに、

  1. .coolcode {
  2.     border: 1px solid #666666;
  3.     margin-bottom: 10px;
  4. }
  5. .codeScroll {
  6.     height:400px;
  7. }
  8. /* for IE */
  9. .codeScroll {
  10.   overflow: auto;
  11.   _overflow: scroll;
  12.   padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0);
  13. }
  14.  
  15. .codeScroll ol {
  16.   overflow: visible;
  17. }

と追記（部分的に、WP-syntaxのcssから拝借）
これで、<coolcode scroll=”on”>とすると、スクロールバーが表示されるようになる。

やっつけだけどひとまずこんな感じで。

一応ソース
coolcode-34-c01.zip
※cssとかコード変換の文字色とかも、このサイト用に若干いじっちゃってます。

タグ: | カテゴリー: WordPress |

トラックバックURL

コメント