Home > WordPress > [wordpress]どうやってコードを表示するか?

[wordpress]どうやってコードを表示するか?

前提として、テーマはwp.Vicuna Extを使っている。

まず大きな問題は、エントリーの内容がHTML上インデントして表示されてしまっていて、このままcodeタグやpreタグを適用してもうまく表示できるはずが無いということ。

これは、テンプレートをいじって解消することにした。
function.phpの中に、indentを設定する箇所が2カ所ありこれを修正。
indent_entry_bodyとreplace_entry_bodyのそれぞれ冒頭。

次に、iG:Syntax Hiliterを試してみる。
うーん、うまくいかない。どうやら行をol & liタグで表しているんだが、liの中のdivタグがブロック要素になっていて改行されてしまっている様子。cssをいじってみた。
具体的には「div.syntax_hilite ol li div」に「display:inline;」を適用。
うまくいったぽいけど、フォントの問題なのか分からないが微妙にインデントがずれて表示されて気持ち悪い。
特にPythonには。

で、codeタグを試す。
これはこれでうまくいかない。
まずはスタイルを適用する。(<code>タグ内のスペースを表示させる
smartCanvas/1-element.cssに以下を適用。
code {
font-family: monospace;
}
code {
color: #333;
margin: 15px 5px 0 10px;
padding-left: 10px;
border-left: 5px solid #ddd;
white-space: pre;
display: block;
}

なんとか表示できたっぽいけど、変なところに改行が入る。
空行があると、ご丁寧にそこでcodeタグを終了してしまうように見える。

仕方が無いので、空行のところに全角スペースを埋めていく。

なんとかごまかした。

とはいえ根本対策を考えたいなー。

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://blog.joyfullife.jp/archives/2009/01/16023908.php/trackback
Listed below are links to weblogs that reference
[wordpress]どうやってコードを表示するか? from 30からのBlog

Home > WordPress > [wordpress]どうやってコードを表示するか?

Search
Feeds
Meta

Return to page top