2020-08-11
こんにちは、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
の設定を変更していないことだと思うのですが、気にしない。