[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となります。