Bloggerでgistを編集中に場所がわかるように埋め込む

gist embed code:

変換

Bloggerに埋め込むHTML:

編集画面プレビュー

説明

BloggerでもGitHubのgistのウェブサイトへの埋め込みを使うことができます。

gistのEmbedのコードをコピーして、BloggerのHTMLビューでコードを表示したい場所に挿入すれば、プレビューや公開したウェブページ上にgistのコードが表示されます。

しかし、HTMLビューで gistのembedのコード(<script>...</script>)を挿入して作成ビューに戻ると、どの場所にembedコードがあるかわからなくなります。

 

このページでは、作成ビューでも場所がわかるようなHTMLに変換します。

変換したHTMLはBloggerのHTMLビューでコードを表示したい場所に挿入してください。作成ビューでもgistを挿入した位置がわかります。しかし、作成ビューで見えている表示は、プレビューや公開したウェブページ上では見えません。

（注意）

作成ビューで見えている表示が、プレビューや公開したウェブページで見えない仕組みはJavascriptを使っています。このため、Javascriptが無効になっていると、作成ビューで見えている表示が見えてしまいます。しかし、Javascriptが無効の場合はgistのコードも表示されないのであまり影響はないでしょう。

使い方