How to disply two markdown code blocks side by side

Question

I would like to display two blocks of a source codes side by side -before refactoring and after. Is it possible to create two code blocks side by side? If not then what is the alternative solution?

Answer 1

There is no way to create multi-line code blocks in a single table cell using bare Markdown syntax - but you can use verbatim HTML to accomplish this. Here is an example two-column table with side-by-side code (note that this HTML goes side-by-side with the rest of your 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": "[email protected]",
  "order_id": "3544fc0"
}
</pre>
</td>
<td>

```json
{
  "id": 5,
  "username": "mary",
  "email": "[email protected]",
  "order_id": "f7177da"
}
```

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

which is rendered as:

Answer 2

A modified version of the other answer does work to get side-by-side syntax highlighting on 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": "[email protected]",
  "order_id": "3544fc0"
}
```
  
</td>
<td>

```json
{
  "id": 5,
  "username": "mary",
  "email": "[email protected]",
  "order_id": "f7177da"
}
```

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

Demo: https://gist.github.com/nottheswimmer/7837eec10fac0d1197fc5a8bfc0b96f3