ブログ

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

blog-github-gist-source-code-past

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

GitHubのGistのコード

見た目も良くなって、さらに行数もついてきます。

Autohotkey 選択しているパスからエクスプローラーを開く

感想

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

まとめ記事の紹介

参考記事

参考書籍

gitの入門書です。

created by Rinker
¥2,484
(2019/06/17 10:54:03時点 Amazon調べ-詳細)

LifeHackに。

ABOUT ME
すいみん
東京在住。デザイナー寄りのテクニカルアーティスト。 ブログは技術検証の備忘録として書いています。