plugin -> iG:Syntax Hiliter カスタマイズ 2015-01-30
2015-09-01 追記
新しい記事：plugin -> iG:Syntax Hiliter カスタマイズ 2015-09-01
ここまで
iG:Syntax Hiliter をカスタマイズ その２。
前回記事
【環境】
WordPress:4.1
iG:Syntax Hiliter:4.3
GeSHi:1.0.8.11
WordPress:4.1
iG:Syntax Hiliter:4.3
GeSHi:1.0.8.11
独自タグの追加
plugins\igsyntax-hiliter\class-ig-syntax-hiliter-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',
- 'as3' => 'actionscript3', ← 追加した独自タグ
- );
表記言語の追加
plugins\igsyntax-hiliter\class-ig-syntax-hiliter-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' => 'HTML4',
- 'html4strict' => 'HTML4',
- 'as3' => 'ActionScript3', ← 追加した言語タイトル
- );
しかし、このままだと全て大文字に変換されて表記されるので、CSS ファイルを修正。
外観
言語名
plugins\igsyntax-hiliter\css\front-end.css
- .syntax_hilite .toolbar .language-name {
- font-weight: bold; width: 18%; text-align: center; /* text-transform: uppercase; を削除 */
- cursor: default;
- }
文字サイズ
Toolbar
plugins\igsyntax-hiliter\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; /* font-size: 0.75em → 1em; */
- }
コード
plugins\igsyntax-hiliter\css\front-end.css
- .syntax_hilite ol, .syntax_hilite .pre {
- width: 94%; line-height: 1.5em;
- margin-bottom: 0px; padding-top: 5px; font-size: 1.2em; /* font-size: 0.85em → 1.2em; */
- }
ハイライト色
plugins\igsyntax-hiliter\class-ig-syntax-hiliter-frontend.php
- if( is_array( $highlight ) ) {
- $geshi->highlight_lines_extra( $highlight ); //show these lines as special
- $geshi->set_highlight_lines_extra_style( 'background-color:#FFFFBC;' ); //set bg color for special lines
- }
ソースべた書きなのねｗ
縞々
偶数行目だけ背景色を付けたい。
plugins\igsyntax-hiliter\class-ig-syntax-hiliter-frontend.php
- $geshi->enable_line_numbers( GESHI_NORMAL_LINE_NUMBERS ); //show line numbers
413行目を下記のように変更。
- $geshi->enable_line_numbers( GESHI_FANCY_LINE_NUMBERS, 2 ); //show line numbers
function enable_line_numbers($flag, $nth_row = 5)
引数は２つ。
$flag
GESHI_NO_LINE_NUMBERS：行番号なし
GESHI_NORMAL_LINE_NUMBERS：行番号あり
GESHI_FANCY_LINE_NUMBERS：行番号と装飾あり
$nth_row = 5
何行毎に装飾を入れるか（省略すると５行毎）
plugins\igsyntax-hiliter\geshi.php
- /**
- * Line number styles for fancy lines
- * @var string
- */
- var $line_style2 = 'font-weight: bold; vertical-align:top;';
ここのスタイルを好きなように。
私は下記のようにした。
- var $line_style2 = 'font-weight: normal; vertical-align:top; background-color: #FBF7FF;';
その他
幅や色、線の太さなど微調整。
しっかし、PHP は、コードハイライトが効いていない気がします。。。X-)