Ruby：如何从 GitHub 或 BitBucket 等 Markdown 生成 HTML？

Posted 2023-03-30

【中文标题】Ruby：如何从 GitHub 或 BitBucket 等 Markdown 生成 HTML？

【英文标题】：Ruby: how to generate HTML from Markdown like GitHub's or BitBucket's?

【发布时间】：2018-02-20 12:42:54

【问题描述】：

在 GitHub 或 BitBucket 中每个存储库的主页上，它以非常漂亮的格式显示 Readme.md。

有没有办法用红宝石做同样的事情？我已经找到了一些像Redcarpet 这样的宝石，但它看起来并不漂亮。我关注了 this instructions 的 Redcarpet。

编辑： 在我尝试Github's markup ruby gem 之后，同样的事情正在发生。 显示的是这样的： 我想要的是这样的：

而且我确信它不仅缺少 css，因为在 3 个反引号 (```) 之后，我编写了 json 或 bash 之类的语法，并在第一张图片中编写了它。

编辑2：

这里的代码：

  renderer = Redcarpet::Render::html.new(prettify: true)
  markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true)
  html = markdown.render(source_text)
  '<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>'+html

生成这个：

【问题讨论】：

“看起来很漂亮”是什么意思？听起来您可能需要定义一些 CSS 规则。

如果这是需要定义 CSS 的问题，那么这可能是 How to apply style for the inbuilt markdown tags? 的副本

另请参阅，How to apply color in Markdown。

感谢 cmets，您带领我进行更多调查，我已编辑问题添加更多信息。

啊，您似乎遗漏了两部分：围栏代码块是非标准的（您可能需要启用它们或使用不同的 Markdown 解析器）和语法突出显示（通常与 Markdown 分开处理）。

【参考方案1】：

Github 提供了自己的 ruby​​ gem 来执行此操作：https://github.com/github/markup。 您只需要安装正确的依赖项就可以了。

【讨论】：

谢谢，您的评论引导我进行更多调查，我已编辑问题添加更多信息。

【参考方案2】：

您需要启用一些非标准功能。

隔离代码块

Fenced 代码块是非标准的，并且在大多数 Markdown 解析器上默认不启用（一些较旧的解析器根本不支持它们）。根据Redcarpet的docs，你要启用fenced_code_blocks扩展：

:fenced_code_blocks: 解析围栏代码块，php-Markdown 风格。以 3 个或更多 ~ 或反引号分隔的块将被视为代码，无需缩进。可以在代码块的开放栅栏的末尾添加一个可选的语言名称。

语法高亮

大多数 Markdown 解析器不做代码块的语法高亮。而那些这样做的人总是将其作为一种选择。即使这样，您仍然需要提供自己的 CSS 样式来正确设置代码块的样式。事实证明，Redcarpet 确实包含对prettify 渲染器的prettify 选项的支持：

:prettify: 为 google-code-prettify 添加 prettyprint 类到 <code> 标记。

您需要从 google-code-prettify 项目中获取 javascript 和 CSS 以包含在您的页面中。

解决方案

最后你会需要这样的东西：

renderer = Redcarpet::Render::HTML.new(prettify: true)
markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true)
html = markdown.render(source_text)

【讨论】：

好的，我们已经前进了。它改变了代码的颜色。但是还没有盒子……我又更新了帖子……

“框”只是在 CSS 规则中定义的背景颜色。例如，在 *** 上，规则 code background-color: #eff0f1; 定义了代码块的背景颜色。 Markdown 处理器不会提供这种东西。您要么需要自己定义它，要么使用某种提供“主题”的框架，例如静态站点生成器。但这些是不同的问题，应该单独提出。

非常感谢韦兰。但我不敢相信没有简单的一两行代码已经使它看起来与 GitHub 或 BitBucket 相同或非常相似。肯定有人已经解决了....如果没有的话有一个很好的机会去宝石。

你应该看看static site generators (more here)。当然，提出工具推荐超出了 *** 的范围，所以我对这个问题没有进一步的意见。