2020-02-28

gist-embedを利用してGithub Gistのソースコード埋め込みをコントロールする


※このネタは今はうまく動作しなくなっているのでボツです※

本サイトでは、サンプルソースコードをGitHub Gistを利用して管理することにしてますが、欠点としては、Gistのデフォルトの埋め込みコードでは、全ての行数が表示されるのがあります。これを解決するJavaScriptライブラリとして gist-embed があります。

gist-embedとは
ネットでググるといろいろ出てきますが、リンク先がリンク切れになってますね(2020/02/28現在)。で、サイトが変わってるようです。
使い方
上記サイトを見ればわかりますが、
  • Scriptタグを埋め込む
  • Codeタグを使って埋め込む (例:<code data-gist-id="******"></code>)
  • 必要に応じてオプションを指定する
    (行を指定する場合、data-gist-lineを指定すればOK)   
非常に簡単です。欠点としてはちょっと動作が遅くなるかな、、という気がするだけですね。

bloggerで設定する場合
限定的なネタになりますが、bloggerでScriptタグを埋め込みたい場合は、
  • 管理画面からテーマを選択
  • ブログで使用中のテーマを選び、編集を押す
  • 適当な場所に記述する
でOKです。


0 件のコメント:

コメントを投稿