ソースコード用CSS設定
このエントリーをはてなブックマークに追加

| コメント(0)

ソースコードなどをアップする時に見やすいようにコードの表示方法を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>
 

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

 (上下の空行が入ってしまう現象の原因はわかっていません^^;)

 

参考にC言語のソースだとこんな感じになります。

#include <stdio.h>

int main(void)
{
    printf("Hello Bunchan's page!\n");
}

内容はテキトーです。



同一カテゴリ(ホームページ管理)の最新記事10件

すべての記事の最新記事10件

iTunes Store(Japan)

ブログ記事数

818

プロフィール

すべての記事