logo标签列表

Markdown中表格行内的代码块

markdowngithub-flavored-markdown
96

我正在Github flavoured Markdown中编写一些文档，我想组合一个具有两行的表格。其中一个行只有文字，另一个行包含JSON代码块。以下是一个示例：

| Status | Response  |
|---|---|
| 200 |  |
| 400 |   |

我想把这段代码放在响应行里，但每次我尝试都会完全破坏它。

json
  {
    "id": 10,
    "username": "alanpartridge",
    "email": "alan@alan.com",
    "password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",
    "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",
    "created_at": "2015-02-14T20:45:26.433Z",
    "updated_at": "2015-02-14T20:45:26.540Z"
}

我对Markdown很陌生，如果有人能指点我一下方向，我将非常感激。

5个回答
60
你需要使用HTML的、和前面再留一个空行，否则内部的Markdown将不会显示出来。（从技术上讲，这会在单元格内创建一个新的

段落，并且Markdown解析会在段落内重新启用。）

<table>
<tr>
<td> Status </td> <td> Response </td>
</tr>
<tr>
<td> 200 </td>
<td>

↑ Blank line!
```json
json
{
    "id": 10,
    "username": "alanpartridge",
    "email": "alan@alan.com",
    "password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",
    "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",
    "created_at": "2015-02-14T20:45:26.433Z",
    "updated_at": "2015-02-14T20:45:26.540Z"
}
```
↓ Blank line!

</td>
</tr>
<tr>
<td> 400 </td>
<td>

**Markdown** _here_. (↕︎ Blank lines above and below!)

</td>
</tr>
</table>

Preview image of the table created with the code above on GitHub

标签中。）

标签来创建表格，但是你可以使用Markdown格式化表格单元格的内容。
在HTML标签周围的Markdown内容中留下额外的空行。在表格中，在		后面留一个空行，在
（如果你想修复“400”和“Markdown here”之间的垂直对齐问题，也可以在“400”的周围添加空行，这样会将其包裹在一个
1
谢谢！不仅是额外的空白行会搞乱整个表格，<tab>也会。Github风格的Markdown有时候真的很“有趣”。 - davidkonrad
43

Github Flavored Markdown支持HTML标记

github markdown table-code

<table>
<tr>
<th>
Status
</th>
<th>
Response
</th>
</tr>

<tr>

<td>
<pre>
<br/><br/><br/>200<br/><br/><br/><br/><br/>400<br/>
</pre>
</td>

<td>
<pre>
json
  {
    "id": 10,
    "username": "alanpartridge",
    "email": "alan@alan.com",
    "password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",
    "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",
    "created_at": "2015-02-14T20:45:26.433Z",
    "updated_at": "2015-02-14T20:45:26.540Z"
}
</pre>
</td>

</tr>
</table>

使用Markdown编辑器可以在写作时帮助您可视化输出。

