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

Posted by muchag | Library & PlugIn & AddIn,WordPress | 2015-09-01 (火) 16:52:52

iG:Syntax Hiliter をカスタマイズ その3。
数日前、WordPress 本体のヴァージョンアップのお知らせがきており、それに合わせて更新したら
iG:Syntax Hiliter も更新のお知らせがきたので、更新してみた。
そうしたら、表示が大分変わってしまった・・・ので、再挑戦~。

前回記事

【環境】
WordPress:4.3
iG:Syntax Hiliter:5.0
GeSHi:1.0.8.11
独自タグの追加
ハイライト設定ファイルへの紐付け

独自に設定したショートタグをプラグインに認識させる方法。

plugins/igsyntax-hiliter/classes/frontend.php
  1. /**
  2.  * @var Array Contains file names for GeSHi language files associated with expected tag names
  3.  */
  4. protected $__geshi_language = array(
  5.     'as' => 'actionscript',
  6.     'html' => 'html4strict',
  7.     'js' => 'javascript',
  8.     'evba' => 'vbnet',        ← 追加した独自タグ
  9. );

このように記述してやることで、独自に設定したショートタグから

plugins/igsyntax-hiliter/geshi

にある、各言語ハイライト設定ファイルへと紐付けることができる。

言語表示文字列への紐付け

独自に設定したショートタグを任意の文字列にて表示させる方法。

plugins/igsyntax-hiliter/classes/frontend.php
  1. /**
  2.  * @var Array Contains display names for some languages, like C# for csharp, VB.NET for vbnet
  3.  */
  4. protected $__geshi_language_display = array(
  5.     'cpp'         => 'C++',
  6.     'cfm'         => 'Cold Fusion',
  7.     'csharp'      => 'C#',
  8.     'vbnet'       => 'VB.NET',
  9.     'as'          => 'ActionScript',
  10.     'c_mac'       => 'CMac',
  11.     'html'        => 'HTML',
  12.     'html4strict' => 'HTML4',
  13.     'evba'        => 'Excel VBA',
  14. );
外観

今回の CSS ファイルは圧縮してあるので
行番号はなし。

全体
幅とマージン
plugins\igsyntax-hiliter\assets\css\front-end.css
  1. .syntax_hilite {
  2. background:#FFFFFF;
  3. width:98%;
  4. margin:10px 0px 20px 0px;
  5. border:1px solid #CCCCCC;
  6. border-left:none;
  7. border-right:none
  8. }
コード部
文字サイズ
plugins\igsyntax-hiliter\assets\css\front-end.css
  1. .syntax_hilite ol,.syntax_hilite .pre {
  2. width:90%;
  3. line-height:1.5em;
  4. margin-bottom:0px;
  5. padding-top:5px;
  6. font-size:1.25em
  7. }

全体幅を調節したせいか、こちらの幅を狭めておかないと
ハイライト行がはみ出す。

plugins\igsyntax-hiliter\assets\css\front-end.css
  1. .syntax_hilite ol,.syntax_hilite .pre {
  2. width:90%;
  3. line-height:1.5em;
  4. margin-bottom:0px;
  5. padding-top:5px;
  6. font-size:1.25em
  7. }
ツールバー
文字サイズ
plugins\igsyntax-hiliter\assets\css\front-end.css
  1. .syntax_hilite .toolbar {
  2. width:97.5%;
  3. margin:0px 0px 10px 0px;
  4. padding:5px 10px 5px 4px;
  5. background:#EEEEEE;
  6. font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  7. font-size:1em;
  8. color:#555555
  9. }
Library & PlugIn & AddIn,WordPress | 2015-09-01 (火) 16:52:52 |

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

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment