Githubのソースコードをブログに埋め込みたい時って結構ありますよね。
gistであれば表示してくれるWordPressのプラグインも結構あって便利なのですが、実際のリポジトリのソースコードとは行番号も異なりますし、gistにコピペしたオリジナルのソースコードに更新が入っていくと、メンテしなければgistが廃れていってしまいますよね。それを参照している記事との兼ね合いもありますから、管理はとても面倒です。
その時点のblobについて書く記事の文脈でしたら、わざわざgistを書かずにソースコードを直接埋め込んでくれるものがあれば大変便利なのかなと考えていました。
githubのソースコードのURLを渡すと、ソースコードを埋め込んでくれるサービスが実際に運用されており、もともと弊社でもありがたく使わせて頂いていました。
ただ、
- 行番号が表示できない
- ９年前からメンテされておらず、contributeしたくてもできない
- forkしようにもpython2系・・・
- 最終的に document.writeでHTMLを出力しており、Chromeで警告が出ている
という事情があり、上記の「gist-it」にインスパイアされた「mks_pretty_printer」を作りました。
使い方としては、以下のようにurlパラメータにgithubのソースコードのSHA-1付きのURLを渡すだけです。
<code><em><script defer src="https://ommks.pythonanywhere.com/pp.js?url=https://github.com/MUKEI-SOFT-LLC/spring_pet_clinic_2021_flutter/blob/51569869ed6c4a5b8484ddfc304615871b37886b/lib/ui/page/tab/veterinarian_tab.dart%23L11-L13">
</script></em>
実際に埋め込んだ例
%23はurlエンコードされた#ですね。
上記の例だと、「51569869ed6c4a5b8484ddfc304615871b37886b」という特定のコミットveterinarian_tab.dartというファイルの11〜13行目のソースコードを埋め込むという指示になります。
“view full source code“というリンクをクリックするとGithub上で選択した範囲がハイライトされて表示されると思います。
なお、上記のケースだと開始行から終了行まで範囲指定していますが、”-L13“という指定がなければ、11行目のみを表示し、”%23“以降がなければファイル全体を埋め込むように動作します。
今回は、pythonanywhereさんでホスティングしてもらって、大したトラブルもなくデプロイできました。
そのあたりもいずれ記事にしたいなと思っています。
もし試される方はくれぐれもscriptタグの「defer」を忘れないようにしてください！
それでは！