Pythonで家計簿を作る、その3の備忘録 Hatenaブログでのコード表示
今回の記事からPythonソースを載せる必要があるので、ソースの載せ方についてメモ。やりかたは結構色々あるみたいです。なおタブなどの日本語名称がややおかしいかもですがご了承ください（英語版ユーザ）。
①一番正規っぽい方法:はてな記法で>|python| |<
はてなブログの編集方法は”見たまま(WYSIWYG)”、”はてな記法”、”マークダウン”と三種類あり、僕のような新規ユーザはデフォルトで”見たまま”になりますが、正規っぽくコードを埋め込む方法は実はデフォルト以外の”はてな記法”と”マークダウン”だけが対象になります。これら二つであればコード用のタグが用意されており、その間にコードを書くことで自動的にSuntax highlightまでやってくれるようです。以下のブログなどを参考にしました。
kurokinomizuiwa.hatenablog.com
編集モードは一旦編集を始めてからでは行き来できるものではないため、正規でこれを使うのはこれからのブログを全て”はてな記法”というよくわからない記法で書く必要があります。若干のHTMLの知識がある自分にとっては”見たまま”の編集＋細部を”HTML”モードで修正するスタイルが合っている（というよりどうせ勉強するなら汎用的なHTMLを使いたい）のでこの使い方はなしと判断しました。また上記のブログには、一旦コードだけをはてな記法の記事に書いて下書き保存し、プレビューのフォーマット済みコードを”みたまま”記法のブログにコピペする方法も紹介されていました。これは2度手間になりますし、スタイルの微調整（ハイライトの色など）ができなさそうです。以下がこの方式の結果です。
from os import path import sqlite3 def read_db(c): for row in c.execute('SELECT * FROM flow_data'): print(row) if __name__=='__main__': assert not path.exists('test.db') # ensure .db is a new file each run c = sqlite3.connect('test.db') c.execute('PRAGMA foreign_keys = 1;') read_db(c) c.close()
②一番簡単な方法：VS Codeからシンプルにコピペ
上の方法を試行錯誤しているうちにもっと簡単な方法ができることに偶然気がつきました。VS Codeは一年ほど前からctrl+cでplain textだけでなくsyntax highlightも含めたhtmlをクリップボードに保存するようです。なので単純にVS Codeのコードをコピペするだけで以下のようになります。
from os import path
import sqlite3
def read_db(c):
for row in c.execute('SELECT * FROM flow_data'):
print(row)
if __name__=='__main__':
assert not path.exists('test.db') # ensure .db is a new file each run
c = sqlite3.connect('test.db')
c.execute('PRAGMA foreign_keys = 1;')
read_db(c)
c.close()これで見慣れたテーマのSyntax highlightでコードを見ることができ、自分にとっての可読性が格段と上がりました。しかしこの方法だとなぜか複数スペースもタブもスペース一個分に変換されてしまうようです。VS Codeはスペース←→タブの全変換も手軽にできるので色々試しましたが全てダメでした。Pythonにおいてはインデントの有無はコードが走るか走らないかに関わり、実際上のコードをVS Codeに貼り付けてもインデントエラーで動きませんでした。せっかくソースコードを貼るならコピペだけで動くように貼らないと意味がないと思ったので、この方法も断念しました。
③最終的に落ち着いた方法：highlight.jsの使用
HTMLモードで編集していた頃からhighlight.jsの存在には気付いていましたが、ヘッダやフッタにアクセスしようがないと思っていました。ところが以下のブログでこれを活用する方法を解説していました。
これによって愛用するAtom One Dark（ブログ主さんと同じでした）のテーマを使用しつつ、インデントや行間高さなどの細部までコントロールできます。以下がこの方法での表示です。
from os import path
import sqlite3
def read_db(c):
for row in c.execute('SELECT * FROM flow_data'):
print(row)
if __name__=='__main__':
assert not path.exists('test.db') # ensure .db is a new file each run
c = sqlite3.connect('test.db')
c.execute('PRAGMA foreign_keys = 1;')
read_db(c)
c.close()ここで注意するべきなのがjsを使っているため編集は①、②と違いHTMLタブを使う必要があります。さらに”見たまま”タブではハイライトはされません。（プリビュータブでは見れます）それでもこの方式が一番優れていると判断し、今回の記事からはこれに従ってソースコードを埋め込もうと思います。
