code block inside table row in Markdown

DMH picture DMH · Feb 13, 2015 · Viewed 34.6k times · Source

I am putting together some documentation in Github flavoured Markdown and I want to put together a table that has two rows. One with simply text and one with a json code block. Heres an example.

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

I want to get this code inside the response row but when ever I try it completely breaks.

json
  {
    "id": 10,
    "username": "alanpartridge",
    "email": "[email protected]",
    "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"
}

I am new to Markdown and if anyone could point me in the right direction it would be very much appreciated.

Answer

Minhas Kamal picture Minhas Kamal · Oct 3, 2018

Github Flavored Markdown Supports HTML Tag

Simply put this (StackOverflow will not support though)-

<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": "[email protected]",
    "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>

Output:

github markdown table-code

Markdown Editor can really be helpful to visualize output as you write.

Instead of <pre> tag we may also use triple-backticks ``` for showing a code block.


You may also try text-based table like this (suited for StackOverflow)-

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

Text Tables Generator is a wonderful site for this purpose.