如何在不添加 CSS 的情况下标记为呈现表格？答案

【问题标题】：How can I get marked to render tables without adding CSS?如何在不添加 CSS 的情况下标记为呈现表格？
【发布时间】：2016-12-23 23:27:54
【问题描述】：

我正在使用marked，它支持 github 风格的降价。这包括table support：

var marked = require('marked');

var markdown = `
| API        | Documented CSP Policy           |
| ------------- |:-------------:|
|Google Fonts|No documented policy|
|Mixpanel|No documented policy|
|Ractive.js|[Documented policy](http://docs.ractivejs.org/edge/csp)|
|Stripe|[Documented policy](https://support.stripe.com/questions/what-about-pci-dss-3-1)|

`

console.log(marked(markdown));

但是输出有一堆不必要的内联样式：

<table>
<thead>
<tr>
<th>API</th>
<th style="text-align:center">Documented CSP Policy</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google Fonts</td>
<td style="text-align:center">No documented policy</td>
</tr>
<tr>
<td>Mixpanel</td>
<td style="text-align:center">No documented policy</td>
</tr>
(etc etc)

如何标记为只呈现 HTML 而不添加 CSS？

【问题讨论】：

标签： markdown github-flavored-markdown javascript-marked

【解决方案1】：

OK 找到了答案：拦截renderer.tablecell 并将flags.align 设置为null

var marked = require('marked');
var renderer = new marked.Renderer();
var realTableCellRenderer = renderer.tablecell
renderer.tablecell = function(content, flags){
    flags.align = null;
    return realTableCellRenderer(content, flags)
}

var markdown = `
| API        | Documented CSP Policy           |
| ------------- |:-------------:|
|Google Fonts|No documented policy|
|Mixpanel|No documented policy|
|Ractive.js|[Documented policy](http://docs.ractivejs.org/edge/csp)|
|Stripe|[Documented policy](https://support.stripe.com/questions/what-about-pci-dss-3-1)|
|Twitter oembed API|No documented policy, but [some CSP notes](https://dev.twitter.com/web/overview/widgets-webpage-properties#csp)|
|Typekit|[Documented policy](http://help.typekit.com/customer/portal/articles/1265956-content-security-policy-and-typekit)|
|Stormpath|No documented policy|

`

console.log(marked(markdown, { renderer: renderer }));

返回干净的输出：

<table>
<thead>
<tr>
<th>API</th>
<th>Documented CSP Policy</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google Fonts</td>
<td>No documented policy</td>
</tr>
<tr>
<td>Mixpanel</td>
<td>No documented policy</td>
</tr>
<tr>
<td>Ractive.js</td>
<td><a href="http://docs.ractivejs.org/edge/csp">Documented policy</a></td>
</tr>
<tr>

【讨论】：