非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

GitHub/Gistを使ってブログにソースコードを貼り付けると超便利だった

      2016/08/31

今までこのブログでソースコードを紹介する際には自作のソフトを使って貼り付けていました。

Electron+ACE+Highlight.jsでブログ掲載用のソースコードハイライターを作った

これでもいいんですが、ブログの本文(HTMLモード)が非常に長くなってしまい、Google先生から低品質のページだと認識されてしまう危険もあったわけです。それと、WordPressの仕様なのか、クォーテーション(‘)や、ダブルクォーテーション(“)が全角に変換されてしまうという問題もありました。

以前から、このブログやTwitterを通してGitHub経由でソースコードを公開した方が良いとアドバイスを受けていたのですが、簡単なプログラムの紹介にわざわざリポジトリを作ってもなー、と思っていたのですが、なんと、GitHubにはちょっとしたコードの管理にGistというものが用意されていて、そこ経由でソースを貼り付けられるとのこと。さっそく試してみました。

[ad#ad-1]

 

まず、GitHubのマイページの上部に「Gist」というメニューがあります。ここをクリック。

1

 

下のような画面になりますので、ファイル名とソースコードを入力します。で、「Create public gist」をクリック。

2

 

上部にWebページ貼付用のタグがあるのでこれをコピーして貼り付ければOKです。右側にコピーボタンがあるのでこれを利用。あと、その上に「Delete」ボタンがあるので簡単に削除も可能なわけです。

4

 

以下が貼り付けたソースコード。以前紹介したBootStrapで作ったスライダーのソースです。なかなかいいですね~。今までのソースもあとでGistに書き換えようと思います。

一つ要望があるとすれば、縦サイズを固定化してスクロールできるようにならないかなって思います。長いコードを紹介する場合にページも長くなってしまうので。良いプラグインないかな・・・。とりあえず、今後はこのGistを使ってソースコードを紹介していきたいと思います。

※2016/8/24追記 縦サイズをカスタマイズできるようになりました。詳細はこちらをご覧ください。

 

スポンサーリンク

 - GitHub