markedjs table 没有样式

Question

我在我的网站上使用 markedjs markdown 解析器，但 table 语法的样式不正确（没有边框和条纹）。我的代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Marked in the browser</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script>

    document.getElementById('content').innerHTML =
        marked(`
First Header | Second Header
------------ | -------------
Content Cell | Content Cell
Content Cell | Content Cell
        `);
</script>
</body>
</html>

Answer 1

这不是 marked 问题，而是 CSS 问题。由于您没有为 table 指定任何样式，因此您没有得到任何样式 :) .

Edit Here 是一个使用 Bootstrap with markedjs 的例子。

Non-Bootstrap 示例：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Marked in the browser</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        table { border-collapse: collapse; }
        tr { border-bottom: solid 1px black; }
        tr:nth-child(even) {background-color: #f2f2f2;}
    </style>
</head>
<body>
<div id="content"></div>
<script>

    document.getElementById('content').innerHTML =
        marked(`
First Header | Second Header
------------ | -------------
Content Cell | Content Cell
Content Cell | Content Cell
        `);
</script>
</body>
</html>

table { border-collapse: collapse; } 启用每个 tr 边框，每个 this answer.
tr { ... } 给你行之间的线。
tr:nth-child(even) { ... } 给你阴影。

markedjs table 没有样式

markedjs table has no styles

javascript

css

html-table

javascript-marked