Wordpressでソースコードをキレイに表示したい。「iG:Syntax Hiliter 日本語版」導入メモ。

2010.01.19

WordPressでソースコードをキレイに表示したい。「iG:Syntax Hiliter 日本語版」導入メモ。

ソースコードをキレイに表示したいなあと思って「iG:Syntax Hiliter 日本語版」プラグインを入れました。

○iG:Syntax Hiliter 日本語版 - MMRT daily life

［css］［/css］とか［html］［/html］とかでソースを囲むと、ある程度のハイライト表示をしてくれるものです。
対応フォーマットはphp,as3,css,htmlなど、自分が主に使うモノは大丈夫そう。

但し私の環境下ではソース部分の表示が切れてしまったので、「syntax_hilite_css.css」を以下のように。
横幅を「width: 90%;」に、paddingの設定を揃えました。
ソース部分が表示されるようになったのでとりあえずこれで…。

CSS:

.syntax_hilite, li .syntax_hilite {
padding:3px 3px 10px 8px; border:1px solid #303130; background-color:#FEFEFE;
font-size:11px; font-family:'Courier New',Courier,monospace;
/* comment the line below to remove scrolling in code boxes */
overflow:auto; white-space:nowrap;
}
/* change this line to set the width of code box */
.syntax_hilite { width:90%; }
/* change this line to set the width of code box in a list */
li .syntax_hilite { width:90%; }
.igBar, li .igBar {
background-color:#D6D3CE; font-family:courier,arial,verdana;
border-left:1px solid #EEEEEE; border-top:1px solid #EEEEEE;
border-right:1px solid #424142;
padding:0px 3px 0px 8px;
}
/* change this line to set the width of plain text bar above code box */
.igBar { width:90%; }
/* change this line to set the width of plain text bar above code box in a list */
li .igBar { width:auto; }
.igBar a, .igBar a:hover {
margin:0px 5px 0px 10px; font-weight:bold; color:#000000;
text-decoration:none;
}
.syntax_hilite .langName { color:#000000; font-weight:bold; }
.syntax_hilite textarea { margin:0px -5px -2px 0px; border:none; }