与使用<pre>标签不同，我们也可以使用三个反引号```来显示代码块。

编辑：您还可以尝试像这样的基于文本的表格-

+---------------+--------+---------+
|       \       | Rating | Comment |
+---------------+--------+---------+
| One Piece     |  A | B |       ♢ |
+---------------+----+---+---------+
| Naruto        |  A | C |       ♧ |
+---------------+----+---+---------+
| One Punch Man |  A | A |       ♥ |
+---------------+----+---+---------+
| Death Note    |  A | B |       ♠ |
+---------------+----+---+---------+

文本表格生成器 是一个非常好用的网站。

编辑2：以下代码适用于GitHub和StackOverflow-

| Name | Signature Code                 |
|------|--------------------------------|
| Minhas Kamal | <pre>main(m,k){<br>  for(<br>    ;<br>    m%k--?:(k=m++);<br>    k^1?:printf("%i\|",m)<br>  );<br>}</pre> |

输出-

名称 签名代码
Minhas Kamal 
main(m,k){
  for(
    ;
    m%k--?:(k=m++);
    k^1?:printf("%i|",m)
  );
}
15
为什么反引号 ``` 在文本表格中无法正常工作？ - Ivan Aracki
1
@IvanAracki 为了让表格看起来精确，我们需要使用等宽字体。因此，我们将整个表格放在代码块中。但是我们不能在代码块内部编写另一个代码块。不过，反引号（`` `）可以在HTML标签中使用。 - Minhas Kamal
阅读您的答案，听起来在Markdown中不可能有一个Markdown表格，其中一些表格单元格是代码块。但是，在stackoverflow / exchange中可以使用HTML显示这样的表格吗？我有一个类似的问题：https://meta.stackexchange.com/questions/372523/how-to-properly-embed-a-code-block-into-a-markdown-table-cell-alternatively-ho?noredirect=1#comment1244017_372523. - joseville
似乎在这种情况下我们不能完全依赖纯Markdown。Markdown实际上是一种简化的、不完整的标记语言迭代。 - Minhas Kamal
24

Github的markdown文档指出，您可以在表格单元格中包含内联/跨度markdown标记。这适用于除了一些试图增强对表格布局控制的markdown变体以外的大多数markdown。

您可以使用内联代码元素来实现类似的效果，但是那样无法使用语法高亮或行缩进。

| Status | Response  |
| ------ | --------- |
| 200    | `json`                          |
|        | `   {`                          |
|        | ` "id": 10,`                    |
|        | ` "username": "alanpartridge",` |
|        | ` more code...`                 |
|        | `}`                             |
| 400    |                                 |

或者，您可以使用HTML以传统方式创建表格，这样可以使用rowspan更好地控制布局。

7
如果使用老式的HTML，您不需要使用rowspan。浏览器会自动处理。只需将代码嵌入<pre>标签中即可（您无法获得MD语言特定的代码语法高亮显示）。 - Cheeso
12
实际上，这个渲染效果不是很好。 - einpoklum
1
这段代码呈现了几行代码，但每一行都有不同的背景。 - nandoquintana
请查看我下面的答案，解决了提到的渲染问题，并允许在单个表格单元格中使用完整的Markdown代码块：https://dev59.com/1l4b5IYBdhLWcg3w9FkI#60502719 - palotasb
24

这个也许更好：

| Status | Response  |
| ------ | --------- |
| 200    |<pre lang="json">{<br>  "id": 10,<br>  "username": "alanpartridge",<br>  "email": "alan@alan.com",<br>  "password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",<br>  "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",<br>  "created_at": "2015-02-14T20:45:26.433Z",<br>  "updated_at": "2015-02-14T20:45:26.540Z"<br>}</pre>|
| 400    |<code>{<br>  "code": 400,<br>  "msg": balabala"<br>}</code>|

两者都需要使用<br>，它取决于你是否喜欢<pre>或<code>。

在stackoverflow中，上面的内容显示为：

状态响应
200{
"id": 10,
"username": "alanpartridge",
"email": "alan@alan.com",
"password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",
"password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",
"created_at": "2015-02-14T20:45:26.433Z",
"updated_at": "2015-02-14T20:45:26.540Z"
}
400{
"code": 400,
"msg": balabala"
}

这不会将<pre lang="json">块显示为代码。

然而，在stackoverflow中，从<pre>中删除lang="json"将显示整个<pre>块作为代码块。也就是说：

| Status | Response  |
| ------ | --------- |
| 200    |<pre>{<br>  "id": 10,<br>  "username": "alanpartridge",<br>  "email": "alan@alan.com",<br>  "password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",<br>  "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",<br>  "created_at": "2015-02-14T20:45:26.433Z",<br>  "updated_at": "2015-02-14T20:45:26.540Z"<br>}</pre>|
| 400    |<code>{<br>  "code": 400,<br>  "msg": balabala"<br>}</code>|

显示为：

状态 响应
200 
{
  "id": 10,
  "username": "alanpartridge",
  "email": "alan@alan.com",
  "password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS",
  "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",
  "created_at": "2015-02-14T20:45:26.433Z",
  "updated_at": "2015-02-14T20:45:26.540Z"
}
400 {
"code": 400,
"msg": balabala"
}
3
<pre>标签上的lang="json"属性非常有用。 - Reed Dunkle
3
<br>标签不适用于pre和code标签内部！ - Kai Roesner
2
lang="json" 部分解决了我想要在表格单元格内对代码片段进行语法高亮的问题！ - Frank Wang
感谢您的答案。这正是我需要回答另一个问题的内容：https://meta.stackexchange.com/a/372524/1084071 - joseville
1
似乎在<pre>标签中添加lang=属性会导致GitHub Flavored Markdown中的嵌套<br>标签不再起作用。但是，您可以通过将<br>标签替换为HTML换行符转义字符（&#13;）来解决此问题，并获得具有工作语法突出显示的多行代码块。 - Dustin Martin
看起来 Markdown 解释器会影响结果，因为在我的环境中 <br/> 可以正常工作，而 <code> 标签比 <pre> 标签更接近回答这个问题。 - Michael
1
Status | Response
:----- | :-------
200    | <code>json {"id": 10,"username": "alanpartridge", "email": "alan@alan.com",<br>"password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS", "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",<br> "created_at": "2015-02-14T20:45:26.433Z", "updated_at": "2015-02-14T20:45:26.540Z" }</code>
400    | <code>json {"id": 10,"username": "alanpartridge", "email": "alan@alan.com",<br>"password_hash": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS", "password_salt": "$2a$10$uhUIUmVWVnrBWx9rrDWhS.",<br> "created_at": "2015-02-14T20:45:26.433Z", "updated_at": "2015-02-14T20:45:26.540Z" }</code>
2
这不会获取代码块的多行格式。所有的JSON都在同一行上呈现（可能会换行）。 - Gabe
这个答案是最接近解决问题的。@Gabe关于多行的说法是正确的，但是只需在每行后添加<br />即可解决此问题。问题是关于代码块的，但示例是JSON，因此所有答案都集中在示例而不是问题上。 - Michael
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接