GatsbyJS に github-markdown-css を導入する。

こんにちは、0371です。

ブログをmdファイルで書くと、PurgeCSSがレイアウトを崩してしまうので、github-markdown-cssを使用していい感じにデザインしてくれるようにしてみました。

インストール編

まずは、github-markdown-cssをyarnでインストールします。

yarn add github-markdown-css

次に、blog-post.jsなどの、mdファイルを読み込むところで、className="markdown-body"をします。

    <article className="markdown-body">
      <div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} />
    </article>

これだけで、mdファイルにgithubで使用されているものと同様のCSSが反映されるようになりました。

応用編

これだけでもいいのですが、個人的にはaタグをhoverした時にtext-decoration: underlineで下線が引かれてしまうのが気になります。
github側の仕様と同期しているため、変更があった時のレイアウト崩れも心配です。

なので、CSSファイルを直接書き換えることにしました。 node_modules/github-markdown-css/の中に、CSSファイルがあります。

中身を全てコピーして./src/utils/github-markdown.cssのように適当にCSSファイルを作って貼り付けましょう。

結構な量のCSSが記述されているので、にらめっこしながら目的の.markdown-body aを探します。
エディターを使っている人は、Ctrl+FでCSSモジュールの検索ができるので便利です。

このCSSは新しく更新されたモジュールを下に追記していく方法を取っているみたいです。
そのため、上の方に重複しているモジュールが存在します。
CSSを書き換える時は注意しましょう。

さて、お目当てのモジュールが見つかりました。
text-decoration: underlineになっていたので、下記のように書き換えました。

.markdown-body a {
  text-decoration: none;
}

これで、aタグをhoverした時にtext-decoration: noneになり、下線が引かれなくなります。
やったぜ。

他にも気になるところがあったら、その都度書き換えて修正するようにしましょう。

感想

全ての元凶はPurgeCSSの設定を変更していないことだと思うのですが、気にしない。