75

我在 Github 风格的 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 的新手，如果有人能指出我正确的方向，我将不胜感激。

4

5 回答 5

35

正如其他人指出的那样，您必须使用 HTML<table>标记来创建表格。但是，可以仅使用 Markdown 格式化表格单元格的内容

如果您在 HTML 标记周围留下额外的空白行，则HTML 块中的 Markdown 语法可以工作：在 the 之后<td>和之前的一个，</td>否则内部的 Markdown 将不会被解析！这将创建一个新<p>段落，其中在表格单元格内重新启用 Markdown 解析。

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

^ Extra blank line above!
```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"
}
```
V Extra blank line below!

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

**Markdown** _here_. (Blank lines needed before and after!)

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

在 GitHub 上使用上述代码创建的表格的预览图像

（如果你想修复“400”和“Markdown here”之间的错误垂直对齐，也可以在“400”周围添加空白行，这也会将其包裹在 a<p>中。）

于 2020-03-03T08:09:51.623 回答
30

Github Flavored Markdown 支持 HTML 标签

github markdown 表格代码

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

输出-

姓名 签名代码
明哈斯·卡迈勒 
main(m,k){ 
  for( 
    ; 
    m%k--?:(k=m++); 
    k^1?:printf("%i|",m) 
  ); 
}
于 2018-10-03T05:34:26.660 回答
22

github markdown 文档指出您可以在表格单元格中包含内联/跨度 markdown 标签。这对于大多数降价风格都是一样的，除了一些试图建立对表格布局的更多控制的人。

您可以使用内联代码元素接近，但不会使用语法着色或行缩进进行格式化。

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

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

于 2015-02-14T11:05:45.177 回答
14

这个可能更好：

| 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，
“用户名”：“alanpartridge”，
“电子邮件”：“alan@alan.com”，
“password_hash”：“$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS”，
“password_salt”：“$2 a$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 中，删除lang="json"from<pre>确实会将整个<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，
  “用户名”：“alanpartridge”，
  “电子邮件”：“alan@alan.com”，
  “password_hash”：“$2a$10$uhUIUmVWVnrBWx9rrDWhS.CPCWCZsyqqa8./whhfzBZydX7yvahHS”，
  “password_salt”：“$2 a$10$uhUIUmVWVnrBWx9rrDWhS.", 
  "created_at": "2015-02-14T20:45:26.433Z", 
  "updated_at": "2015-02-14T20:45:26.540Z" 
}
400 {
"code": 400,
"msg": balabala"
}
于 2019-12-17T07:28:21.693 回答
0 
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>
于 2019-12-01T08:59:35.687 回答