タグ「WordPress」の一覧

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 | コメント(0) »

取り急ぎ。

2008.6.3 火曜日

まだカスタマイズ途中な感じだったけど、
なかなか時間が取れず作業が進まない間にドンドンネタが流れて行くので、取り急ぎ開設。

仕事で、Movable TypeのカスタマイズでのblogやCMSなんかの話もまだまだ多いので、
備忘録がてら自分のサイトもMTのblogにしちゃうか、色々変わったことも試せるし、みたいな事を考えてインストールしてみたけど、

とりあえず、このサーバじゃすんごく重い…。
管理画面表示するのに10秒くらい待たないといけないほど。
これじゃ使い物にならない、ってことで、mod_perlで高速化したりして、かろうじて使用に耐えるかな…というレベルにはなったんだけど、なんだかしっくりいかず、
カスタマイズも色々と手間がかかるし、一旦保留。
「そういや、まだWordPressってまだ手を出してないなぁ」
と言うことで急遽WordPressに変更。
こちらは、PHPベースで、シンプルな分カスタマイズもしやすい感じ。
PHPソースを直接触ってカスタマイズするので、開発者な人には凄くいいかもしれない。

まだ作業途中でソースとか汚いけど、一応必要最低限な機能は揃ったので、後は追々。
あとは、三日坊主病の発病に気をつけないと。

タグ:, , | カテゴリー: その他 | コメント(0) »