【Bloggerカスタマイズ】Pythonのソースコードを綺麗に表示する

Pythonをやってみよう、ということで別の記事を上げていますが、Pythonの勉強をしながら先輩方のサイトを見ると、みなさんソースコードが綺麗に表示されている・・・どうやっているのだろう、ということでこちらでもご紹介。

Google-code-prettifyを使う

ということで、使ったのはGoogle-code-prettify。他にもいくつか方法があるようですが、簡単そうで無料、しかもGoogleということでBloggerとの相性が良いのではないかという単純な理由です。

やることは２つ

いずれもHTMLでの編集が必要になります。BloggerでのHTML編集についてはこちらもご参照ください。

【Bloggerカスタマイズ】HTMLを編集する

レイアウトのHTMLを編集

まずはレイアウトの</html>の直前に以下コードを追記します。QooQでは</head>は思ったより下の方、600行目以降くらいになるでしょうか。

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

既にソースコードが綺麗に表示されていますね。でももちろんこれだけではソースコードは綺麗には出てきません。

記事にコードを埋め込む

次にコードを表示する記事にコードを埋め込みます。こちらもHTMLで直接書き込む必要があります。
記事の左上の鉛筆マークを押すと、HTML表示に切り替えることができます。

表示したい場所にpreタグで挟んでコードを記述します。<pre class="prettyprint"> コードをそのまま転記 </pre>です。
やってみるとこんな感じになります（コードは適当です）。

こうやって記述すると・・・

<pre class="prettyprint">
import datetime
import pandas as pd
import numpy as np
import pandas_datareader as pdr
import plotly.graph_objects as go

df=pd.DataFrame([])
</pre>

こう出てきます。

import datetime
import pandas as pd
import numpy as np
import pandas_datareader as pdr
import plotly.graph_objects as go

df=pd.DataFrame([])

＞とか＜とかには要注意

行番号とか言語指定とか

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst'/>
<style type="text/css">
pre.prettyprint.linenums li{
list-style-type: decimal;
}
</style>

import datetime
import pandas as pd
import numpy as np
import pandas_datareader as pdr
import plotly.graph_objects as go

df=pd.DataFrame([])

参考記事