2012/05/21

Bloggerでpreタグ内をコマンドプロンプトっぽく表示

Bloggerでソースコードをハイライトするには,
google code prettify (https://code.google.com/p/google-code-prettify/)
が使えますが
前の記事のようにlinuxのコマンドをべたべた貼るだけの記事では
そのままでは使えませんよね.
#から始まる文がコメント扱いになったり.

ということでこれは使わずに,
<pre></pre>で囲んだ部分をコマンドプロンプトっぽく表示する.

テンプレート→カスタマイズ→アドバンス→CSSを追加
ここに次の文を入力する.
pre {
    margin: 0px 0px 0px 0px;
    padding: 5px 0px 5px 5px;
    border: 1px solid #7A7A7A;
    background-color: #000000;
    color: #A9A9A9;

    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}
ブログに適用を押す.

参考サイト
http://xelalko.blogspot.jp/2011/12/blogger-css.html
http://blog.daichifive.com/archives/142

google code prettify でも<pre>タグを使う場合,
共存は面倒かもしれませんが.
<code>タグも使えるので,使い分けすれば良いかもですね.

0 件のコメント:

コメントを投稿