code block inside table row in Markdown

Markdown Problem Overview

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.

Markdown Solutions

Solution 1 - Markdown

As others have pointed out, you'll have to use HTML <table> tags to create the table. It is possible however to format the contents of the table cells using Markdown only

Markdown syntax within HTML blocks works if you leave extra blank lines around the HTML tags: one after the <td> and one before the </td> otherwise the Markdown inside won't be parsed! This creates a new <p> paragraph where Markdown parsing is re-enabled inside the table cells.

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

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

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

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

(If you want to fix the bad vertical alignment between "400" and "Markdown here", add blank lines around the "400" too, which will wrap that in a <p> as well.)

Solution 2 - Markdown

Github Flavored Markdown Supports HTML Tag

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

_{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.}

EDIT: You may also try text-based table like this-

+---------------+--------+---------+
|       \       | 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.}

EDIT 2: The following code works both for GitHub and 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> |

Output-

Name	Signature Code
Minhas Kamal	main(m,k){ for( ; m%k--?:(k=m++); k^1?:printf("%i\|",m) ); }

Solution 3 - Markdown

The github markdown doc states that you can include inline/span markdown tags within table cells. This is the same for most flavours of markdown other than a few which have been trying to establish more control over table layouts.

You could get close with inline code elements, but that will not format with syntax colouring, or line indents.

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

Alternatively, create your table the old-fashioned way with html, which gives you rowspan for greater layout control.

Solution 4 - Markdown

This one maybe better:

| Status | Response  |
| ------ | --------- |
| 200    |<pre lang="json">{<br>  "id": 10,<br>  "username": "alanpartridge",<br>  "email": "[email protected]",<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>|

Both of them need the <br>, it depends on you like the <pre> or <code>.

In stackoverflow, the above displays as:

Status Response

200

Status	Response
200	{ "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" }
400	`{ "code": 400, "msg": balabala" }`

{
  "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"
}

400 { "code": 400, "msg": balabala" }

Which doesn't display the <pre lang="json"> block as code.

However, in stackoverflow, removing the lang="json" from <pre> does display the entire <pre> block as a code block. That is:

| Status | Response  |
| ------ | --------- |
| 200    |<pre>{<br>  "id": 10,<br>  "username": "alanpartridge",<br>  "email": "[email protected]",<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>|

displays as: