没有空行的多行块引用

Question

这应该是非常简单的，但要么我没有正确阅读文档，要么 Kramdown 不支持它。我正在尝试将命令行输出放在博客 post 中，我想为此使用块引用。但是，kramdown 坚持将所有内容放在同一行的同一块引用中。

我可以在 blockquote 的每一行之间放置一个 space 但这不是输出的真实表示。我如何创建块引用，但实际上每行都在单独的行上，每行之间没有 spaces。我想我正在寻找更多 "preformatted" 输出，但我没有看到 kramdown 支持它。

Answer 1

kramdown insists on putting everything in the same blockquote on the same line

这不是 kramdown，这是 HTML 的正常行为。使用以下降价：

> One
> Two
> Three

kramdown 将创建此 HTML，所有行分开：

<blockquote>
  <p>One
Two
Three</p>
</blockquote>

当您查看此内容时，浏览器会将白色的所有运行space 合并为一个 space，因此它们将全部显示在同一行上：

One Two Three

最简单的解决方案是使用 code block 而不是块引号，使用缩进或围栏代码块，如下所示：

~~~
One
Two
Three
~~~

这将生成 HTML:

<pre><code>One
Two
Three
</code></pre>

pre 标签的默认样式将导致各行分开：

One
Two
Three

如果你真的想在这里使用块引用，有几个可能的解决方案。您可以在每行末尾添加两个 space 以创建一个 <br> 元素以强制换行：

（这里我使用下划线来演示 space 应该放在哪里。你需要使用实际的 space 才能工作。）

> One__
> Two__
> Three__

这将生成：

<blockquote>
  <p>One<br />
Two<br />
Three</p>
</blockquote>

另一种可能的解决方案是对块引用应用适当的样式。 Kramdown 允许添加 class 和 id 属性，因此您可以指定哪些块获得样式：

<style>
.cmd-line > p {
  white-space: pre;
}
</style>

Hello

{: .cmd-line }
> One
> Two
> Three

white-space: pre 样式会导致源中的换行符出现在呈现的 HTML.

Answer 2

One
Two
Three

Multi-line blockquote without blank line