plugin -> iG:Syntax Hiliter カスタマイズ

Posted by muchag | Library & PlugIn & AddIn,WordPress | 2010-06-16 (水) 0:26:41
2015-01-30 追記

新しい記事:plugin -> iG:Syntax Hiliter カスタマイズ 2015-01-30

ここまで

iG:Syntax Hiliter をカスタマイズしてみようと思い立っちゃった。

なんでかっていうと

  • どっかのサイトで見た「PLAIN TEXT]の部分がタブっぽくなっているのを真似したい
  • どっかのサイトで見たコード部分の縞々を真似したい
  • 新しい言語を増やしたい

と、早速取り掛かったのはいいけど
iG:Syntax Hiliter のファイル配置を忘れていて苦労したよん・・・。

なんで「geshi.php」なんていうファイル名で動作するのか
ず~~~っと考えること半日 |-)

以前お世話になった
Masayan さんの MMRT DAILY LIFE
のフォルダ構成を見てやっと思い出した。
年だね |-)

では、カスタマイズ開始~

【環境】
[WordPress] 2.9.1
[iG:Syntax Hiliter] 3.5
[GeSHi] 1.0.8.8
「PLAIN TEXT」の部分をタブっぽくしたい
WordPressフォルダ/plugins/ig_syntax_hilite/css/syntax_hilite_css.css

を編集。

  1. .syntax_hilite, li.syntax_hilite {
  2.     padding:3px 3px 10px 8px; border:1px solid #303130; background-color:#FEFEFE;
  3.     font-size:13px; font-family:'Courier New',Courier,monospace;
  4.     /* comment the line below to remove scrolling in code boxes */
  5.     overflow:auto; white-space:nowrap;
  6. }
  7. /* change this line to set the width of code box */
  8. .syntax_hilite { width:500px; }
  9. /* change this line to set the width of code box in a list */
  10. li .syntax_hilite { width:460px; }
  11. .igBar, li.igBar {
  12.     background-color:#D6D3CE; font-family:courier,arial,verdana;
  13.     border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE;
  14.     border-right:1px solid #424142;
  15. }
  16. /* change this line to set the width of plain text bar above code box */
  17. .igBar { width:511px; }
  18. /* change this line to set the width of plain text bar above code box in a list */
  19. li.igBar { width:471px; }
  20. .igBar a, .igBar a:hover {
  21.     margin:0px 5px 0px 10px; font-weight:bold; color:#000000;
  22.     text-decoration:none;
  23. }
  24. .syntax_hilite .langName { color:#000000; font-weight:bold; }
  25. .syntax_hilite textarea { margin:0px -5px -2px 0px; border:none; }
1~10行目は、コードを並べる場所のCSS。

私は、2行目の border属性の色を変更した。

11~19行目が「PLAIN TEXT」と書いてある部分のCSS。

12行目の後ろに「margin-left: 10px;」を加えた。
14行目の「border-right」の色を変更した。
更に後ろに「border-bottom: #333333;」を加えた。
17行目を「width: 110px;」に変更した。

その結果がこのページのコード表である。
 

コード部分を縞々にしたい

以下は、iG:Syntax Hiliter の設定画面で
「行番号色の変更:」オプションを「はい」にした場合だけ有効。

WordPressフォルダ/plugins/syntax_hilite.php

を編集。

  1. $geshi->set_line_style('color:'.IG_LINE_COLOUR_1.';', 'color:'.IG_LINE_COLOUR_2.';', true);

ここの

‘color:’.IG_LINE_COLOUR_2.’;’

の ;(セミコロン)の後ろに

background-color: 色指定;

を付け足す。

結果は

  1. $geshi->set_line_style('color:'.IG_LINE_COLOUR_1.';', 'color:'.IG_LINE_COLOUR_2.'; background-color: #eef9ff;', true);

 

新しい言語を増やしたい

Actionscript は本体だけでなく、Flash Lite もあり
それぞれがヴァージョンによって仕様が大きく異なる。
もちろん、他の言語もそうだ。

だから、同じ言語でもヴァージョン別の表記もしたいし
Excel VBA も表記できるようにしたい。
(リンク先はVBにしかできないけどね~)

そこで以下をを編集。

WordPressフォルダ/plugins/syntax_hilite.php
  1. switch($mType) {
  2.     case "as":
  3.         $mType = "actionscript";
  4.         $mTypeShow = "Actionscript";
  5.         break;
  6.     case "cpp":
  7.         $mType = "cpp";
  8.         $mTypeShow = "C++";
  9.         break;
  10.     case "js":
  11.         $mType = "javascript";
  12.         $mTypeShow = "JavaScript";
  13.         break;
  14.     case "csharp":
  15.         $mType = "csharp";
  16.         $mTypeShow = "C#";
  17.         break;
  18.     case "mysql":
  19.         $mType = "mysql";
  20.         $mTypeShow = "MySQL";
  21.         break;
  22.     case "vb":
  23.         $mType = "vb";
  24.         $mTypeShow = "Visual Basic";
  25.         break;
  26.     case "vbnet":
  27.         $mType = "vbnet";
  28.         $mTypeShow = "VB.NET";
  29.         break;
  30.     default:
  31.         $mType = $mType;
  32.         $mTypeShow = strtoupper($mType);
  33.         break;
  34. }

この部分で言語指定をしているので、ここに増やしたい言語を記述する。

私は試しに以下を挿入してみた。

  1. case "evba":
  2.     $mType = "vb";
  3.     $mTypeShow = "Excel VBA";
  4.     break;

するとこの記事のように

  1. ActiveSheet.Protect UserInterfaceOnly:=True

Excel VBA と表記されたコード表を表示できた 🙂
(いまどきは vb よりも vbnet にした方がよかったのかな・・・)

ちなみに

case のところは、投稿時にコードを括るタグを。

$mType のところは
WordPressフォルダ/plugins/ig_syntax_hilite/geshi/ にある .php ファイルの名前を。

$mTypeShow のところは、自分が表記したい言語名を。

つまり、$mType 以外は好きに決められる。
また、既存の部分も $mType 以外は自由に変更できる。

これを利用して

iG:Syntax Hiliter で Actionscript 3.0 を表示する

iG:Syntax Hiliter は v3.5 が最新版だが
上の一覧を見てもわかるように Actionscript 3.0 には対応していない。

グーグル先生に聞いてみると、どなたかのブログで紹介していたみたいなんだけど
どこでリンクをクリックしても 「このドメインは売り出し中です」 って出て見ることができない。

そこで iG:Syntax Hiliter v3.5 は GeSHi engine(v1.0.7.6) を利用しているとのことなので
本家 GeSHi へ行ってみた。

すると 2010-06-15現在 v1.0.8.8 とのこと。
言語が15個増えて、合計177個。 え?w
そ、そんなにたくさん? %-)

