标记为gfm: true不使用适当的css呈现表

Question

我有这些选项来配置我的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;
        },
    }

我遗漏了什么吗？是否有一个min.css文件，我需要包括在index.html中，以使这一工作，并有适当的css表？

表的呈现方式如下：

​

​

相应的减价是：

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

Answer 1

这个问题在包含gfm.min.css后得到了解决

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

Answer 2

包括下面的CSS将解决这个问题。

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

但它可能不是最好的选择，对我们大多数人，因为它有全球性的风格，这将影响你的整个网站。

为了克服这一问题，请考虑在这里使用适当的CSS：

• https://github.com/sindresorhus/github-markdown-css
• https://cdnjs.com/libraries/github-markdown-css

它将允许您只对带有markdown-body类的元素应用样式，而不影响整个网站。