Home > サーバ管理 > ［サイト構築中］SyntaxHighlighter解決編

［サイト構築中］SyntaxHighlighter解決編

2009-01-04 (日) 13:32
サーバ管理

Wordpress mu 2.6.5＋テーマVICUNA Ext＋Google版Syntax Highlighter＋Windows Live Writer＋Liver Writer用SyntaxHighlighterの組み合わせて起きていた不具合がほぼ解決しました。

現象は次の2点。

1. <pre name="code" class="～>タグを書いても、ソースコードが色分けされない。
2. VICUNA Extと組み合わせるとソースコードの書式がグチャグチャに崩れる。

1の問題は、Wordpress muがpreタグのname属性とclass属性を勝手に取り除いてしまうせいでした。公式を探った結果、includeフォルダ内にあるkses.phpの中で定義されている関数で修正すればよいことがわかりました。kses.phpは投稿記事中で使用していいタグと属性を決める働きをしています。なおこの現象は個人用のWordpressでは起きないそうです。

'pre' => array(		//preタグの設定を探して
	'class' => array(),	//この行と
	'name' => array(), 	//この行を加える
	'style' => array(),
	'width' => array ()),

2の問題は、olタグやliタグのスタイルの初期値がVICUNAによって変えられてしまうためでした。プラグインフォルダの中からsyntaxhighlighter.cssというファイルを探し、力業でolタグとliタグのmarginやpadding、borderの設定を変えることで解決しました。

.dp-highlighter
{
	font-family: "Consolas", "Courier New", Courier, mono;
	font-size: 12px;
	background-color: #E7E5DC;
	width: 90%;
	overflow: auto;
	margin: 18px 0px 18px 0px;
	padding-top: 1px; /* adds a little border on top when controls are hidden */
	margin-left: 20px;	/*これを追加*/
}
//中略//
.dp-highlighter ol
{
	border-left-width: 0px !important;	/*これを追加*/
	list-style-position: outside !important;	/*これを追加*/
	list-style: decimal; /* for ie */
	list-style: decimal-leading-zero; /* better look for others */
	background-color: #fff;
	margin: 0px 0px 1px 45px; /* 1px bottom margin seems to fix occasional Firefox scrolling */
	color: #5C5C5C;
}
//中略//
.dp-highlighter ol li,
.dp-highlighter .columns div
{
	margin-left: 0 !important;	/*これを追加*/
	margin-top: 0 !important;	/*これを追加*/
	margin-bottom: 0 !important;	/*これを追加*/
	padding: 0;	/*added by ohtsu*/
	border-left: 3px solid #6CE26C;
	background-color: #f8f8f8;
	padding-left: 10px;	/*indent*/
	line-height: 14px;
}

なお、Windows Liver Writerでソースコード付きの記事を編集していると、時々色分けが解除されてグレーになってしまうことがありました。この現象が起きると、その記事は投稿も保存もできなくなってしまいます。ソースコード部分を削除して挿入し直すと何とかなるようです。

Comments:0

Trackbacks:0

Trackback URL for this entry: http://i-libro.net/wpmu/blog/archives/227/trackback
Listed below are links to weblogs that reference: ［サイト構築中］SyntaxHighlighter解決編 from わくわくプログラミング自習室 Blogs

Home > サーバ管理 > ［サイト構築中］SyntaxHighlighter解決編

Search

Feeds

Meta

Return to page top