Github Markdown APIとCSS周りの話
マークダウンのパーサーとしてGithubのMarkdown APIを使ってHTML変換してたときに見つけたことをメモっておきます。
このGithub Markdown APIを使うとMarkdownをHTMLに変換できるわけですが、コードブロックがあるとHTMLにCSSクラスがいっぱいついてきます。
例えばこれが
// Octokit.js
// https://github.com/octokit/core.js#readme
const octokit = new Octokit({
auth: 'YOUR-TOKEN'
})
await octokit.request('POST /markdown', {})
こうなる
<div class="highlight highlight-source-js"><pre><span class="pl-c">// Octokit.js</span>
<span class="pl-c">// https://github.com/octokit/core.js#readme</span>
<span class="pl-k">const</span> <span class="pl-s1">octokit</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Octokit</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
<span class="pl-c1">auth</span>: <span class="pl-s">'YOUR-TOKEN'</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">await</span> <span class="pl-s1">octokit</span><span class="pl-kos">.</span><span class="pl-en">request</span><span class="pl-kos">(</span><span class="pl-s">'POST /markdown'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
なるほど、Githubはこのclassをつかってシンタックスハイライトをしてるんですね。ならばこのクラスをうまく使うCSSはないかと探していたら、これを見つけました。
Github Markdown APIの仕組みはGithubがClosedで作っているPrettyLightsというもののようです。一方で、上記のstarry-nightはそのオープンソース版のようです。
This package is an open source version of GitHub’s closed-source PrettyLights project (more on that later).
こんな風にいっているのでほとんどPrettyLightsと同じように動くのでしょう。
Syntax highlighting, like what GitHub uses to highlight code, but free and open source and JavaScript!
ということでstarry-nightを見ていると、ありました。いくつかCSSが。これを使ってさっきのclassにいい感じで色をつけてシンタックスハイライトをすることができました。
めでたし、めでたし。
参考までに、ページ全体をGithub風にするだけであれば、以下のgithub-markdown-cssをそのままあてるのが楽です。上でやったのは全体のCSSは別にあって、シンタックスハイライトのところをだけをうまくやりたかったからです。
Discussion