plugin -> iG:Syntax Hiliter カスタマイズ 2015-01-30
新しい記事:plugin -> iG:Syntax Hiliter カスタマイズ 2015-09-01
iG:Syntax Hiliter をカスタマイズ その2。
前回記事
WordPress:4.1
iG:Syntax Hiliter:4.3
GeSHi:1.0.8.11
- /**
- * @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', ← 追加した独自タグ
- );
- /**
- * @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 ファイルを修正。
- .syntax_hilite .toolbar .language-name {
- font-weight: bold; width: 18%; text-align: center; /* text-transform: uppercase; を削除 */
- cursor: default;
- }
- .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; */
- }
- .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; */
- }
- 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
- }
ソースべた書きなのねw
偶数行目だけ背景色を付けたい。
- $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)
引数は2つ。
$flag
GESHI_NO_LINE_NUMBERS:行番号なし
GESHI_NORMAL_LINE_NUMBERS:行番号あり
GESHI_FANCY_LINE_NUMBERS:行番号と装飾あり
$nth_row = 5
何行毎に装飾を入れるか(省略すると5行毎)
- /**
- * 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-)