Markdown multiline code blocks in tables when rows have to be specified with one-liners

Question

I have a table:

| YAY! | TABLE | \^^/ | 1-liner JSON column! |
| ---- | ----- | ---- | -------------------- |
| That |  has  | JSON | `{a: 1, b: 2, c: 3}` |
| Here |  is   | more | `{d: 4, e: 5, f: 6}` |

Is there any way for me to insert in multiline code blocks into a generated table cell?

score 74 · Accepted Answer · edited Feb 14 '21 at 07:48

74

Replace ` with <code> tags and use   and <br>for indentation.

Similarly you can use <pre> tags instead of ```.

edited Feb 14 '21 at 07:48

Jan Kaifer

664
4
18

answered Jun 12 '14 at 17:41

Meredith

3,928
4
33
58

2

`
` also works independently from `\`` or `` to force multiline cells. I've used/tested this in combination with `pandoc` converting `my.md` to `HTML`. – antiplex Aug 25 '16 at 07:18
I wasn't saying `` was necessary for multiline cells, that was for making sure code formatting still happened despite using HTML tags – Meredith Aug 25 '16 at 19:52
1

My intention wasn't saying you were either but to clarify for others that might not be aware of this fact! ;) Anyway, I've run across Problems when using ` ` and pandoc to convert my `.md` to `HTML` as pandoc escapes ` ` to ` ` which in turn gets displayed as **`Â`** in my browser. Did you ever come across such issues? To what formats are you converting your `.md` files and which tools are being used? – antiplex Aug 29 '16 at 06:34
Oh! that makes sense -- As you can see from the tags I asked this question back when I was working with the Apiary tool in their 1.x version. I've since moved on right as they rolled out 2.x ... it sounds like you want html-encoding to work in markdown when html-encoding is for HTML. Sorry I don't use pandoc enough to be of help – Meredith Aug 30 '16 at 21:18

9

You'll need to use `

` instead of `` for multiline code block inside table on github ;)

– Fery W Dec 19 '16 at 10:20

2
Can't make it work guys, GitHub shows this code here on one line in a table cell,
is hidden: `
```
{
  showToday: false,
  showClear: false,
  showClose: false
}
```
` Any ideas? Thanks!
– tonix May 20 '20 at 11:47

2

@tonix Oh I make it work, you don't need `

` just only ``. You can find a working example in my repo: https://github.com/prettier/plugin-pug/blob/main/README.md

– Shinigami Feb 12 '21 at 14:01

`
```
 ... 
```
` is the way to go. Remember to make the second `pre` a closing tag ``
– Alan Richards Jul 14 '21 at 14:57
1

This really clutters up the readability of the Markdown itself, which kind of defeats the purpose. Can I assume that since this is the accepted answer this isn't supported in a more elegant way? – DaVince Jan 18 '22 at 10:14
@Shinigami where is the working example? I can't see a table on the page you linked to! – Reg Edit Mar 06 '22 at 09:28
There were many updates from then on, so here is a link to a historical version of my README https://github.com/prettier/plugin-pug/blob/6da73b20ee28475be8409aa76d9cbfec37570e26/README.md?plain=1 – Shinigami Mar 06 '22 at 09:35
So there is no MarkDown way? This means that it's not possible to have nice table formatting when HTML is not allowed/supported (e.g. in the visualisation or README.md files on nuget.org). – Zastai Jun 08 '22 at 08:05

Gangula · Answer 2 · 2023-08-08T05:04:10.963

16

Answer by @Meredith is the perfect answer to this. I'd like to add more details and examples below

You cannot replace ` with <code> if you need to add other HTML tags inside the <code> element in your table cell. Instead you need to use backtick (`) inside the <pre> tag like this:

Example:

Markdown Input	HTML Output	HTML Preview
`<pre>` `<p>Test Line</p>` `</pre>`	`<pre><p>Test line</p></pre>`	Test Line

Extended Example:

Markdown Input	HTML Output	HTML Preview
`{a: 1, b: 2, c: 3}`	`<code>{a: 1, b: 2, c: 3}</code>`	`{a: 1, b: 2, c: 3}`
`<pre> {JSON: <br>` `&emsp; ["Key1":"Value1",<br>` `&emsp; "Key2":"Value2"] <br>` `}</pre>`	`<pre> {JSON: <br> &emsp;["Key1":"Value1",<br> &emsp;"Key2":"Value2"]<br> } </pre>`	{JSON: ["Key1":"Value1", "Key2":"Value2"] }

edited Aug 08 '23 at 05:04

answered Oct 21 '21 at 07:21

Gangula

5,193
4
30
59

From experience: this is unmaintainable. In my situation a html table was the solution. – tymtam Aug 08 '23 at 03:44
I agree tyntam. If the OG question was regarding the maintainability of this, then I would not recommend this either. But an example use case where this will be useful is for storing your markdown table in a database *(maybe for a blog CMS)* - if you use HTML table, you'll use more memory than you would with this approach. Especially, if only few of your table cells have multi-line markdown. – Gangula Aug 08 '23 at 04:54

Markdown multiline code blocks in tables when rows have to be specified with one-liners

2 Answers2