Amazon Music 3か月無料で音楽聴き放題!

【Blog】ブログのソースコードの見た目UP!GitHubのGistのコードを貼り付ける方法

Gistは短いコードをバージョン管理に便利ということを知りまして、さらに「はてなブログ」の「Gist貼り付け機能」がありましたので試してみました。

Gistの投稿方法

  1. GitHubのアカウントを作成(詳細は割愛)
https://github.com/
  1. 上部メニューにGistの文字をクリック
f:id:min0124:20170320104315p:plain
  1. コードを記述
f:id:min0124:20170320110101p:plain
  1. 上部に専用のHTML形式のコードが生成
f:id:min0124:20170320104423p:plain

こちらをブログに貼ります。

はてなブログ Gist貼り付け機能

  1. Gist貼り付け機能をONに
f:id:min0124:20170320104626p:plain
  1. アカウント名登録
f:id:min0124:20170320104632p:plain
  1. アカウント名登録

投稿した記事を選択して、貼り付け

f:id:min0124:20170320104708p:plain

通常のはてなブログのコード

シンタックス・ハイライトをMarkdownの場合はバッククオート(`)を3つを上下に挟むだけですが、いまいち味気ないです。

!W::
;[alt + W]を押す
clipboard =
SendInput, ^c
ClipWait
result := clipboard
clipboard := clipboardbackup
run %result%, , UseErrorLevel
clipboard =
return

ブログのソースコードの見た目UP!GitHubのGistのコードを貼り付ける方法まとめ

使ってみての感想ですが、GitHubを使うとブログのソースコードの見た目UPだけでなく、はてなブログのHTMLやCSSを外部参照(バックアップ)にも活用できそうなので、機会がありましたらこちらも記事にしたいと思います。

関連記事