ソース

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

Categories | ブログ(WordPress)

SyntaxHighlighter Evolved(ワードプレス プラグイン)

カスタマイズと使用方法

wordpress 400x248 SyntaxHighlighter Evolved(ワードプレス プラグイン)のカスタマイズと使用方法

 

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

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

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

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

SyntaxHighlighter Evolved 」です。

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

 

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

各コードを記述後、

[html] htmlソース [/html] とか、

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

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

それは、デフォルトの文字サイズが「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日

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

SyntaxHighlighter Evolved 文字サイズを指定する方法

Comment(0) | Trackback(0)

TAGS: / / / | 2013年6月1日 |