Bloggerでソースコードをきれいに表示する

 ソースコードの表示がうまくいかないので
Google-code-prettify
を利用するために設定してみる。

テーマのHTMLをカスタマイズする

「カスタマイズ」ボタン押して

HTMLを編集します

</head>の前に

<!-- Google-code-prettifyを追加 -->
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>
<!-- /Google-code-prettify -->

を追記

テーマを変更したい場合は

テーマのサンプル

確認して 「skin=テーマ」のパラメータつければOK

<!-- Google-code-prettifyを追加 -->
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst'/>
<!-- /Google-code-prettify -->

このままだと5行ごとにしか行番号が入らなくて

長いソースだと折り返してしまうので

<style type='text/css'> 

  /* Google-code-prettifyの行番号を1行ずつ表示する */ 

  pre.prettyprint.linenums li{

    list-style-type: decimal;

  }

  /* 横スクロールバーを表示 */

  pre.prettyprint {

    word-wrap: normal;

    overflow-x: auto;

    white-space: pre;

  }

</style>

あとは言語ごとにlangを指定すれば

<pre class="prettyprint linenums lang=python">pythonのソースコード</pre>

でいい感じになる

↓結果↓

@app.route('/')
def index():
    return render_template('index.html', 
                           text = "Hello Woooooooooooooooooooooooooooooooooooooooooooooorld!",
                           page_title = "hogehoge")