How can I add a table with multi-row cells to a readme in VSTS?

Question

How can you add tables with multi-row cells to markdown in Microsoft VSTS?

I have previously used asciidoc for readme files on github as it is both richer and less ambiguous. The company now has projects on VSTS which does not support asciidoc so I need to use markdown instead. However, it is unclear what flavour of markdown is actually supported

This page says that github flavoured markdown can be used

https://docs.microsoft.com/en-us/vsts/collaborate/markdown-guidance

I found another page saying they use commonmark via the markdown-it library.

Q: Does VS Code support GitHub Flavored Markdown?

A: No, VS Code targets the CommonMark Markdown specification using the markdown-it library. GitHub is moving toward the CommonMark specification which you can read about in this update.

I've been using a combination of asciidoctor and pandoc to convert files but nothing gets it quite right. (Asciidoctor converts to docbook which pandoc can then parse)

asciidoctor -b docbook -v -o "$OUTPUT".xml "$INPUT" &&
pandoc -f docbook -t markdown_github -i "$OUTPUT".xml -o "$OUTPUT"

I have to re-add the title manually. My current stumbling block is multi-row cells. Github supports grid tables, see Newline in markdown table?:

+---------------+---------------+--------------------+
| Fruit         | Price         | Advantages         |
+===============+===============+====================+
| Bananas       | first line\   | first line\        |
|               | next line     | next line          |
+---------------+---------------+--------------------+
| Bananas       | first line\   | first line\        |
|               | next line     | next line          |
+---------------+---------------+--------------------+

But neither this nor embedded html seem to work in VSTS. I would be happy to use html readmes instead if that was permitted.

Update 17-Nov-2017:

I found the link to markdown-it and added it above. I've raised an issue there for clarification (or enhancement). Its unclear which version VSTS actually uses under the hood.

I would like to ask the question of Microsoft themselves but their ask a question link goes straight to stack overflow.

The markdown-it library does support the usage suggested by @Waylan:

| Fruit         | Price                   | Advantages              |
| ------------- | ----------------------- | ----------------------- |
| Bananas       | first line<br>next line | first line<br>next line |
| Bananas       | first line<br>next line | first line<br>next line |

See https://github.com/markdown-it/markdown-it/issues/406. The issue is most likely Microsoft disabling html. A solution thus waits on a reply to @starian's suggestion: https://visualstudio.uservoice.com/forums/330519-visual-studio-team-services/suggestions/32312290-multi-line-in-the-cell-of-a-table-in-markdown-in-v

Answer 1

In short, each row must be on one line and should use <br> to indicate a line break. Like this:

| Fruit         | Price                   | Advantages              |
| ------------- | ----------------------- | ----------------------- |
| Bananas       | first line<br>next line | first line<br>next line |
| Bananas       | first line<br>next line | first line<br>next line |

Below is an explanation of each tool with an analysis of that tool's documentation:

GitHub

CommonMark is a Markdown variant with a strict spec. GitHub-Flavored Markdown (GFM) is an extension of CommonMark (which adds features to CommonMark such as tables), with its own spec. Therefore, to say that an implementation supports GFM is to say that it supports CommonMark with extensions. Note that GitHub adopted the current spec on March 14, 2017, so any information older that that may not be relevant for the current implementation.

Whether VSTS actually uses a CommonMark/GFM implementation or a close approximation is unclear from the documentation. However, as the documentation clearly states that "GitHub-flavored extensions" are supported, that would indicate to me that the GFM Spec would be a good reference. Regardless, the GFM Spec is the controlling spec for any Markdown rendered on github.com.

The Tables section of the GFM Spec plainly states:

Block-level elements cannot be inserted in a table.

And gives this simple example:

| foo | bar |
| --- | --- |
| baz | bim |

While the spec does not specifically mention multiple line cells, there are no examples with any cells that contain multiple lines. It is my understanding that that is not supported by GFM. Therefore, the only way to include line breaks in GFM Table cells is with the <br> tag, which is not a block-level element.

Pandoc

Pandoc supports multiple different styles of table syntax. If you are passing your Markdown to both Pandoc and GFM, then you need to use Pandoc's table style which most closely matches GFM's style. For example, GFM Tables do not include support for + at the corners. That syntax is specific to Pandoc's Grid Tables. Fortunately, Pandoc's documentation tells us which style most closely matches GFM.

Pandoc has support for various "Markdown Variants", one of which is gfm. The docs have this to stay about that variant:

We also support gfm (GitHub-Flavored Markdown) as a set of extensions on commonmark:

: pipe_tables, raw_html, fenced_code_blocks, auto_identifiers, ascii_identifiers, backtick_code_blocks, autolink_bare_uris, intraword_underscores, strikeout, hard_line_breaks, emoji, shortcut_reference_links, angle_brackets_escapable.

Note that the gfm variant of Pandoc uses Pipe Tables. It is also noteworthy that the markdown_github variant of Pandoc is deprecated since GitHub adopted Commonmark. But even the markdown_github variant uses Pipe Tables.

Pandocs' documentation for Pipe Tables states (emphasis added):

The cells of pipe tables cannot contain block elements like paragraphs and lists, and cannot span multiple lines.

And gives this example:

| Right | Left | Default | Center |
|------:|:-----|---------|:------:|
|   12  |  12  |    12   |    12  |
|  123  |  123 |   123   |   123  |
|    1  |    1 |     1   |     1  |

That is clearly the same as GFM tables and does not include any support for block level elements or multi-line cells.

VSTS

The VSTS Documentation for Tables closely matches GFM and Pandoc Pipe Tables with this example:

| Heading 1 | Heading 2 | Heading 3 |  
|-----------|:---------:|----------:|  
| Cell A1   | Cell A2   | Cell A3   |  
| Cell B1   | Cell B2   | Cell B3   |

While the the VSTS Documentation makes no specific mention of block-level elements or multiple lines, is seems safe to assume that it is in fact the same style.

We can make that assumption because in all three instances (VSTS, GFM and Pandoc Pipe Tables), the syntax does not provide a divider between individual rows of the table (compare with Pandoc Grid Tables, which supports row dividers). While there is a divider between the header and data rows, with no divider between individual data rows, there is no way to indicate how many lines of text belong to each row. Therefore, each row can only be represented by one line of text.

Conclusion

Given the above, to be parsed properly by VSTS, GFM and Pandoc (gfm variant), your table should be formatted like this:

| Fruit         | Price                   | Advantages              |
| ------------- | ----------------------- | ----------------------- |
| Bananas       | first line<br>next line | first line<br>next line |
| Bananas       | first line<br>next line | first line<br>next line |

And when using Pandoc, be sure to use the gfm format (pandoc -f gfm ...).

Answer 2

It is not supported in markdown of VSTS, I submit a user voice here: multi-line in the cell of a table in markdown in VSTS, you can vote and follow it.