【问题标题】：How to prevent Markdown's list from eating spaces?如何防止 Markdown 的列表吃空格？
【发布时间】：2019-05-07 01:25:46
【问题描述】：

我有：

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

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

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

我想让默认值垂直对齐。

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

【问题讨论】：

git 对降价一无所知。我认为您可能指的是托管服务（如 Github）添加的附加功能。如果是这种情况，请使用正确的托管服务进行标记。

标签： list bitbucket markdown vertical-alignment readme

【解决方案1】：

你可能不能，除非你使用表格而不是列表。

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

如果您使用的网站没有去除原始 HTML 和/或样式属性，那么内联浮动可能会起作用：

- `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>

长答案

折叠空格是 HTML 的一个“特性”，Markdown 是其中的一个子集。 “特征”通常被称为“无关紧要的空白”。这个想法是所有空格（空格、制表符、换行符等）都被折叠成一个空格（参见summary of whitespace behavior options）。请注意，空格的折叠是由您的浏览器完成的，而不是 Markdown 解析器。如果您使用浏览器的“查看源代码”的“检查”功能，您会看到 HTML 列表保留了空格：

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

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

<pre> 标记保留空白，但它是块级标记，不能内联使用。由于您只需要保留一些内联空格，而不是整个文本块，因此这没有用。
whitespace:pre CSS 规则可用于实现该效果，但在您的 Markdown 中看起来很丑。此外，出于安全原因，Bitbucket 可能会删除您的 style 标签（确实如此）。
```
- `foo`: some text Default: false
- `barThatIsTooLong`: again some text Default: true
```
由于不间断空格不会折叠，您可以使用它们而不是常规空格。事实上，您只需要每隔一个空间成为一个不间断的空间。但是，这又是丑陋的。更糟糕的是，由于不间断空格是作为 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 的网站不使用等宽字体（代码块除外）。因此，一行中每个字母的宽度不相等，您的列仍然不会对齐。请注意，在 SO 上也存在相同的情况。上面的最后一个示例呈现如下：

foo：一些文字默认值：false

barThatIsTooLong：又是一些文字默认值：true

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

当然，网站一直都有栏目。但是这些列不是用内联文本“伪造”的。每列都包含在自己的块级元素中，CSS 规则适当地定位和调整包含框的大小，如this answer 中所示。但同样，这需要原始 HTML 和 CSS，出于安全原因，Bitbucket 可能不允许使用这些 HTML 和 CSS。

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

- `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。所以如果你真的想要列，你可以将它们实现为表。当然，除了列标题之外，您还需要表格行而不是列表项，您可能想要也可能不想要。

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

【讨论】：