如何在不添加CSS的情况下标记渲染表?

时间:2016-08-17 10:40:58

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

我正在使用支持github风格降价的marked。这包括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)

如何在不添加CSS的情况下标记为仅呈现HTML?

1 个答案:

答案 0 :(得分:1)

确定找到了答案:截取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>