【问题标题】:Multi-line blockquote without blank line没有空行的多行块引用
【发布时间】:2023-03-28 23:48:01
【问题描述】:

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

我可以在块引用的每一行之间放置一个空格,但这并不是输出的真实表示。如何创建块引用,但每行实际上都在单独的行上,每行之间没有空格。我想我正在寻找更多“预格式化”输出,但我没有看到 kramdown 支持。

【问题讨论】:

标签: kramdown


【解决方案1】:

kramdown 坚持将所有内容放在同一行的同一块引用中

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

> One
> Two
> Three

kramdown 将创建这个 HTML,所有的行都是分开的:

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

当您查看此内容时,浏览器会将所有运行的空白折叠到一个空格中,因此它将全部显示在同一行:

一个 二 三

最简单的解决方案是使用code block 而不是块引用,或者使用缩进或这样的围栏代码块:

~~~
One
Two
Three
~~~

这将生成 HTML:

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

pre 标签的默认样式将导致行是分开的:

One
Two
Three

如果你真的想在这里使用块引用,有几个可能的解决方案。您可以在每行的末尾添加两个空格来创建 &lt;br&gt; 元素来强制换行:

(这里我使用下划线来说明空格应该放在哪里。你需要使用实际的空格才能工作。)

> One__
> Two__
> Three__

这将生成:

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

另一种可能的解决方案是对块引用应用适当的样式。 Kramdown 允许添加 classid 属性,因此您可以具体说明哪些块获得样式:

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

Hello

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

white-space: pre 样式将导致源代码中的换行符出现在呈现的 HTML 中。

【讨论】:

  • 啊,代码块确实是我想要的。我只是将第 4 行缩进了 4 个空格,它按照我的预期呈现。我没有将命令行输出等同于代码,以为我需要一个块引用但没有(教科书 XY 问题......哈哈!xyproblem.info
  • 接受white-space 解决方案的答案。就我而言,我不得不使用blockquotes。
【解决方案2】:

只需使用Hard line breaks

一个
两个

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-10-10
    • 2021-02-01
    • 2018-02-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-05-07
    • 2015-12-29
    相关资源
    最近更新 更多