日直地獄

小学校では事件が起きる

GitHubのパーマリンクからソースコード(≠gist)をブログに埋め込むスクリプトを作った

技術

ブログにGitHubのコードを貼り付けたいという要望があると聞き調べたところ、oEmbed的なものは提供されていないが、使えそうなAPIは提供されていることがわかったのでサッと作ってみた。


はてなブログでの導入方法

  1. 詳細設定の「head要素にメタデータを追加」から以下のスクリプトを追加する 
    • <script src="https://cdn.jsdelivr.net/gh/airreader/github-code-embedder@v0/dist/index.js"></script>
  2. パーマリンクをコピーする
  3. パーマリンクを展開用の記法に加工する

後記

  • 当初、置換処理を正規表現でやっていたけど、この記事を書くタイミングで <pre> タグ内では展開されてほしくないということに気づいた。しかし正規表現では限界があり狂いかけたのでTreeWalkerで処理することにした。最初からこっちでやったほうが絶対楽だった
  • 通常、はてなブログの自動リンク機能(URLっぽいものなど自動でリンクにしてくれる機能)はとても便利なんだけど、こういう独自の記法で展開しようと思うとじゃまになる問題があった
    • 正規表現でやっていたときは、[][{permalink url}:embed:lang={lang}:h400][] などと[][]で包む自動リンク停止記法を使ってくだせえ、って感じで利用者に負担をかける感じで諦めていたんだけど、TreeWalkerを使うことで、親エレメントがaタグの場合、aタグ自体を置換するということが簡単に可能になった。めでたいね
  • シンタックスハイライトには、Prismというライブラリを使った。Embedはiframeとして展開していて、iframeの中でライブラリを動かす感じにした。残念ながらGitHubのAPIから色づけられたデータは送られてこないし、ファイルタイプも含まれていないので、ハイライトにはユーザーがlangを指定する必要がある感じになった。やや面倒だと思う
    • Prismにはautoloaderというプラグインがあるので、langが指定されていれば動的にハイライト用のデータを読み込める。便利
  • 展開用の記法の言語の指定方法は、はてな記法の自動リンク記法で変数を渡す方法に習って:embed:lang=typescriptとしたんだけど、言語の指定がほぼ必須(ハイライトに必要なため)であることを考えると lang= は不要で:embed:typescriptとか:embed=typescriptとかで良くないか？という気持ちはある。が、はてな記法の文法っぽくないので安牌を切りましょう、という感じ。このへんはむずい
  • GitHubのリリース、リリースタグを使えたのも良かった。ぼんやりとは知っていたけど使ってみると解像度が上がる。壊しながら進むと理解が早い
  • 含まれる行数に応じて高さを計算していい感じに調整されるようにしたつもりだが、フォントの関係でWindows環境ではいい感じにならなさそうな気がしてる