-->

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

2020/09/21

Blogger Python QooQ

t f B! P L


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

Google-code-prettifyを使う

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

やることは2つ

いずれも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([])
簡単ですね!

>とか<とかには要注意

不等号記号(”>”、”<”)はきちんと表示されません。
”<”は &lt;
”>”は &gt;
の文字列に変換する必要あります。不等号記号が多いソースコードではGoogle-code-prettifyは向かないかもしれません。

行番号とか言語指定とか

表示する言語を指定するときはpreタグのclassの中に「lang-python」(他言語の場合は言語の名前)と、行番号を表示するときは「linenums」と追加します。こんな感じです。
<pre class="prettyprint lang-python linenums>

先ほどのコードに入れてみます。尚、行番号は標準では5行おきにしか出てきません。これはstyleタグで「1行ごと」に変更します。トップページに追記したscriptタグの直後に書き足しました。最初から追加しておいた方がいいですね。
<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([])
すごいですね! 勝手に色分けしてくれます。言語は特定しても変化なしですね・・・

参考記事

参考にさせていただいています。そのままコピペにならないように頑張らないと。



このブログを検索

最新記事はこちら

【Africa Daily】アフリカは太陽光をどうするつもりなのか?

(Unsplash) 今日のエピソード BBC World Service - Africa Daily, How is Africa doing with solar power? Millions across Africa have no access to elect...

自己紹介

そろそろネットで何かやってみるか、という程度。のんびり、てきとーに。