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

Posted by muchag | Library & PlugIn & AddIn,WordPress | 2015-01-30 (金) 11:47:43
2015-09-01 追記

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

ここまで

iG:Syntax Hiliter をカスタマイズ その2。
前回記事

【環境】
WordPress:4.1
iG:Syntax Hiliter:4.3
GeSHi:1.0.8.11
独自タグの追加
plugins\igsyntax-hiliter\class-ig-syntax-hiliter-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.     'as3' => 'actionscript3', ← 追加した独自タグ
  9. );

 

表記言語の追加
plugins\igsyntax-hiliter\class-ig-syntax-hiliter-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' => 'HTML4',
  12.     'html4strict' => 'HTML4',
  13.     'as3' => 'ActionScript3', ← 追加した言語タイトル
  14. );

しかし、このままだと全て大文字に変換されて表記されるので、CSS ファイルを修正。

外観
言語名
plugins\igsyntax-hiliter\css\front-end.css
  1. .syntax_hilite .toolbar .language-name {
  2.     font-weight: bold; width: 18%; text-align: center; /* text-transform: uppercase; を削除 */
  3.     cursor: default;
  4. }

 

文字サイズ
Toolbar
plugins\igsyntax-hiliter\css\front-end.css
  1. .syntax_hilite .toolbar {
  2.     width: 97.5%; margin: 0px 0px 10px 0px; padding: 5px 10px 5px 4px; background: #EEEEEE;
  3.     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 1em; /* font-size: 0.75em → 1em; */
  4. }
コード
plugins\igsyntax-hiliter\css\front-end.css
  1. .syntax_hilite ol, .syntax_hilite .pre {
  2.     width: 94%; line-height: 1.5em;
  3.     margin-bottom: 0px; padding-top: 5px; font-size: 1.2em; /* font-size: 0.85em → 1.2em; */
  4. }

 

ハイライト色
plugins\igsyntax-hiliter\class-ig-syntax-hiliter-frontend.php
  1. if( is_array( $highlight ) ) {
  2.     $geshi->highlight_lines_extra( $highlight );    //show these lines as special
  3.     $geshi->set_highlight_lines_extra_style( 'background-color:#FFFFBC;' ); //set bg color for special lines
  4. }

ソースべた書きなのねw
 

縞々

偶数行目だけ背景色を付けたい。

plugins\igsyntax-hiliter\class-ig-syntax-hiliter-frontend.php
  1. $geshi->enable_line_numbers( GESHI_NORMAL_LINE_NUMBERS );   //show line numbers

413行目を下記のように変更。

  1. $geshi->enable_line_numbers( GESHI_FANCY_LINE_NUMBERS, 2 ); //show line numbers

 

function enable_line_numbers($flag, $nth_row = 5)

引数は2つ。
$flag
GESHI_NO_LINE_NUMBERS:行番号なし
GESHI_NORMAL_LINE_NUMBERS:行番号あり
GESHI_FANCY_LINE_NUMBERS:行番号と装飾あり
 
$nth_row = 5
何行毎に装飾を入れるか(省略すると5行毎)
 

plugins\igsyntax-hiliter\geshi.php
  1. /**
  2.  * Line number styles for fancy lines
  3.  * @var string
  4.  */
  5. var $line_style2 = 'font-weight: bold; vertical-align:top;';

ここのスタイルを好きなように。

私は下記のようにした。

  1. var $line_style2 = 'font-weight: normal; vertical-align:top; background-color: #FBF7FF;';

 

その他

幅や色、線の太さなど微調整。
 
しっかし、PHP は、コードハイライトが効いていない気がします。。。X-)

Library & PlugIn & AddIn,WordPress | 2015-01-30 (金) 11:47:43 |

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

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment