Jekyll 红地毯渲染 Table 带框架

Question

我遇到了与 Table not render when use Redcarpet in Jekyll GitHub Pages?

中相同的问题

然后我使用答案将 table 呈现到我的 github Jekyll 页面中。

但它不渲染 table 的框架或线条。

是否有可能获得带有框架和线条的 table 输出？如果

我的 Markdown 看起来像这样：

| Test | Test | Test | 
| -----|:----:|-----:|
| test | test | test |         
| test | test | test |
| test | test | test |
| test | test | test |

我的 _config.yml 是这样的：

markdown: redcarpet
redcarpet:
  extensions: [tables]

Answer 1

它不绘制任何边框的原因是因为您的 table 和相关元素没有样式。

这里是 repo I threw together to demonstrate the styles being applied to tables. You can see the results here。

在您的存储库中创建一个 main.css 文件并将其包含在您的 HTML 页面中。

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    {{ content }}
</body>
</html>

然后在 main.css 中，您可以将样式应用于所有 Markdown 生成的表格：

table {
    border:#ccc 1px solid;
    border-radius:3px;
}
table th {
    padding:21px 25px 22px 25px;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e0e0e0;
}
table tr {
    padding-left:20px;
}
table td {
    padding:18px;
    border-top: 1px solid #ffffff;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
}

如果您的存储库中已有 CSS，则只需添加样式并确保 CSS 包含在您的 HTML 中。

Jekyll 红地毯渲染 Table 带框架

Jekyll redcarpet render Table with frame

markdown

jekyll

redcarpet

github-pages