Tweet

Pocket

本記事は Cloudflare Advent Calendar 2024 25日目の記事だ。
空いていたので埋めちゃおう。

TL;DR

gist-it が動かなくなっちゃったので、 Cloudflare Workers で実装してみた話

ブログに GitHub 上のコードを埋め込みたい

ブログでコードの解説記事を書いていると、 GitHub 上のコードの一部を GitHub Gist のように埋め込んで表示したくなることがよくある。

以前は Gist-It というサービスを利用させていただいていたのだが、 ホストしている Google App Engine で Python 2.7 がサ終した ¹ せいか、動作しなくなってしまっている。

欲しい機能は、処理内容は GitHub のソースコード取ってきて、 <pre> タグに書き込んでシンタックスハイライトを適用するような、割と単純でステートレスなもの。
このため、 Cloudflare Workers で実装してみた。

使い方

基本的には gist-it と同じ。

挿入したいところに
<script defer src="https://gistizer.super-hall-effd.workers.dev/github/$user/$repository/blob/$branch/$path"></script>
と書くだけだ。

param	example	explanation
slice	slice=:-2	Show the first line up to and including the second to last line
	slice=24:100	Show lines 24 through 100
	slice=1	Show only the first line of the file
footer	footer=no, footer=0	Hide the footer
	footer=minimal	Show the footer without "This Gist brought to you by gistizer."
highlight	highlight=no, highlight=0	Disable the highlight
lang	lang=html	Loads the language handler of the code-prettify. See the index of language handlers.
skin	skin=default	See the skin gallery of the code-prettify. Behaviour when different skins are used on the same page is undefined. (default: sons-of-obsidian)
fetchfrom	fetchfrom=github, fetchfrom=jsdelivr	CDN from which source code is obtained (default: jsdelivr)

行の数え方が 1始まり としているのが、 gist-it と異なる。

例:

<script defer src="https://gistizer.super-hall-effd.workers.dev/github/advanceboy/gistizer/blob/main/README.md?slice=2:-2&footer=minimal"></script>

注意点

デフォルトでは、ソースコードを jsDelivr から取得する。
このため、 Cloudflare Workers が実行される Edge 次第だが最大７日間古い情報がキャッシュされる。
ブランチを指定した場合などは、しばらくの間古い情報のままとなる場合がある。

fetchfrom= のオプションで github を指定するか、 Purge CDN cache - jsDelivr のページでキャッシュの削除を試みよう。

おわりに

defer 中に script タグを追加埋め込みするせいで、 highlighter を何度も読み込んでしまうのがイケてないが、まぁ動いているのでよしとしよう。