如何防止Markdown的列表吃空格？

Question

我有：

- `foo`: some text                       Default: false
- `barThatIsTooLong`: again some text    Default: true

但在 Bitbucket README 中，空格会自动被吃掉，这将显示为：

foo：一些文本默认值：false
barThatIsTooLong：又是一些文本默认值：true

我想让默认值垂直对齐。

如何告诉 Bitbucket 的降价不吃我的空间？有可能吗？

Answer 1

你可能做不到，除非你使用 tables 而不是列表。

| Variable           | Description     | Default |
| -------------------|---------------- | ------- |
| `foo`              | some text       | false   |
| `barThatIsTooLong` | again some text | true    |

如果您使用的网站未去除原始 HTML and/or 样式属性，则内联浮动可能有效：

- `foo`: some text                    <span style="float:right; width:10em;">Default: false</span>
- `barThatIsTooLong`: again some text <span style="float:right; width:10em;">Default: true</span>

长答案

崩白space是HTML的"feature"，Markdown是其中的一个子集。 "feature" 通常被称为 "insignificant whitespace." 其思想是将所有白色 space（space、制表符、换行符等）折叠成单个 space（参见 summary of whitespace behavior options）。请注意，白色 space 的这种折叠是由您的浏览器完成的，而不是 Markdown 解析器。如果您使用浏览器的 "view source" of "inspect" 功能，您会看到 HTML 列表保留了白色 space:

<ul>
<li><code>foo</code>: some text                       Default: false</li>
<li><code>barThatIsTooLong</code>: again some text    Default: true</li>
</ul>

换句话说，Markdown 不是在吃你的白space，你的浏览器是。所以下一个问题是如何在 HTML 中保留 whitespace 以及如何将其合并到您的 Markdown 中。有许多不同的方法可以做到这一点，但最终，它们不会如您所愿。

<pre> 标签保留白色 space，但它是一个 block-level 标签，不能内联使用。因为您只想要一些内联白色space，而不是整个文本块，所以这没有用。
whitespace:pre CSS 规则可用于获得该效果，但在您的 Markdown 中看起来会很丑陋。此外，出于安全原因，Bitbucket 可能会删除您的 style 标签（也是如此）。
```
- `foo`: some text Default: false
- `barThatIsTooLong`: again some text Default: true
```
由于 non-breaking space 没有折叠，您可以使用它们而不是常规的 space。其实你只需要隔一个space就可以成为一个non-breakingspace。但是，这又是丑陋的。更糟糕的是，由于 non-breaking space 作为 HTML 实体输入，一个显示的字符在 Markdown 中有 6 个字符长，因此这些列在源文档中没有正确排列。
```
- `foo`: some text &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Default: false
- `barThatIsTooLong`: again some text &nbsp; &nbsp;Default: true
```

但即使您使上述其中一项起作用，浏览器可能仍不会按您的需要显示您的列表。与大多数网站一样，Bitbucket 不为其网站使用 monospace 字体（代码块除外）。因此，一行中每个字母的宽度不相等，您的列仍然不会对齐。请注意，在 SO 上存在相同的情况。上面的最后一个示例呈现如下：

foo: some text Default: false

barThatIsTooLong: again some text Default: true

您可以在您的编辑器中看到相同的效果。如果将字体从 monospace 字体更改为比例字体，您会注意到列将错位。并且这种错位会随着每种不同的比例字体而变化。因此，简单地调整 space 的数量并不能保证正确对齐。您甚至可能会遇到 half-width 错位。

当然，网站一直都有专栏。但是这些列不是 "faked" 内联文本。每列都包裹在自己的 block-level 元素中，并且 CSS 适当地规定包含框的位置和大小，如 this answer 中所示。但同样，这需要原始 HTML 和 CSS，出于安全原因，Bitbucket 可能不允许。

另一种选择可能是使用内联浮点数：

- `foo`: some text                    <span style="float:right; width:10em;">Default: false</span>
- `barThatIsTooLong`: again some text <span style="float:right; width:10em;">Default: true</span>

这会导致  浮动到包含块（列表项）的最右边缘。为避免浮动项目出现右对齐，我们包含了 width 以确保每个  具有相同的宽度。实际宽度需要至少与 span 中最大的文本一样宽。但是，出于安全原因，Bitbucket 可能会删除原始 HTML 的事实仍然存在。

但是，Bitbucket 的 Markdown 实现支持简单 tables。所以如果你真的想要列，你可以将它们实现为 tables。当然，除了 headers 列之外，您还需要 table 行而不是列表项，您可能想要也可能不想要。

| Variable           | Description     | Default |
| -------------------|---------------- | ------- |
| `foo`              | some text       | false   |
| `barThatIsTooLong` | again some text | true    |

如何防止Markdown的列表吃空格？

How to prevent Markdown's list from eating spaces?

list

bitbucket

markdown

vertical-alignment

readme

长答案