[Blogger] 記事にソースコードを記述する（Google-code-prettify）
記事の中にソースコードを記載する方法は、あまたあるとは思いますが、ここでは Google-code-prettify を使う例を。ほとんど自分の備忘録ですが。
下記を参照しました。
Bloggerにソースコードを表示させる方法（Google-code-prettify） | 非IT企業に勤める中年サラリーマンのIT日記 (pineplanter.moo.jp)
Bloggerの設定でテーマを選び、HTMLの編集の<head>パートに以下を記載します。
<!-- Google-code-prettifyの導入 -->
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=doxy'/>
<style type="text/css">
/* 行番号の毎行表示 (設定しないと5行ごと表示) */
.prettyprint ol.linenums > li{
list-style-type: decimal;
}
/* スクロールバー表示 */
pre.prettyprint {
overflow: auto;
word-wrap: normal;
}
</style>
と設定は以上です。なお、skin= で指定しているスキンの一覧は、以下で参照できます。
上記スキンのデモは以下サイトで確認できます。
使い方ですが、prettyprintは、<pre>の中の記載を整形してくれるものなので、Blogger記事の編集モードをHTMLビューにしてソースコード部分を<pre>～</pre>で囲んで記載する必要があります。
例えば、
例えば、
<pre class="prettyprint lang-py">
def max(a, b)
if a>b:
return a
else
return b
</pre>
と書くと、
def max(a, b)
if a>b:
return a
else
return b
となります。
行番号を入れるときは。
<pre class="prettyprint lang-py linenums">
def max(a, b)
if a>b:
return a
else
return b
</pre>
のようにすれば、
def max(a, b)
if a>b:
return a
else
return b
となります。
