にちじょうみだれがき

役立ち情報から雑記まで幅広いジャンルを展開するブログ。

Gistで記事中にコードを載せる方法!HTMLでもCSSでもOK

先日、記事中にHTMLのコードを載せたかったのですが、どうも上手く表示できない。表示する為にあれこれ調べたところ「Gist」という便利なものを見つけたので、使い方を紹介しようと思います。

f:id:ChihaYuu:20160508204227j:plain

Gistとは?

Gistは部分的なコードを共有・公開するためのサービスです。
はてなブログの記事中にHTMLなどを記述しようとすると、HTML命令として認識されてしまい、コードそのものを紹介したい時に困ってました。そんな悩みを解決してくれる便利なサービス。

上記のようにHTMLコードを表示することができます。

Gistの使い方

Gistは、非常に簡単な操作で利用することができます。
サービスを利用するために、Gistへアクセスします。
gist.github.com

アクセス後、記事中に貼り付けたいHTMLなどのコードを入力します。
f:id:ChihaYuu:20160508211211j:plain
コード入力後、「Create secret gist」をクリックでコード生成。


f:id:ChihaYuu:20160508211438j:plain
赤枠で囲った部分に表示されているコードを、記事中の記述したい場所に貼り付ける。たったのこれだけの操作でコードを生成できます。

HTMLやCSSのコードを紹介したい時などに、非常に役立つサービスなのでブックマークしておくことをオススメします。

広告を非表示にする