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

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




概要

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

github-markdown-cssについて

github-markdown-css

sindresorhus/github-markdown-css
The minimal amount of CSS to replicate the GitHub Markdown style - 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}

ビフォーアフター

ビフォー

アフター

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

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

関連

githubのmarkdown-cssをぶっこ抜く方法 - Qiita
githubのmarkdown用cssを使いたい!けどどこで拾ったらいいの?と疑問に思ったので調べてみました。 --- まず`github css`とググったらこんなリポジトリがヒットしました。 [sindresorhus/...