こちらの記事のようにコードを記事に埋め込む際には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>
コメント