まぁ いっか。
ありがたくDLさせていただいて中身を見る。

geshi┬contrib
    ├docs
    └geshi ・・・ この中に本当にたくさんのファイルががががが・・・

おー! あったあった。
1階層目のgeshiフォルダの中に

geshi/geshi/actionscript3.php

問題はこの後どうすればいいか・・・。

と考えても仕方がないので、Webサーバ側のバックアップを取ってから
1階層目にある geshi.php と geshiフォルダを

WordPressフォルダ/plugins/ig_syntax_hilite/

へUL。

動かしてみる・・・見た目問題ない・・・問題が出たらリストアすることにしよう・・・。

あ、

WordPressフォルダ/plugins/syntax_hilite.php

に、Actionscript 3.0 を追加しないとね。
 

フォント色やスタイルを変更したい

FlexAndroid を始めて
Eclipse を利用するようになった。

これによって、GeSHi 様によって用意されているスタイルとは異なるものになってしまった。

そこで Eclipse のスタイルを導入するために

ig_syntax_hilite/geshi/java5.php

を変更することにした。

念のため java5.php は残して同一ファイルを別名で保存したのだが
ここで1つ問題が起きた。

スタイルが全く反映されない。。。

原因は、ファイル名に 英字大文字 を利用していたせいらしい。

Library & PlugIn & AddIn,WordPress | 2010-06-16 (水) 0:26:41 |

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment