Syntax Highlighterのフォントサイズの件。

Tue, 09 Feb 2010 04:32:46 +0000

Syntax Highlighterを導入したはイイが、文字ソース部分だけなぜかフォントサイズがでかくなってしまい、むーん。。。
いやまぁ、完全にテーマ本体のcss設計のせいなのですが。とりあえずは対処法。

生成されるソースを見ると、


　なんちゃらかんちゃら

という訳で、「syntaxhighlighter」というクラス名でフォントサイズを制御している模様。
そのありかをチェックすると、「syntax-highlighter/css/shCore.css」の22行目。

.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span,
.syntaxhighlighter .bold,
.syntaxhighlighter .italic,
.syntaxhighlighter .line,
.syntaxhighlighter .line .number,
.syntaxhighlighter .line .content,
.syntaxhighlighter .line .content .block,
.syntaxhighlighter .line .content .spaces,
.syntaxhighlighter .bar,
.syntaxhighlighter .ruler,
.syntaxhighlighter .toolbar,
.syntaxhighlighter .toolbar a,
.syntaxhighlighter .toolbar a:hover
{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: none;
	text-align: left;
	float: none;
	vertical-align: baseline;
	position: static;
	left: auto;
	top: auto;
	right: auto;
	bottom: auto;
	height: auto;
	width: auto;
	line-height: normal;
	font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
}

なーんてなっておりまして……。
下手にパーセンテージを小さくしようものなら、入れ子構造でエラいこっちゃ。

で。その次にあったのが。

.syntaxhighlighter
{
	width: 100%;
	margin: 1em 0 1em 0;
	padding: 1px; /* adds a little border on top and bottom */
	position: relative;
	overflow: auto;
}

ここだったら、クラス単体での設定が可能。
という訳で、以下のように書き加えてみました。

.syntaxhighlighter
{
	width: 100%;
	margin: 1em 0 1em 0;
	padding: 1px; /* adds a little border on top and bottom */
	position: relative;
	overflow: auto;
	font-size: 85%;
	max-height:200px;
}

「font-size:85%」というのは、

タグのサイズに準拠。
ついでに「max-height」指定をカマして、ずらずら長いソースを収納したという手筈でございます。

しっかし……今後、アップグレードする度に書き換えなきゃいけないかと思うとorz。
極力プラグイン本体の内容はいぢりたくないんだよね……(..;)。

Syntax Highlighter for WordPress ...
All in One SEO Pack 折角ブログを立ち上げるんなら、皆さんに見て頂きたい訳で。それには当然、検索エンジンの上位に載っかるコトが先決。そこで必須になってくるのが「All in One SEO Pack」。タイトルやMETAタグの内容をページ [...]...

関連記事はYARPP関連記事プラグインによって表示されています。

Syntax Highlighter for WordPress

Sat, 06 Feb 2010 07:07:32 +0000

技術系ブログをやる場合、結構頭をひねるのがソースの表示方法。
別に、フツーに

タグでくくっちまえばイイという話もありますが。
殆どデフォルトと化しているのが、Javascriptライブラリの「Syntax Highlighter」。
そのWordpressのplug-inの１つが、「Syntax Highlighter for WordPress」でございます。

同じような意図を持ったplug-in、実は色々あるのですが、これを選んだ理由は主に２つ。

開発者が日本語であること。
生成されるソースがdiv/spanベースであること

まず、日本発plug-inというコトで、ありかは「WordPress Plugins/JSeries」。
「Syntax Highlighter for WordPress (ソース整形表示)」にございます。
大まかな話はそちらに記載してあるので、インストール方法や使い方を知るために、わざわざ英語の長文読解にチャレンジしなくても良いし、改めてGoogle先生に尋ねる必要もなし。
Wordpress.orgの「Plugin Directory」に登録されていない分、アップデートしても自動更新されないという制約はつきますが、まぁその辺はイイでしょう。
アップデート情報を知るのには、専用plug-inの「JSeries Notifer」を入れるという手があります。

で。生成されるソースとは何ぞや。
とりあえず、実験してみましょう。

この部分のソースを見てみると……。

<?php
	$year = date('Y');
	$month = date('m');
	$day = date('d');
	print "ようこそ！\n";
	print "今日は".$year. "年".$month."月".$day."日です。\n";
?>

となっているのですが、FirebugでJavascriptによって見栄えを考えて生成し直したソースを見てみると……。


	
		プレインテキスト印刷?
	
	
		1.

		2.$year=date('Y');

		3.$month=date('m');

		4.$day=date('d');

		5.print"ようこそ！¥n";

		6.print"今日は".$year."年".$month."月".$day."日です。¥n";

		7.

うぎゃあっ(>_<)ヽ以外の何ものでもありません。但し、各パーツはspan/codeと、W3C上では一応問題のない構造になっています。 Wordpress.orgの「Plugin Directory」で「SyntaxHighlighter」を検索してみると、「SyntaxHighlighter Evolved」っつーのが真っ先に上がって、過去ログ見たらかなり老舗ぽかったのでありますが、なぜか自動生成、タグでやってしまってるのですね。さすがに今時、コレはないんじゃなかろーか……。という訳で。とりあえずはコレで、カッコがついた訳でございます。 Related posts: Syntax Highlighterのフォントサイズの件。 Syntax Highlighterを導入したはイイが、文字ソース部分だけなぜかフォントサイズがでかくなってしまい、むーん。。。いやまぁ、完全にテーマ本体のcss設計のせいなのですが。とりあえずは対処法。生成される [...]... 関連記事はYARPP関連記事プラグインによって表示されています。

SEVENTH HEAVEN » SyntaxHighlighter

Syntax Highlighterのフォントサイズの件。

Syntax Highlighter for WordPress