「NP_Geshi」 CSSでコードハイライトをMIFES風に
- 投稿日 : 2007-05-02, 22:38
- 最終更新日時 : 2010-12-21 17:56:35（履歴）
- タグ（Nucleus / NucleusPlugin / CSS）
- カテゴリ（Nucleus Plugin）
- 記し人（luvsic）[PDF]
- 閲覧数（9735）
NP_Geshi
いろいろな種類のコードを片っ端からハイライト表示してくれるNucleusプラグイン。
[-tm-http://wakka.xiffy.nl/Geshi/-]MIFES風 code CSS
結構時間かかった。
IEのhaslayoutを有効にするのにheight:1%;を指定したときに、margin:15px 0;とかがあるとOperaで差異が出る、ふむ～･･･ というわけでzoom:1;って便利だなと思った。
/* NP_Geshi for MIFES blue style (+) Luvsic */
pre.code {
zoom: 1;
margin: 5px 0 15px;
padding: 0;
letter-spacing:0;
color: #00017D;
font-family: "ＭＳ ゴシック", arial, 'Lucida Grande', monospace;
font-size: 12px;
line-height: 1.4;
background: #7788CC;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS3 */
word-wrap: break-word; /* IE 5.5+ */
}
pre.code ol {
margin:0;
padding:0 0 0 3em;
border: 1px solid #283243;
}
pre.code ol li {
margin: 0;
padding: 0;
list-style-position:outside;
list-style-type: decimal ! important;
color: #EEEEEE;
border-bottom:1px solid #0b308f;
}
pre.code ol li div {
margin: 0;
padding: 0 0 0 0.6em;
color: #FFFFFF;
font-weight: normal;
background: #00007F;
}
pre.code .kw1 {color: #40FF40;}
pre.code .kw2 {color: #FF40FF; font-weight: bold;}
pre.code .kw3 {color: #ffff00;text-decoration:underline;}
pre.code .kw4 {color: #f63333;}
pre.code .co1, pre.code .co2, pre.code .coMULTI {color: #808080;}
pre.code .es0 {color: #CC99FF; font-weight: bold;}
pre.code .br0 {color: #66cc66;}
pre.code .st0 {color: #80FFFF;}
pre.code .nu0 {color: #ff33ff;}
pre.code .me0 {color: #006600;}
確認済ブラウザ
- Firefox2
- IE6
- IE7
- Opera9
※windows環境、MSゴシック環境のみ。
No comments yet