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?

Hurlee

Answer 1

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

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

Hurlee

<br/> also works independently from ` or <code> to force multiline cells. I've used/tested this in combination with pandoc converting my.md to HTML. – Charpoy

I wasn't saying <code> was necessary for multiline cells, that was for making sure code formatting still happened despite using HTML tags – Hurlee

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? – Charpoy

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

You'll need to use <pre> instead of <code> for multiline code block inside table on github ;) – Uncivilized

Can't make it work guys, GitHub shows this code here on one line in a table cell, <br/> is hidden: <pre><code>{<br/>&nbsp;&nbsp;showToday: false,<br/>&nbsp;&nbsp;showClear: false,<br/>&nbsp;&nbsp;showClose: false<br/>}</code></pre> Any ideas? Thanks! – Coaler

@Coaler Oh I make it work, you don't need <pre><code> just only <pre>. You can find a working example in my repo: github.com/prettier/plugin-pug/blob/main/README.md – Cylinder

<pre> ... </pre> is the way to go. Remember to make the second pre a closing tag </pre> – Vela

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? – Meatman

@Cylinder where is the working example? I can't see a table on the page you linked to! – Croce

There were many updates from then on, so here is a link to a historical version of my README github.com/prettier/plugin-pug/blob/… – Cylinder

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). – Piassava

Using <br> in CKEditor Markdown will brake your table. – Lyndsaylyndsey

Answer 2

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

Crockett

From experience: this is unmaintainable. In my situation a html table was the solution. – Milieu

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. – Crockett

checkout this answer for syntax highlighting code-blocks inside table – Crockett