GitHub Gistのソースをホームページに埋め込む

とあるブログで、「Gist」という単語を見かけた。

はじめは(Gitの打ち間違いかな?)と思ったけど、無知でした。

Gistはあります!

Gistとは?

Gist – GitHub
https://gist.github.com/

GitHubが提供している断片コードの共有サービス。

使い方的には、ほぼGitと同じなんだけど、ブログやホームページに簡単にソースを埋め込めたり、無料枠でも非公開できたりと微妙な違いがある。

使い分けとしては、メモ程度にちょっとだけバージョン管理したいときとかに使う感じかな。

ぶっちゃけマイナーサービスだと思う。
「Gist」で検索しても全然引っかからないし…。

本記事の目的としては、Webサイトへの埋め込み機能に焦点を当ててみる。

Gistの埋め込み方法

前提:既にGistにリポジトリを作成し、コードをアップロードしていること

GitHubのメニューから「Your gists」を選ぶ。

Gistソースの埋め込み方01

埋め込みたいファイルがあるリポジトリを選択する。

Gistソースの埋め込み方02

画面上部に埋め込みようのスクリプトが表示されているので、クリップボードにコピーする。

<script src="https://gist.github.com/[ユーザー名]/[ハッシュ].js"></script>

あとは、埋め込みたいサイトに、コピーしたスクリプトを貼り付けるだけ。

ファイルを指定して貼り付ける

Gistに複数ファイルをアップロードしている場合、スクリプトを修正して以下のようにすればファイル単位で埋め込むことが出来る。

<script src="https://gist.github.com/[ユーザー名]/[ハッシュ].js?file=[ファイル名]"></script>

Gistの表示サイズを変更する

デフォルトではフルサイズで表示されるので、スタイルシートを変更することで表示サイズを変更することが出来る。

<style type="text/css">
    .gist-file { max-width: XXXpx; }
    .gist-data { max-height: XXXpx; }
</style>

上記のように、ファイル表示に対しては.gist-file、コード表示に対しては.gist-dataに対してスタイルを指定する。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のSEを経て、独立。 ここ数年はWEB以外の仕事をしていたため、割と本気で勉強中。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください