Search code examples
visual-studio-codedocreadme

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:

  • some title

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

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.


Solution

  • 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>