如何使用 showdown.js 将 table 文本打印到 md table?
How to print table text to md table using showdown.js?
我想使用 showdown.js 打印 md table。但是,它似乎没有像我预期的那样正确地转换为 markdown table。
我尝试设置要更改的选项 ('table option') 'true' 并将文本转换为 md。但是,不起作用。
下面是我实现的功能,供大家参考。
setMdConvert()
<= 正如我所说,我只是尝试了所有选项为真。
getTechDescriptionMd()
<= 将任意 markdown 文本转换为 markdown 的测试函数 table
function setMdConvert() {
var mdConverter = new showdown.Converter();
var options = showdown.getOptions();
var keys = Object.keys(options);
keys.forEach((key) => {
if(options[key].constructor === boolConstructor)
mdConverter.setOption(key, true);
});
console.log(mdConverter.getOptions());
return mdConverter;
}
function getTechDescriptionMd() {
var text = '| h1 | h2 | h3 |' +
'|:------|:-------:|--------:|' +
'| 100 | [a][1] | ![b][2] |' +
'| *foo* | **bar** | ~~baz~~ |';
var html = mdConverter.makeHtml(text);
$('.desc-viewer').html(html);
}
结果:
| h1 | h2 | h3 ||:------|:-------:|--------:|| 100 | [a][1] | ![b][2] || foo | bar | baz |
还有其他我想念的选择吗?
这是对我有用的 .getTechDescriptionMd()
的修改版本。我添加了我在昨天的评论中已经提到的换行符,另外我初始化了 mdConverter
并将其选项 'tables' 设置为 true(受 documentation 启发)。
现在看起来是这样的:
function getTechDescriptionMd() {
var text = '| h1 | h2 | h3 |\n' +
'|:------|:-------:|--------:|\n' +
'| 100 | [a][1] | ![b][2] |\n' +
'| *foo* | **bar** | ~~baz~~ |';
var mdConverter = new showdown.Converter();
mdConverter.setOption('tables', true);
var html = mdConverter.makeHtml(text);
$('.desc-viewer').html(html);
}
我得到的结果是:
<table>
<thead>
<tr>
<th style="text-align:left;">h1</th>
<th style="text-align:center;">h2</th>
<th style="text-align:right;">h3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;">100</td>
<td style="text-align:center;">[a][1]</td>
<td style="text-align:right;">![b][2]</td>
</tr>
<tr>
<td style="text-align:left;"><em>foo</em></td>
<td style="text-align:center;"><strong>bar</strong></td>
<td style="text-align:right;">~~baz~~</td>
</tr>
</tbody>
</table>
我想使用 showdown.js 打印 md table。但是,它似乎没有像我预期的那样正确地转换为 markdown table。
我尝试设置要更改的选项 ('table option') 'true' 并将文本转换为 md。但是,不起作用。
下面是我实现的功能,供大家参考。
setMdConvert()
<= 正如我所说,我只是尝试了所有选项为真。
getTechDescriptionMd()
<= 将任意 markdown 文本转换为 markdown 的测试函数 table
function setMdConvert() {
var mdConverter = new showdown.Converter();
var options = showdown.getOptions();
var keys = Object.keys(options);
keys.forEach((key) => {
if(options[key].constructor === boolConstructor)
mdConverter.setOption(key, true);
});
console.log(mdConverter.getOptions());
return mdConverter;
}
function getTechDescriptionMd() {
var text = '| h1 | h2 | h3 |' +
'|:------|:-------:|--------:|' +
'| 100 | [a][1] | ![b][2] |' +
'| *foo* | **bar** | ~~baz~~ |';
var html = mdConverter.makeHtml(text);
$('.desc-viewer').html(html);
}
结果:
| h1 | h2 | h3 ||:------|:-------:|--------:|| 100 | [a][1] | ![b][2] || foo | bar | baz |
还有其他我想念的选择吗?
这是对我有用的 .getTechDescriptionMd()
的修改版本。我添加了我在昨天的评论中已经提到的换行符,另外我初始化了 mdConverter
并将其选项 'tables' 设置为 true(受 documentation 启发)。
现在看起来是这样的:
function getTechDescriptionMd() {
var text = '| h1 | h2 | h3 |\n' +
'|:------|:-------:|--------:|\n' +
'| 100 | [a][1] | ![b][2] |\n' +
'| *foo* | **bar** | ~~baz~~ |';
var mdConverter = new showdown.Converter();
mdConverter.setOption('tables', true);
var html = mdConverter.makeHtml(text);
$('.desc-viewer').html(html);
}
我得到的结果是:
<table>
<thead>
<tr>
<th style="text-align:left;">h1</th>
<th style="text-align:center;">h2</th>
<th style="text-align:right;">h3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;">100</td>
<td style="text-align:center;">[a][1]</td>
<td style="text-align:right;">![b][2]</td>
</tr>
<tr>
<td style="text-align:left;"><em>foo</em></td>
<td style="text-align:center;"><strong>bar</strong></td>
<td style="text-align:right;">~~baz~~</td>
</tr>
</tbody>
</table>