livedoor ブログでソースコード部分を見やすくするため google-code-prettify を導入することにしたので、そのときのメモ。
ブログの管理画面から [ブログ設定] を選び、 [デザイン / ブログパーツ設定] の [カスタムJS] を選ぶ。
そして、[head 内] に以下を追記して、[保存]する。
skin gallaryのスキンを使う場合は以下のようにパラメータを追加する。skin に指定する名前は全部小文字にすること。
以上で準備は完了。
実際に記事を書くときは、以下のようにソースコードを pre タグで囲み、class 属性に prettyprint を指定するだけ。ソースコードの内容から言語を判別し、自動的に見やすく装飾してくれる。
もし、見た目がskin gallaryと違う場合は、使っているテンプレートの css が影響しているので、pre タグを確認する。
ブログの管理画面から [ブログ設定] を選び、 [デザイン / ブログパーツ設定] の [PC] 、[カスタム]を選ぶ。 そうすると css を編集することができるので、pre で検索し、背景色などが設定してあればコメントにすればよい。
また、ついでに pre タグに 「overflow: auto;」を追加しておくと、ソースコードが横長になったとき自動的にスクロールバーを出してくれる。
以上。
ブログの管理画面から [ブログ設定] を選び、 [デザイン / ブログパーツ設定] の [カスタムJS] を選ぶ。
そして、[head 内] に以下を追記して、[保存]する。
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
skin gallaryのスキンを使う場合は以下のようにパラメータを追加する。skin に指定する名前は全部小文字にすること。
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sons-of-obsidian"></script>
以上で準備は完了。
実際に記事を書くときは、以下のようにソースコードを pre タグで囲み、class 属性に prettyprint を指定するだけ。ソースコードの内容から言語を判別し、自動的に見やすく装飾してくれる。
<pre class="prettyprint"> : ここにソースコード : </pre>
もし、見た目がskin gallaryと違う場合は、使っているテンプレートの css が影響しているので、pre タグを確認する。
ブログの管理画面から [ブログ設定] を選び、 [デザイン / ブログパーツ設定] の [PC] 、[カスタム]を選ぶ。 そうすると css を編集することができるので、pre で検索し、背景色などが設定してあればコメントにすればよい。
また、ついでに pre タグに 「overflow: auto;」を追加しておくと、ソースコードが横長になったとき自動的にスクロールバーを出してくれる。
以上。