GitHubのMarkdownのCSSを再現しているものがあるのでそれを使用します。
GitHubからgithub-markdown.cssをダウンロードし、css
ディレクトリに配置します。続いて_includes/head.css
に以下の記述を追加します。
<link rel="stylesheet" href="{{ "/css/github-markdown.css" | prepend: site.baseurl }}">
_layouts/post.html
の先頭のdiv
要素のclass
属性にmarkdown-body
を追加。
<div class="post markdown-body"> ... </div>
結果はこんな感じになりました。まずはBefore。
こっちがAfter。GitHubそっくりになりましたw