与我的 jekyll 站点上的页面的 github markdown 页面相同的渲染风格

Question

我正在使用 jekyll 生成我的网站和用于创建帖子的 Markdown 文件。

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

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

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

提前致谢。

Answer 1

我是否必须链接任何特定的 CSS 文件才能实现此目的

是的，完全正确。

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

markdown: kramdown
kramdown:
  syntax_highlighter: rouge

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

语法荧光笔将您的代码包装在一堆

span

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

要找到这些 CSS 文件，请在 google 上搜索“rouge 语法突出显示 css 文件”或“pygments css”（rouge 和 pygments 使用相同的类名）。 Here 是一个很好的列表，但是根据 this，您可能需要更改一个类名称。