SyntaxHighlighter Evolved（ワードプレスプラグイン）のカスタマイズと使用方法

2013年6月1日

Categories | ブログ（WordPress)

SyntaxHighlighter Evolved（ワードプレスプラグイン）

カスタマイズと使用方法

ブログ（WordPress）の記事に、ソースコードを書く事がたまにあります。

しかし、投稿し公開すると半角記号が全角に自動変換され、

文字化けしてしまいます。

そこで、ソースコードを見やすく正確に表示させるプラグインを導入しました。

「 SyntaxHighlighter Evolved 」です。

ダッシュボードのプラグイン＞新規追加にて検索し、インストールし有効化するだけ。

私が良く使うコードは、「html」「php」「css」 ですが、

各コードを記述後、

[ｈｔｍｌ]　ｈｔｍｌソース　[/ｈｔｍｌ]　とか、

[ｐｈｐ]　ｐｈｐ関数　[/ｐｈｐ]で囲むだけです。

簡単に見やすく表示されるのはいいのですが、ちょっと難点があります。

それは、デフォルトの文字サイズが「1em」に設定してあるので、

実際の文字がでっかくなってしまいます。

任意設定では、文字サイズ指定は備わっていません。

そこで、自力でカスタマイズを試み、文字サイズを12ピクセルに書き換えました。

その方法は、下記ファイル（スタイルシート）を変更します。

plugins＞syntaxhighlighter＞syntaxhighlighter3＞styles＞shCoreDefault.css

50行目あたりを変更

変更前

box-sizing: content-box !important;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 1em !important;
min-height: inherit !important;
min-height: auto !important;
}

box-sizing: content-box !important;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 12px !important;
min-height: inherit !important;
min-height: auto !important;
}

念のために、こちらのファイルも「12ピクセル」に変更しました。

plugins ＞ syntaxhighlighter ＞ syntaxhighlighter2 ＞ styles ＞ shCoreDefault.css

実は、これらのカスタマイズは、一時の付け焼刃に過ぎなかった。

アップデートされるといじった部分が上書きされ、消されてしまうから。

追伸 2019年2月3日

後に別の方法で文字サイズを指定することにしました。