CODEWITHSUNDEEP
visual-studio-code
yuanhjty
yuanhjty

Reputation: 31

How to insert tables in README.md of vscode extension?

I want to insert tables in README.md for a vscode extension. My codes are as following:

* some title

  | words              | transform to | keepUpperCase is false | keepUpperCase is true |  
  |--------------------|--------------|------------------------|-----------------------|  
  | "XML HTTP request" | pascalCase   | `XmlHttpRequest`       | `XMLHTTPRequest`      |  
  | "new customer ID"  | camelCase    | `newCustomerId`        | `newCustomerID`       |

The result in github and visual studio marketplace overview is as expected, but in extension overview opened by vscode is as following:

When I change my codes as following:

* some title

| words              | transform to | keepUpperCase is false | keepUpperCase is true |  
|--------------------|--------------|------------------------|-----------------------|  
| "XML HTTP request" | pascalCase   | `XmlHttpRequest`       | `XMLHTTPRequest`      |  
| "new customer ID"  | camelCase    | `newCustomerId`        | `newCustomerID`       |

The table is rendered as expected. But I will lost the document hierarchy this way.

Upvotes: 0

Views: 6638

Answers (2)

yuanhjty
yuanhjty

Reputation: 31

I finally solved the problem with inline html:

* some title

  <table>
    <thead>
      <tr>
        <th>words</th>
        <th>transform to</th>
        <th>keepUpperCase is false</th>
        <th>keepUpperCase is true</th>
      </tr>
    </thead>
    <tbody>
        <tr>
            <td>"XML HTTP request"</td>
            <td>pascalCase</td>
            <td><code>XmlHttpRequest</code></td>
            <td><code>XMLHTTPRequest</code></td>
        </tr>
        <tr>
            <td>"new customer ID"</td>
            <td>camelCase</td>
            <td><code>newCustomerId</code></td>
            <td><code>newCustomerID</code></td>
        </tr>
    </tbody>
  </table>

Upvotes: 3

Gino Mempin
Gino Mempin

Reputation: 29656

There are different flavors of Markdown and each one can render differently.

The built-in Markdown engine of Visual Studio Code uses the CommonMark Markdown specification as mentioned in https://code.visualstudio.com/docs/languages/markdown#_does-vs-code-support-github-flavored-markdown:

Does VS Code support GitHub Flavored Markdown?

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.

As mentioned in Extending the Markdown preview, if you are targeting a specific platform (Github in your case), you can install an extension that changes the built-in markdown preview to match the target platform's styling. For example, you can install the suggested Markdown Preview Github Styling so that your preview will look the same as the one in Github.

Upvotes: 1

Related Questions