読者です 読者をやめる 読者になる 読者になる

Jekyllのエントリの表示をGitHubのスタイルっぽくしてみる

GitHubのMarkdownのCSSを再現しているものがあるのでそれを使用します。

github.com

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。

f:id:takezoe:20160214203832p:plain

こっちがAfter。GitHubそっくりになりましたw

f:id:takezoe:20160214203835p:plain