【问题标题】:How to print table text to md table using showdown.js?如何使用 showdown.js 将表格文本打印到 md 表格?
【发布时间】:2019-10-14 20:06:28
【问题描述】:

我想使用 showdown.js 打印 md 表。但是,它似乎没有像我预期的那样正确转换为降价表。

我尝试将选项('table option')设置为“true”并将文本转换为 md。但是,不起作用。

以下是我实现的功能,供您参考。

setMdConvert()

getTechDescriptionMd()

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 |

还有其他我想念的选项吗?

【问题讨论】:

  • 在最后的“|”之后插入换行符有帮助吗你的文本变量的字符? ('| h1 | h2 | h3 |\n' + ... )?
  • 我试过了!但是,失败... ;-;

标签: javascript jquery html css showdown


【解决方案1】:

这是.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>

【讨论】:

  • 在上面的示例中,您不需要替换转义序列。但是表格降价需要有换行符,以便 mdConverter 了解它正在处理表格。另外,您需要拨打mdConverter.setOption('tables', true)。还是我误解了您的转义序列问题的性质?
  • 哦 :) 谢谢!
  • 你怎么能看到表格而不是(解析的)表格标签?
  • here 是,document.write()
猜你喜欢
  • 1970-01-01
  • 2023-03-21
  • 1970-01-01
  • 2015-05-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多