あさりのみそしるダイアリー

ココロおだやかに暮らしてます😌

【プログラミング】はてなブログにソースコードを埋め込む

GitHubの「gist」機能を利用すると、はてなブログに容易にソースコードを埋め込むことができるそうです。

 

まず、GitHubのアカウントを作ります。(すでに持っていればスキップ)

github.com

 

画面右上の「+」から「New gist」をクリックします。

f:id:asarinomisosoup:20210704154015p:plain

 

貼り付けたいプログラムを書きます。

f:id:asarinomisosoup:20210704154054p:plain

 

書いたら、右下のボタンをクリックしてgistを作成します。

リンクを知っている人だけが見れるようにするには「Create secret gist」、誰でも見れるようにするには「Create public gist」にします。

後述の方法ではてなブログの記事に埋め込む場合は「Create public gist」を選択します。

f:id:asarinomisosoup:20210704154744p:plain

 

作成しました。

画面右上のテキスト欄を「Share」に変更し、URLをコピーします。

f:id:asarinomisosoup:20210704154312p:plain

 

はてなブログの記事編集画面で、編集サイドバーに「Gist貼り付け」を追加します。

f:id:asarinomisosoup:20210704154419p:plain

 

編集サイドバーから、Gist貼り付けのボタンを選択し、GitHubユーザー名を入れて連携します。

f:id:asarinomisosoup:20210704154442p:plain

 

作成したgistが出てきました。

f:id:asarinomisosoup:20210704154834p:plain

 

▼埋め込みました。

hello gists

 

編集画面上ではこうなっています。

f:id:asarinomisosoup:20210704154932p:plain

 

これで、ちょっとしたコードを埋め込みたいときもらくちんですね。

おわり(`・ω・´)