先日書いたブログ記事にGistを埋め込むと表示がおかしくなってる。

ネタバレ防止みたいになってるので直す。

Chromeのデベロッパーツールで見てみると、なぜかspanタグに囲まれていないコードだけblog由来のハイライト用スタイルシートがあたっている。

ggってみるとCSSの優先順位は後から読み込まれたものが優先されるはずなのだが、原因が不明なので.gist pre要素だけ新たにスタイルシートを追記して解決を試みる

※前提としてブログ構築環境はmiddleman-blog 3.5.3です

1. まず_gist.sassを新たに作成し、/data/stylesheets/にいれる

.gist
                pre
                  color: #66757f
              

1. これをall.css.sassに読み込ませる

@import "gist"
              

1. middleman build & middleman deploy

デプロイする前にローカルで確認してみる

できた(╹◡╹)