ソースコード用CSS設定

ソースコードなどをアップする時に見やすいようにコードの表示方法をCSSに設定します。

まずは小粋空間さんのページを参考に<pre>タグと<code>タグの組み合わせでCSSを設定しました。

こんな設定にしました。（IE7のCSSハックも入れてます）

pre {
margin: 10px 10px 0px;
padding: 10px;
background: #ccffcc;
border: 2px solid #9999cc;
font-size: 90%;
line-height: 1.5;
width: 95%;
overflow: scroll;
}
html > body pre {
overflow: auto;
}
*:first-child+html pre {
overflow: scroll;
}

使うときは記事内で以下のように書きます。

私のようにCKEditorの場合は、リッチテキストモードではなく、フォーマットをなしにした状態で入れます。

<pre>
<code>
ここにソースコードなどを書きます。
</code></pre>
<p> 


※上記みたいにタグを入れたい箇所は中身のタグを無効化させるために<xmp></xmp>でくくります。

　（上下の空行が入ってしまう現象の原因はわかっていません＾＾；）

 

参考にＣ言語のソースだとこんな感じになります。
#include <stdio.h>
int main(void)
{
printf("Hello Bunchan's page!\n");
}


内容はテキトーです。
Facebook
twitter
Copy