标有 gfm: true 不使用适当的 css 呈现表格答案

【问题标题】：marked with gfm: true not rendering tables with appropriate css标有 gfm: true 不使用适当的 css 呈现表格
【发布时间】：2021-07-06 00:18:18
【问题描述】：

我有这些选项来配置我的 marked 对象，但表格没有使用正确的 css 呈现。

{
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        xhtml: false,
        smartypants: true,
        langPrefix: 'hljs language-',
        highlight(code) {
            return hljs.highlightAuto(code, ['html', 'javascript', 'java']).value;
        },
    }

我有什么遗漏的吗？我需要在index.html 中包含一个min.css 文件来完成这项工作并为表格提供适当的css？

表格呈现如下：

对应的markdown是：

| ID | Name| email |
|:----:|:----:|:----:|
| ... | ... | ... |
| ... | ... | ... |
| ... | ... | ... |

【问题讨论】：

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

【解决方案1】：

添加gfm.min.css后问题解决了

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pixelbrackets/gfm-stylesheet/dist/gfm.min.css" />

【讨论】：

【解决方案2】：

包含以下 CSS 将解决此问题。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pixelbrackets/gfm-stylesheet/dist/gfm.min.css" />

但它可能不是我们大多数人的最佳选择，因为它具有全局样式，会影响您的整个网站。

要解决此问题，请考虑从此处使用适当的 CSS：

它将允许您仅将样式应用于具有markdown-body 类的元素，而不是影响整个网站。

【讨论】：