如何在 vscode 扩展的 README.md 中插入表格？答案

【问题标题】：How to insert tables in README.md of vscode extension?如何在 vscode 扩展的 README.md 中插入表格？
【发布时间】：2019-02-13 07:29:34
【问题描述】：

我想在README.md 中插入表格以获得vscode 扩展名。我的代码如下：

* some title

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

github 和 Visual Studio 市场概览中的结果符合预期，但vscode 打开的扩展概览中的结果如下：

一些标题

|话|转换为 | keepUpperCase 为假 | keepUpperCase 为真 |
|--------|-------------|------------- -----------|-----------|
| “XML HTTP 请求” |帕斯卡 | XmlHttpRequest | XMLHTTPRequest |
| “新客户 ID” |骆驼箱 | newCustomerId | newCustomerID |

当我如下更改我的代码时：

* some title

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

表格按预期呈现。但是这样我会丢失文档层次结构。

【问题讨论】：

“按预期呈现的表格”听起来像是您回答了这个问题。 “丢失文档层次结构”对您意味着什么？
@soulshined 我的意思是，后面的代码可以渲染普通表格，但不能缩进。我要缩进。

标签： visual-studio-code doc readme

【解决方案1】：

我终于用内联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>

【讨论】：

【解决方案2】：

Markdown 有不同的风格，每一种都有不同的渲染方式。

Visual Studio Code 的内置 Markdown 引擎使用 https://code.visualstudio.com/docs/languages/markdown#_does-vs-code-support-github-flavored-markdown 中提到的 CommonMark Markdown 规范：

VS Code 是否支持 GitHub 风格的 Markdown？

不，VS Code 使用 markdown-it 库针对 CommonMark Markdown 规范。 GitHub 正在朝着 CommonMark 规范发展，您可以阅读此update。

如Extending the Markdown preview 中所述，如果您针对特定平台（在您的情况下为 Github），您可以安装一个扩展来更改内置降价预览以匹配目标平台的样式。例如，您可以安装建议的 Markdown Preview Github Styling，以便您的预览与 Github 中的预览相同。

【讨论】：