在Github Markdown中,列表项之间出现额外的空行

10

我有一个包含六个列表的Readme文件。

一切都很好,直到倒数第二个列表。问题是在这些列表项之间出现了额外的换行符。通过截图可以更清楚地看到:

enter image description here

我正在使用Sublime Text中的Markdown预览插件,并且如果使用GitHub的Markdown预处理器进行预览,我也会看到同样的格式问题。

然而,最奇怪的是,如果我输入文本到https://jbt.github.io/markdown-editor,我就不会看到同样的问题。

如果您想要尝试,请使用以下字符串:

_git_

- **gl**: `git log <optional args>` _shows the revision history_
- **gpoh**: `git push origin head` _pushes the current branch_
- **gpom**: `git push origin master` _pushes the master branch_
- **grv**: `git remote -v` _lists the remotes_
- **gs**: `git status` _shows unstaged & staged changes_
- **gacm**: `git add -A; git commit -m "<message>"` _commits all changes with a message_
- **gacm-lfs**: `sudo git add -A; sudo git commit -m <message>` _it might not be this way for everyone,
  but for me `sudo git` uses git-lfs (git large filesystem) while `git` uses regular git. This function
  adds and commits all files with a message in a git-lfs repo._
- **gc**: `git checkout <branch>` _changes branches_
- **gclo**: `git clone <repo>` _clones a repo_
- **get_branch**: `git branch -f origin/<branch>; git checkout <branch>` _gets a specific branch from a remote repo_

_fish meta functions_

- **backup_functions**: `cd ~/.config/fish/functions; git add -A; git commit -m "<message>"; git push origin master; cd -` _backups the functions folder into a repo_
- **cdfns**: `cd ~/.config/fish/functions` _changes into the functions dir_
- **cfn**: `cat ~/.config/fish/functions/<name>.fish` _shows the definition of a function_
- **efn**: `nano ~/.config/fish/functions/<name>.fish` _edits a function's definition (using nano)_
- **fn**: `echo -e "function $argv[1]\n  $argv[2]\nend" > ~/.config/fish/functions/$argv[1].fish` _create a function_
- **fns**: `ls ~/.config/fish/functions` _list functions_
- **rmfn**: `rm ~/.config/fish/functions/<name>.fish` _remove a function_
- **fndoc**: `echo -e "- <text>" >> ~/.config/fish/functions/README.md` _adds a line to the readme documenting a function_
- **fs**: `funcsave <name>` _alias for funcsave, e.g.:_

      function fs
        funcsave $argv
      end
      fs fs
1个回答

12
您的第一个列表是“紧凑”列表,而第二个列表是“松散”列表,因为其中一个列表项包含代码块。如果您想使这些列表匹配,请使用相同类型。在第一个列表项之间添加空行将使它们匹配。如spec所解释:

如果构成列表的任何列表项之间有空行,或者任何列表项直接包含两个具有空行的块级元素,则该列表是松散的。否则,列表是紧凑的。(HTML输出的差异在于,松散列表中的段落包装在<p>标签中,而紧凑列表中的段落不会。)

举个简单的例子,这个列表:

* line 1
* line 2

将呈现为以下HTML:

<ul>
    <li>line 1</li>
    <li>line 2</li>
</ul>

而这个列表:

* line 1
* line 2

  a second block

会被渲染为:

<ul>
    <li>
        <p>line 1</p>
    </li>
    <li>
        <p>line 2</p>
        <p>a second block</p>
    </li>
</ul>

请注意第二个列表项包含多个段落。因此,列表项中的每个段落都被包裹在<p>标签中,使列表成为“宽松”列表。为了保持一致性,列表中的所有项目都被包裹在<p>标签中(包括第一个项目)。虽然该示例使用了段落,但同样适用于任何块级结构,包括您示例中的代码块。
您还可以通过在列表项之间添加空行来强制列表成为“宽松”列表。例如,此列表:
* line 1

* line 2

这个HTML中的结果:

<ul>
    <li>
        <p>line 1</p>
    </li>
    <li>
        <p>line 2</p>
    </li>
</ul>

因此,如果在您的第一个列表中至少有两个项目之间添加一个空行,则两个列表将始终显示一些空白间隔。将列表项内容包装在<p>标签中添加空白间隔的原因是页面的样式(CSS)已经为<p>标签定义了填充和/或边距。可以编辑CSS以在自己的网站上删除这个填充/边距,但在第三方主机上通常不是一个选项。
关于为什么有些工具似乎没有展现这种行为; 可能是因为它们具有默认的CSS样式,导致两种类型的列表看起来相同(例如,StackOverflow就是这样做的)。另一种可能性是它们使用了一个老式的Markdown解析器,而不是较新的CommonMark规范(GitHub使用的规范)。原始的Markdown规则也有松散和紧凑列表的概念,但行为没有被如此明确定义,因此不同的实现表现略有不同。许多人遵循参考实现,只将列表项与空白行相邻的"松散"和所有其他项"紧密"。在你的例子中,只有最后一项是"松散"的,但由于它是列表中的最后一项,所以不太明显。有关各种实现行为的比较,请参见Babelmark
无论实现方式如何,如果您想要“紧凑”的列表,则始终获得它的唯一方法是在列表项中不包含任何空行。这意味着您永远不能嵌套其他块级结构,除了一些非常特定的例外情况:
  1. The obvious exception would be nested lists, but even then, you would need to avoid blank lines (see example):

    * parent item
        * nested item
        * Another nested item
    * sibling of parent
    * Another sibling of parent
    
  2. A nested codeblock or blockquote can be nested in some implementations, but it needs to start on the first line of the list item and contain no blank lines.

    * list item
    *     A code block because it is indented appropriately
    * > a blockquote
    * a list item
    

    As you can see in that example, it only works in some implementations. Notably, the CommonMark implementations. In other words it will work on GitHub, but it may not with other tools or on other sites.

无论如何,如果您有多个子段落、代码块和/或引用块,就不能拥有一个紧凑的列表。

2
谢谢,我之前不知道这个区别。有没有办法让它成为紧凑列表? - max pleaner
不。只有在列表中绝对没有空行的情况下,才会得到紧凑列表,这意味着没有块级结构(没有代码块)。 - Waylan
1
我刚刚在结尾处添加了一段解释,说明为什么某些实现会表现出不同的行为。 - Waylan
1
我还添加了一些有限的方法示例,以获取具有块级子元素的紧凑列表。 - Waylan

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接