与我的 jekyll 网站上的页面的 github markdown 页面相同的渲染样式

【问题标题】：same render style as github markdown page for a page on my jekyll site与我的 jekyll 网站上的页面的 github markdown 页面相同的渲染样式
【发布时间】：2016-08-28 21:08:47
【问题描述】：

我正在使用 jekyll 生成我的站点和 markdown 文件以创建帖子。

我编写了降价代码来生成http://techtaste.in/blog/markdown/markdown-quick-reference.html。我在https://github.com/Raghavendrak555/chari.github.io/blob/master/testMarkdown.md 中使用了相同的内容。这两个页面呈现不同。前一个没有语法高亮，后一个有。

我可以做些什么来在我的站点中获得与在 github 站点中显示的相同类型的降价文件。

我是否必须链接任何特定的 CSS 文件才能实现此目的，或者 _config.yml 中需要任何配置设置。

提前致谢。

【问题讨论】：

您的第一个链接已损坏。为了有类似的github风格，你试过galenlin.github.io/en/web/2016/01/29/…吗？

标签： jekyll github-pages

【解决方案1】：

我是否必须链接任何特定的 CSS 文件才能实现这一点

是的，没错。

首先您需要指定markdown 渲染器及其语法高亮。我用这个：

markdown: kramdown
kramdown:
  syntax_highlighter: rouge

（我不确定这是否是绝对必要的，但这是我所做的并且对我有用。）

语法高亮器将您的代码包装在一堆 span 元素中，这些元素具有特定的类，具体取决于它应该是什么颜色。（在 GitHub 上，检查突出显示的代码以了解我在说什么。）然后您需要包含为每个类指定颜色的 CSS 文件。

要找到这些 CSS 文件，请在 Google 上搜索“rogue syntax highlighting css files”或“pygments css”（rogue 和 pygments 使用相同的类名）。 Here 是一个不错的列表，但根据 this 你可能需要更改一个类名。

另见：Add syntax highlighting to gh-pages

【讨论】：