はてなブログにソースコードを行番号付きで範囲指定で張り込む(gist-embed.js)

はてなブログの標準的な挿入方法だと、下記のようにファイル全体が挿入されてしまう。 (長いので折りたたんでいます)

gist74562f404a6e043032ad501a90fc32ea

gist-embed.js を使うと、下記のように挿入したい範囲を指定することができる。 記事の中で以下のように書くと

<code data-gist-id="***gist.github.comのファイルへのハッシュ***" data-gist-line="1-8" data-gist-caption="web_reservation_by_email.py"></code>

下記のように表示される。

設定方法

下記参照

[Gist] gist-embedの使い方を調べてみた (1) 〜 id, file, caption, hide-footer 〜 - NP メモリア https://nprog256.net/post/2019/02/how-to-use-gist-embed-v1/

はてなブログ】 gistをファイルごとに分けて貼る - drag n drop https://yellowarrow.hatenablog.com/entry/2015/04/19/200000

昔はjquery を実装に使っていたので jquery も入れる必要があったが、最近は不要になったとのこと。嬉しい。 行範囲指定以外にファイル別に貼ることもできる。

設定画面で

<script
 type="text/javascript"
 src="https://cdn.jsdelivr.net/npm/gist-embed@1.0.4/dist/gist-embed.min.js"
></script>

をプロダクトタイトル下に張り込む。

embed.js の設定方法

その他

標準的な挿入方法の説明は下記参照

はてなブログソースコードを貼る方法(Gistを利用) | まろりかの自由帳 https://www.marorika.com/entry/code-on-hatenablog-with-gist

下記のように昔は ?slice=【表示開始行番号】:【表示終了行番号】_ を script タグ内部のURLの末尾に付加する方法もあったようだが、今では使えない1

はてなブログGitHubのコードを貼り付け/引用する - メンチカツには醤油でしょ!! https://ryoichi0102.hatenablog.com/entry/2015/11/13/091803


  1. gist URL が<script src=“http://gist-it.appspot.com/・・・となっている時点でアウトですね。