githubのmarkdown-cssをぶっこ抜く方法

githubのmarkdown用cssを使いたい！けどどこで拾ったらいいの？と疑問に思ったので調べてみました。

---

まずgithub cssとググったらこんなリポジトリがヒットしました。

sindresorhus/github-markdown-css: The minimal amount of CSS to replicate the GitHub Markdown style

ここに置いてあるgithub-markdown.cssというヤツがどうやらソレみたいです。さっそく見てみましょう。

@font-face {
  font-family: octicons-link;
  src: url(data:font/woff;charset=utf-8;base6 //長いので以下省略
}

.markdown-body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  color: #24292e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}

.markdown-body .pl-c {
  color: #6a737d;
}

全てのセレクタが.markdownで始まっています。ちゃうねん、bodyとかh1とか書いてあるヤツが欲しいねん。

┐(´д｀)┌ﾔﾚﾔﾚ

と思いましたが全てに付いてるので話は簡単。適当なエディタを開いて.markdown-を空文字にall-replace(すべて置き換え)するだけでアッサリ作業終了です。cssゲットです。

---

そもそもこのリポジトリなんなの？とよく見てみると、製作者のsindresorhus氏が作ったgenerate-github-markdown-cssという別のリポジトリがあります。

ソースを読んでみると

• github.comのhtmlから<link>タグのhref=*.cssをぶっこ抜く
• そこから.markdown-bodyのcssをぶっこ抜いてまとめる

ということをやっています。これを使ってgithub-markdown-cssを更新しているようです。

つまりgithubの仕様が変わらない限りは、実際に使われているcssが手に入るという事みたいです。

---

とは言ってもライセンス大丈夫なの？と思い調べてみました。

まず、このsindresorhus氏の2つのリポジトリはMITライセンス。

そしてgithubからlinkされている以下の2つもMITです。

https://assets-cdn.github.com/assets/frameworks-c4bbb32afb602dcf8c75be0bc4c83014.css

https://assets-cdn.github.com/assets/github-0c21e211e4fd150ac107ccf0fcf751e5.css

どうやらライセンス的にも問題なさそうです。

まとめ

https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css

1. ↑からコピペもしくはダウンロード
2. 適当なエディタで1を開き、.markdown-でfind、''(空文字)でreplace

現場からは以上です。(｀･ω･´)ゞ