Hitoyume: Bloggerでコマンドラインとソースコードの書き方

2013年3月10日日曜日

Bloggerでコマンドラインとソースコードの書き方

今までもMacやLinuxの設定とかで、コンソール画面のコピーやソースコードを貼り付けたりしてました。
ただ、コピペしてただけじゃ分かりにくいので、preタグを使っていい感じに表示されるように設定した方法をまとめておく。

cssでコンソールっぽく表示

CSSを追加して、コンソール表示にしたい箇所のpreタグを定義しておく。
テンプレート→カスタマイズ→アドバンス→CSSを追加でCSS編集画面を開く。
以下のコードを追加

pre.commandline {
    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;
}

あとはブログの記事を作成するとき、表示したい箇所を以下のように書いておけば大丈夫です。（HTMLモードの画面で編集すること）

<pre class="commandline">
ここにコマンドとかを埋め込む
</pre>

Google Code Prettifyでソースコードを見やすく表示

こっちはややめんどくさい手順でした。

1. Google Codeからコピペ

レイアウトから（好きな場所で良いので）「ガジェットの追加」を選択し、「HTML/JavaScript」を作って、そこに張り付けます。タイトルは不要です。

<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script>prettyPrint();</script>

2. CSSファイルを貼り付ける

TemplateページでHTMLを編集します。テンプレート→HTMLの編集を選択し、末尾の</head>の手前に以下のコードを貼り付けます。

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css' />

3. CSSを追記する

テンプレート→カスタマイズ→アドバンス→CSSを追加でCSS編集画面を開く。

pre.prettyprint {
  width: 580px;
  overflow: auto;
}

あとはブログの記事を作成するとき、表示したい箇所を以下のように書いておけば大丈夫です。（HTMLモードの画面で編集すること）

<pre class="prettyprint">
ここにソースコードとかを埋め込む
</pre>

追記：行数を表示させたい場合は、classにlinenumsを追加します。

<pre class="prettyprint linenums">
ここにソースコードとかを埋め込む
</pre>

ただ、デフォルトでは5行ずつしか数字が振られないらしい。
jsをカスタマイズして表示させてる方法もあるけど、自前でアップロードする必要があるため、ここでまとめた方法ではできませんので参考を見て下さい。。

参考１
http://gdgdblg.blogspot.jp/2012/05/bloggerpre.html
参考２
http://hatokaze.blogspot.jp/2011/12/bloggergoogle-code-prettify.html
参考３
http://tmlife.net/programming/javascript/google-code-prettify-lines.html

Hitoyume