Is it possible to create and preview a table using Visual Studio Code Markdown?

Question

I am using Visual Studio Code to write some notes using its Markdown support. I would like to add some tables, but I can't find a way to do it. It seems that Visual Studio Code implements CommonMark which does not include tables in the specification.

I know that GitHub flavoured Markdown has a table extension which provides this feature and there are a couple of table formatter Visual Studio Code extensions (here and here), but they just layout the text nicely. I would like to a table to show up in the preview pane.

Any suggestions for how to achieve some tables in Visual Studio Code Markdown?

Answer 1

You can now do something like this:

| Letter | Digit | Character |
| :----: | :---: | :-------: |
| a      | 4     | $         |
|        | 365   | (         |
| b      |       | ^         |

"Empty" cells must have at least one space in them. This will display in vscode's markdown preview as:

Answer 2

The original Markdown rules state:

For any markup that is not covered by Markdown's syntax, you simply use HTML itself. There's no need to preface it or delimit it to indicate that you're switching from Markdown to HTML; you just use the tags.

The only restrictions are that block-level HTML elements -- e.g. <div>, <table>, <pre>, <p>, etc. -- must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Markdown is smart enough not to add extra (unwanted) <p> tags around HTML block-level tags.

For example, to add an HTML table to a Markdown article:

This is a regular paragraph.

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

This is another regular paragraph.

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can't use Markdown-style *emphasis* inside an HTML block.