コードサンプルを貼るには、gist-embed が便利

広告:超オススメUnity Asset
  広告:超オススメUnity Asset

ブログにコードサンプルを貼るのに、最近は、後からアップデートもできるし、その修正履歴も管理できるため、 https://gist.github.com をよく使っています。

00

また、ブログを書くためのエディタとしては、だいぶ前から

ブログをもっと頻繁に、手軽に、素早く、更新したいためにMarsEditがオススメと聞いて、早速試してみたいと思います。

が気に入って使っております。MarsEdit使うようになってからかなりブログの作成頻度があがりました(しばらく更新しない期間があったりもするのですが。。)。

ところがこのMarsEditを使いながら、gistの埋め込みソースコードをコピペすると、HTMLテキストの編集時は問題ないのですが、リッチテキストでの編集時にスクリプトタグがいつの間にかなくなってしまったりしていました。

これをなんとか消さないようにできないものかを探っていたところ、gistの埋め込みに gist-embed を使うとよさそうだ、ということがわかりました。

この gist-embed をWordPressで使えるようにする設定をMEMOしておきます。

上記からファイルを落として、中にある「gist-embed.min.js」をサーバにアップしておきます。WordPressの「テーマの編集」でフッター部分(footer-insert.php)に

<script src="/gist-embed.min.js"></script>

と書いておきます。(gist-embedの説明ではヘッダーなのですが、それだと動かなかったので。また上記はサイトルートに.jsファイルを置いています。)

次にブログエントリー時です。埋め込みたいgist、例えば、「https://gist.github.com/mushikago/a79f2f864df83dc7781fc8695b453ddf」のユーザアカウントの後の「/」以降の文字列(これがgist id)をコピペして、

<code data-gist-id="a79f2f864df83dc7781fc8695b453ddf"></code>

のように書けば、埋め込みコードと同様にその部分にソースが表示されます。また、

Lightning fast zero dependency library for embedding gists on your website

のようなオプションを追加することで、ハイライト表示や指定行のみの表示が可能になるようです。

<code data-gist-id="a79f2f864df83dc7781fc8695b453ddf" data-gist-line="32-43" data-gist-highlight-line="41"></code>


source code by gist.

オリジナルサイトのEMBED用スクリプトよりも優れていますね。