ブログにコードサンプルを貼るのに、最近は、後からアップデートもできるし、その修正履歴も管理できるため、 https://gist.github.com をよく使っています。
また、ブログを書くためのエディタとしては、だいぶ前から
が気に入って使っております。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>
のように書けば、埋め込みコードと同様にその部分にソースが表示されます。また、
のようなオプションを追加することで、ハイライト表示や指定行のみの表示が可能になるようです。
<code data-gist-id="a79f2f864df83dc7781fc8695b453ddf" data-gist-line="32-43" data-gist-highlight-line="41"></code>
source code by gist.
オリジナルサイトのEMBED用スクリプトよりも優れていますね。
東京造形大学卒業後、マクロメディア(現アドビ)に入社。QAやテクニカルサポートマネージャーとしてFlash、DreamweaverなどのWeb製品を担当。独立後、2007年に虫カゴデザインスタジオ株式会社を設立。2021年東京三鷹を拠点に。最近は、Unity, Unity Netcode for GameObjects, CakePHP, Laravel, ZBrush, Modo, Adobe Substance 3D, Adobe Firefly, Xcode, Apple Vision Pro, Firebaseにフォーカスしています。モバイルアプリ開発情報を主としたブログ「MUSHIKAGO APPS MEMO」の中の人。