标记中表行内的代码块

我正在用 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"
}

我是新来的,如果有人能给我指明正确的方向,我将不胜感激。

57531 次浏览

Github markdown doc 指出,可以在表单元格中包含 inline/span 标记。除了少数试图对餐桌布局建立更多控制的产品之外,大多数降价产品也是如此。

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

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

或者,使用传统的 html 方式创建表,这样就可以使用 rowspan实现更好的布局控制。

Github 风格标记支持 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>

标记编辑器对于在编写时可视化输出非常有帮助。

取代 <pre>标记,我们还可以使用三重回勾 ```来显示代码块。


编辑: 你也可以像这样试试基于文本的表-

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

< a href = “ https://www.tablesgenerator.com/Text _ Tables”rel = “ noReferrer”> Text Tables Generator 是一个很好的网站。


编辑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){ < br > for (< br > ; < br > m% k-? : (k = m + +) ; < br > k ^ 1? : printf (“% i |”,m) < br >) ; < br > }
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>

这个也许更好:

| 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 { < br > “ id”: 10,< br > “ username”: “ alanpartridge”,< br > “ email”: & quot; alan@alan.com”,< br > “ password _ hash”: “ $2a $10 $uhUIUmVWVnrBWx9rDWhS.CPCWCZsyqqa8。/whhfzBZydX7yvahHS”,< br > “ password _ salt”: “ $2a $10 $uhUIUmVVVnrBWx9rrDWhS。”,< br > “ create _ at”: “2015-02-14T20:45:26.433 Z”,< br > “ update _ at”: “2015-02-14T20:45:26.540 Z”< br > }
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
{ < br > “ id”: 10,< br > “ username”: “ alanpartridge”,< br > “ email”: & quot; alan@alan.com”,< br > “ password _ hash”: “ $2a $10 $uhUIUmVWVnrBWx9rDWhS.CPCWCZsyqqa8。/whhfzBZydX7yvahHS”,< br > “ password _ salt”: “ $2a $10 $uhUIUmVVVnrBWx9rrDWhS。”,< br > “ create _ at”: “2015-02-14T20:45:26.433 Z”,< br > “ update _ at”: “2015-02-14T20:45:26.540 Z”< br > }
400 {
"code": 400,
"msg": balabala"
}

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

标记语法在 HTML 块工作,如果你 在 HTML 标签周围留下额外的空行: 一个之后的 <td>和一个之前的 </td>否则标记内部将不会被解析!这将创建一个新的 <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>

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

(如果你想修复“400”和“ Markdown here”之间的错误垂直对齐,也可以在“400”周围添加空行,这样也可以将其包装在 <p>中。)