plugin -> iG:Syntax Hiliter カスタマイズ 2015-09-01
iG:Syntax Hiliter をカスタマイズ その３。
数日前、WordPress 本体のヴァージョンアップのお知らせがきており、それに合わせて更新したら
iG:Syntax Hiliter も更新のお知らせがきたので、更新してみた。
そうしたら、表示が大分変わってしまった・・・ので、再挑戦～。
独自タグの追加
ハイライト設定ファイルへの紐付け
独自に設定したショートタグをプラグインに認識させる方法。
plugins/igsyntax-hiliter/classes/frontend.php
- /**
- * @var Array Contains file names for GeSHi language files associated with expected tag names
- */
- protected $__geshi_language = array(
- 'as' => 'actionscript',
- 'html' => 'html4strict',
- 'js' => 'javascript',
- 'evba' => 'vbnet', ← 追加した独自タグ
- );
このように記述してやることで、独自に設定したショートタグから
plugins/igsyntax-hiliter/geshi
にある、各言語ハイライト設定ファイルへと紐付けることができる。
言語表示文字列への紐付け
独自に設定したショートタグを任意の文字列にて表示させる方法。
plugins/igsyntax-hiliter/classes/frontend.php
- /**
- * @var Array Contains display names for some languages, like C# for csharp, VB.NET for vbnet
- */
- protected $__geshi_language_display = array(
- 'cpp' => 'C++',
- 'cfm' => 'Cold Fusion',
- 'csharp' => 'C#',
- 'vbnet' => 'VB.NET',
- 'as' => 'ActionScript',
- 'c_mac' => 'CMac',
- 'html' => 'HTML',
- 'html4strict' => 'HTML4',
- 'evba' => 'Excel VBA',
- );
外観
今回の CSS ファイルは圧縮してあるので
行番号はなし。
全体
幅とマージン
plugins\igsyntax-hiliter\assets\css\front-end.css
- .syntax_hilite {
- background:#FFFFFF;
- width:98%;
- margin:10px 0px 20px 0px;
- border:1px solid #CCCCCC;
- border-left:none;
- border-right:none
- }
コード部
文字サイズ
plugins\igsyntax-hiliter\assets\css\front-end.css
- .syntax_hilite ol,.syntax_hilite .pre {
- width:90%;
- line-height:1.5em;
- margin-bottom:0px;
- padding-top:5px;
- font-size:1.25em
- }
幅
全体幅を調節したせいか、こちらの幅を狭めておかないと
ハイライト行がはみ出す。
plugins\igsyntax-hiliter\assets\css\front-end.css
- .syntax_hilite ol,.syntax_hilite .pre {
- width:90%;
- line-height:1.5em;
- margin-bottom:0px;
- padding-top:5px;
- font-size:1.25em
- }
ツールバー
文字サイズ
plugins\igsyntax-hiliter\assets\css\front-end.css
- .syntax_hilite .toolbar {
- width:97.5%;
- margin:0px 0px 10px 0px;
- padding:5px 10px 5px 4px;
- background:#EEEEEE;
- font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
- font-size:1em;
- color:#555555
- }