如何并排显示两个降价代码块

Question

我希望在重构之前和之后并排显示两个源代码块.是否可以并排创建两个代码块？如果没有,那么替代解决方案是什么？

Answer 1

另一个答案的修改版本确实可以在 Github 上获得并排语法突出显示：

# Document Title

The usual [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
does not cover some of the more advanced Markdown tricks, but here
is one. You can combine verbatim HTML with your Markdown. 
This is particularly useful for tables.
Notice that with **empty separating lines** we can use Markdown inside HTML:

<table>
<tr>
<th>Json 1</th>
<th>Markdown</th>
</tr>
<tr>
<td>
  
```json
{
  "id": 1,
  "username": "joe",
  "email": "joe@example.com",
  "order_id": "3544fc0"
}
```
  
</td>
<td>

```json
{
  "id": 5,
  "username": "mary",
  "email": "mary@example.com",
  "order_id": "f7177da"
}
```

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

演示：https://gist.github.com/nottheswimmer/7837eec10fac0d1197fc5a8bfc0b96f3

Answer 2

无法使用裸 Markdown 语法在单个表格单元格中创建多行代码块 - 但您可以使用逐字 HTML 来完成此操作。这是一个带有并排代码的两列表格示例（请注意，此 HTML 与 Markdown 的其余部分并排）：

# Document Title

The usual [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
does not cover some of the more advanced Markdown tricks, but here
is one. You can combine verbatim HTML with your Markdown. 
This is particularly useful for tables.
Notice that with **empty separating lines** we can use Markdown inside HTML:

<table>
<tr>
<th>Json 1</th>
<th>Markdown</th>
</tr>
<tr>
<td>
<pre>
{
  "id": 1,
  "username": "joe",
  "email": "joe@example.com",
  "order_id": "3544fc0"
}
</pre>
</td>
<td>

```json
{
  "id": 5,
  "username": "mary",
  "email": "mary@example.com",
  "order_id": "f7177da"
}
```

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

呈现为：