github-markdown-cssを無理やりWordPressにねじ込んだ話

目次

1. 概要
2. github-markdown-cssについて
3. やったこと
4. ビフォーアフター
5. 関連

概要

github-markdown-cssを既存のWordpressのテーマに組み込んだ話。 CSSとかあんまりわかってないけど、とりあえずキレイに動きました。

github-markdown-cssについて

github-markdown-css

https://github.com/sindresorhus/github-markdown-css

やったこと

• github-markdown-cssのCDNをheadタグに埋め込む
• bodyタグのclassに追加する
• 細かい調整。一部CSSの削除

github-markdown-cssのCDNをheadタグに埋め込む

link属性として https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.css をheadタグに追加しました。

bodyタグのclassに追加する

当たり前ですが、要素のclassにmarkdown-bodyが無いと適用されません。 wordpressのテーマを見るとベタで書くのが厳しかったので、JSで動的に属性を追加することにしました。

(function() {
  document.body.classList.add('markdown-body');
})();

これによってgithub-markdown-cssが反映されます。

細かい調整。一部CSSの削除

上記の方法は元のデザイン上書きしているため、おかしな箇所が出てくるかと思います。

特にhタグの中のaタグが青く表示されてしまっていたため、これを無効化しました。

例

.markdown-body a{color:#000}

ビフォーアフター

ビフォー

アフター

若干、原色を柔らかい色にする補正が入っているのは気のせいでしょうか...?

まあ、キレイになったのでよし

関連

https://qiita.com/__mick/items/c80fab6c185a41882880