adsense自動レスポンシブ

GitHub

WordPressの投稿にGitHubGistのコードを貼り付ける方法

更新日:

ブログにコードを載せる際に、みなさんはどうされていますか?

GitHubのGistでちょっとしたコードを書き溜めておくことができますが、そのコードをそのままブログにたったの一行で埋め込むことができます。

非常に便利なので、その応用編も含めてまとめたいと思います。

 

Gistに保存したコードをブログに埋め込む方法

こちらのGist公式ヘルプにもたったの2行で説明してありますが、とにかく簡単です。

  1. Gistを保存して、画面右上に表示される「Embed」のボタンを押して、<script>~~</script>をコピーします
  2. ブログのHTMLコードに貼り付けます
    <script src="https://gist.github.com/nurburg/09b5c99ca3a9e4f430f807c7853fc5ad.js"></script>
  3. すると、記事の編集画面では以下のようなアイコンで表示されますが、
  4. ブログには以下のようにGitHubのフッター付きでコードが表示されます。

コードを部分的に貼り付けたい場合はどうするか

順を追って説明したいのに、いきなり長いコードすべてをバーーンと貼り付けられると書きにくいですよね。

でも、ブログでの説明に合わせて、コードを細切れにGistに保存して、それらをペタペタ貼り付けるのもちょっと違うし。。。
(だいたい、GitHubのフッターが毎回出てくるのもちょっとうざいし 笑)

ということで検索すると、GitHubにgist-embedというのがあがっています。

 

CDNのソースを直接見る

どうやらCDNにのっけてくれているので、それを利用させていただいて、
以下を</body>の前に書けばよいので、ビジュアルモードではなくHTMLコードの画面を開いて最下部に以下を貼り付けましょう。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gist-embed/2.4/gist-embed.min.js"></script>

 

なお、JQueryの読み込みも書いてありますが、WordPressの場合、いろいろバッティングするということで止めておきました。
バージョンも問題なさそうです。

 

<code>タグがバッティングするのでcssで回避する

冒頭で、GistのEmbedでコピーした内容をそのまま貼り付ける、と書きました。

<script src="https://gist.github.com/nurburg/09b5c99ca3a9e4f430f807c7853fc5ad.js"></script>

 

ですが、このツールを使うには、<code>タグで書く必要があります。

<code data-gist-id="09b5c99ca3a9e4f430f807c7853fc5ad"></code>

 

そうすると、使っている(Wordpressの)テーマにもよると思いますが、既存の<code>タグが効いてしまいます。

手っ取り早い回避方法としては、CSSにcode.gist{hoge:fuga;}のようなクラスを追加して、このツールを使う際に<code class="gist">と指定してあげます。

 

主な使い方

こちらのgist-embedヘルプを参照していただけると手っ取り早いです。

以下は、行範囲を指定、行番号を削除、フッターを削除した場合になります。
(記載してあるコードを貼り付けると以下のように表示されます)

 

 

レクタングル336

レクタングル336

-GitHub

Copyright© JJ BLOG , 2019 All Rights Reserved.