CODEWITHSUNDEEP
markdowngithub-flavored-markdown
DMH
DMH

Reputation: 2809

code block inside table row in Markdown

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.

Upvotes: 117

Views: 97040

Answers (7)

Sangria
Sangria

Reputation: 163

The above answer is very valuable for reference, but using too much HTML can easily disrupt the plain text readability of Markdown. I prefer to use anchor to replace multi-line text in tables.

## Title

| Name    | Code                      |
| ------- | ------------------------- |
| `Hello` | [code-hello](#code-hello) |

## Ref

### Code

<details id="code-hello" open>
<summary >code-hello</summary>

```go
package main

import "fmt"

func main() {
    fmt.Println("Hello, World!")
}
```

</details>

Upvotes: -1

Minhas Kamal
Minhas Kamal

Reputation: 22126

Github Flavored Markdown Supports HTML Tag

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": "[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)
  );
}

Upvotes: 51

Ash K
Ash K

Reputation: 3631

Code block inside Markdown table row with syntax highlighting šŸŽØ

GitHub version

| Status | Response  |
| ------ | --------- |
| 200    |Some code here:<br><pre lang="json">{&#13;  "id": 10,&#13;  "username": "alanpartridge"&#13;}</pre>|
| 400    |Some text here|

The above markdown is displayed as:

StackOverflow version

<!-- language-all: json -->

| Status | Response  |
| ------ | --------- |
| 200    |Some code here:<br><pre><code>{<br>  "id": 10,<br>  "username": "alanpartridge"<br>}</code></pre>|
| 400    |Some text here|

The above markdown is displayed as:

Status Response
200 Some code here:
{
  "id": 10,
  "username": "alanpartridge"
}
400 Some text here

Reference

Upvotes: 8

palotasb
palotasb

Reputation: 4648

You'll have to use HTML <table>, <tr>, <td> tags to create the table, but you can format the content of table cells using Markdown.

Leave extra blank lines inside the HTML tags around the Markdown content. Inside tables, leave a blank line after the <td> and one before the </td>, otherwise the Markdown inside won't be displayed. (Technically this creates a new <p> paragraph inside the cell, and Markdown parsing is re-enabled inside paragraphs.)

<table>
<tr>
<td> Status </td> <td> Response </td>
</tr>
<tr>
<td> 200 </td>
<td>

ā†‘ Blank line!
```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"
}
```
ā†“ Blank line!

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

**Markdown** _here_. (ā†•ļøŽ Blank lines above and below!)

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

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

(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.)

Upvotes: 92

fanjieqi
fanjieqi

Reputation: 562

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

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

Upvotes: 28

defdefred
defdefred

Reputation: 9

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

Upvotes: 0

Neil Dixon
Neil Dixon

Reputation: 322

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.

Upvotes: 25

Related Questions