wordpressのソースコード挿入をgistに変えた

このブログでのソースコードの挿入は、今まで専用のプラグインでシンタックスハイライト等行って表示してましたが、ちょっと前からgistの表示に変えてみました。

gistはgithubより提供されているコード共有サービスです。githubのリポジトリ内の表示機能を1ファイル単位で行えるようなイメージ(実際には1つのgistごとに1つのリポジトリでもありますが)です。コードは匿名でもgithubアカウントを利用しても可能です。

アップロードやアップロード後の更新もファイル単位ですぐに可能、シンタックスハイライトを簡単にでき、もし閲覧者がコードを利用したい場合でも、オリジナルファイルを簡単に取得できる等、メリットが多かったので、プラグインでのハイライトからこちらに移行してみることにしました。

ネットで調べたら各種単独のプラグインを入れる方法がよく紹介されています。そちらでも大丈夫ですが、もしwordpress.comの機能を提供するプラグインであるJetpackを導入済みであれば、その機能の１つ「ショートコード埋め込み」を有効にすれば、(ほぼ)同様のことが追加プラグインなしで可能です。(wordpress.comでも同様の事が可能)

私はすでにJetpackを導入済みだったため、そちらを利用しました。

導入後は，以下のようにgistのURLを書くだけで自動的にgistの埋め込みコードに変換されて表示されます。

<script src="https://gist.github.com/ik11235/d2777519d8792e658f75.js"></script>

class ElectronicPetEasy {
    public:
    string isDifficult(int st1, int p1, int t1, int st2, int p2, int t2) {

      set<int> hash;
      for(int i=0;i<t1;i++)
	{
	  hash.insert(st1+(i*p1));
	}
      for(int i=0;i<t2;i++)
	{
	  if(hash.count(st2+(i*p2))!=0)
	    return "Difficult";
	}
      return "Easy";
    }
};ElectronicPetEasy.cpp

ただ、なぜか今のテーマと競合しているのか画面全体に表示されないため、同じくJetpackの機能の１つ、カスタムCSS機能で、以下のCSSを適応しました。

.gist table {
 width: 100%;
}

CSS適応前

CSS適応後