WordPressでgistを使う方法

こちらの記事のようにコードを記事に埋め込む際にはgistが非常に役に立ちます．

単純にコードを埋め込むだけなら，非常に簡単です．コードの名前と本体をそれぞれフォームに書いて，右下のCreate public gistを押すだけで，gistが作成されます．通常のページならば，Embedの横の

<script> ~ </script>

を埋め込みたい場所にコピーすれば，埋め込みは完了です．WordPressの場合はscriptタグをdivタグで囲んで，

<div><script
src="https://gist.github.com/botamochi6277/c381249aba9e9ba3806e9a82f1d27e61.js"></script></div>

と書けば，以下のように埋め込まれます（プレビューだと1度目では表示されないことがあります．リロードしてみてください）．divタグを使う理由はこちらから．

ただし，WordPressに単純に埋め込んだだけだと，幅や高さが設定されていないため，下の画像のよう非常に縦長になってしまいます．このときの解決法がstackoverflowで紹介されていました．

方法は次のコードを記事に入れてください．特に場所は指定されていません（僕の場合scriptの直前に置いています）．

<style type="text/css">
.gist {width:100% !important;}
.gist-file
.gist-data {max-height: 300px;max-width: 100%;}
</style>

これで縦幅の最大値が300pxとなるため，読みやすい高さになります．

また，この方法はGitHubのコードを埋め込むgist-itでも次のように有効です．moongiftで紹介されています．

<div>
<script src="http://gist-it.appspot.com/github/botamochi6277/matlab-exportfig/blob/master/exportfig.m"></script>
</div>