SyntaxHighlighter

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

2019年2月3日

Categories | ブログ（WordPress)

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

SyntaxHighlighter Evolved とは、

ワードプレス（WordPress）のプラグイン（機能拡張）。

ブログ記事内にソースコード（html・css等）を文字化けすることなく、

きれいに表示できます。

しかし、ある程度サイト作成などのスキルが必要とされ、

素人が簡単に利用できるものではないと思う。

現バージョンは「3.5.0」

WordPress の必須バージョン: 4.2.3以上

導入時のカスタマイズ

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

良くやってしまう失敗として、

テキストエディタでの記述では問題なく利用できるが、

途中でビジュアルエディタに切り替えてしまうと、その機能を果たさなくなる。

つまり、やっぱり文字化けしてしまう。

そこらへん気を付けなければいけない。

ところで本題ですが、

SyntaxHighlighterを導入した数年前、

当初は文字がデカくなってフォントサイズをカスタマイズしましたが、

本体の不定期なアップデートで、その情報が上書きされ消滅してました。

それらを回避するため、いっそのこと子テーマを作ってしまおうかと。

でも、たかだか文字サイズの為に・・・・。

そこで、その都度文字サイズを好みで変更できるように、

ボックス指定することにしました。

※ 因みに「SyntaxHighlighterの設定」で、
「追加のCSSのclass名(複数可能)」がありますが、こちらでは文字サイズ指定は出来ないようです。

結論として、

SyntaxHighlighterのショートコードを「div」で囲む。

こうです。

例01　文字サイズ指定なし

<div>例01　文字サイズ指定なし</div>

例02　文字サイズ指定「12ピクセル」

<div style="font-size: 12px;">例02　文字サイズ指定「12ピクセル」</div>

例03　文字サイズ指定「10ピクセル」

<div style="font-size: 10px;">例03　文字サイズ指定「10ピクセル」</div>

以上

Comment(0) | Trackback(0)

TAGS: 文字サイズ / WordPress / プラグイン / SyntaxHighlighter | 2019年2月3日 |

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日

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