【GitHub】ブログ記事内でプログラミングコードを表示する方法

BLOG

こんにちは、和久井港(@misanwakui)です。

※初心者ブロガーさんはTWフォローよろしくお願いします!

今回は、ブログ記事内でマークアップもしくはプログラミングコードを綺麗に表示する方法をご紹介します。

完成形

とは言っても簡単で、コードが準備できていれば作業自体は2~3分で終わってしまいます。

今後、プログラミング系のブログを始める駆け出しエンジニアさんとかは必見です。

1st Step:GitHubに会員登録(Sign up)※無料

まずはエンジニア御用達の「GitHub」というnerd(オタク)チックなサイトへアクセスしてください。こちら無料です。

https://github.co.jp/

既に会員登録済みのnerdさんはサインアップ、まだの方はサインアップで晴れてnerdの仲間入りです。

gmailさえあればアカウントはすぐに作れます。

ログインできましたら、いろいろ英語で情報が出てきたりポップアップが出てきたりと邪魔ですが全て無視して次のステップへ進みます。

2nd Step:GitHub Gistへ移動

無事nerdの仲間入りを果たしたら次は下記URLを開いてください。

https://gist.github.com/

上から

  • 説明
  • ファイルネーム
  • コード
  • 完了ボタン

となっております。

説明(description)について

今後GitHubを使っていく予定の方はご自身で調べて適切でnerdな説明方法を会得すれば良いと思いますが、ブロガーにはそんな知識は不要です。

自分が振り返った時に分ければ大丈夫です。

例えば、「sample for article」とかで問題ないはずです。少なくともnerdでなければ。或いは、別に日本語でも大丈夫だと思います。

ファイルネームについて

ファイルネームも同上です。

キャメルケースやスネークケースなどのnerd縛りでいっても構いませんが、大体の場合、自分にとってシンプルであれば大丈夫です。

コードについて

ご自身で用意したコードをコピペもしくは記述してください。

今回この記事では和久井大学の<head>の一部をサンプルとして表示いたします。

完了ボタン

「Update public gist」をクリックしてください。

3rd Step:embedで完成

「Update public gist」をクリックするとこのようなページに変遷します。

赤枠の「Embed」と書いてある右側に

このようなコードがあります。

そちらをコピーしてください。

もっとおしゃれにシンタックスハイライトなども出来るそうですが、今回は最も簡単でシンプルなembed(埋め込み)をご紹介しています。

投稿ページ「カスタムHTML」にペースト

このようになります。

出来ましたか?

今回はちょっとマニアックな記事となりました。

そもそもコードをブログ内で紹介したい人はエンジニアか、ブロガー中級者くらいだと思います。

もし必要な時がきたら参考にしてみてください。

それではまた。

人気記事 »【おすすめも紹介】昨年最も多くの初心者が学んだプログラミング言語は?

人気記事 »アフィリエイトで稼いでる有名人18名のWordPressテーマまとめ