5

私は自分のウェブサイトでmarkedjsマークダウンパーサーを使用していますが、テーブル構文は正しい方法でスタイルを設定していませんでした(ボーダーとストライプなし)。私のコード:

<!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>

4

1 に答える 1

2

これはmarked問題ではなく、CSS の問題です。テーブルのスタイリングを指定していないため、 :) を取得していません。

編集 ここでは、Markedjs で 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に従って、境界ごとに有効にします。
  • tr { ... }行間の行を提供します。
  • tr:nth-child(even) { ... }あなたに陰影を与えます。
于 2018-03-24T15:59:49.973 に答える