markdown - Jekyll Redcarpet 渲染带框架的 table

标签 markdown jekyll github-pages redcarpet

我遇到了与 Table not render when use Redcarpet in Jekyll GitHub Pages? 相同的问题

我使用答案将表格渲染到我的 github Jekyll 页面中。

但它不会渲染表格的框架或线条。

是否有可能获得带有框架和线条的表格输出?如果

我的 Markdown 看起来像这样:

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

我的 _config.yml 像这样:

markdown: redcarpet
redcarpet:
  extensions: [tables]

最佳答案

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

这是一个repo我将它们放在一起来演示应用于表格的样式。可以看到结果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 中。

关于markdown - Jekyll Redcarpet 渲染带框架的 table ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30398543/

相关文章:

git - Github 页面的下载按钮

android - Android TextView 中的 Markdown 支持

redirect - Github 页面将非 www(根域)重定向到 www 子域

jekyll - Jekyll 集合中文档的自定义永久链接

仅当输入 "username"和 "github"时才能在 google 上找到 GitHub 页面

ruby - 在 github 页面中使用自定义 ruby​​ gem 会引发错误

markdown - 如何在 Hugo 中的标题中添加 <span> 或 <br>?

r - 为什么Bookdown的index.Rmd中必须包含一些R代码?

ruby-on-rails - Web 应用程序的理想自述文件

html-lists - 两列 - 一个有序列表 Jekyll