markedjs table has no styles

Question

I am using the markedjs markdown parser on my website, but the table syntax didn't style the right way (no borders and stripes). My code:

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

Welcome to the site! Check out the [tour](https://stackoverflow.com/tour) and the [how-to-ask page](https://stackoverflow.com/help/how-to-ask) for more about asking questions that will attract quality answers. You can [edit your question](https://stackoverflow.com/posts/49466792/edit) to include more information. — cxw, Mar 24 '18 at 15:59

cxw · Accepted Answer · 2018-03-24T16:44:30.923

2

This is not a marked issue, but a CSS issue. Since you are not specifying any styling for your table, you are not getting any :) .

Edit Here is an example that uses Bootstrap with markedjs.

Non-Bootstrap example:

<!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; } enables per-tr borders, per this answer.
tr { ... } gives you the lines between rows.
tr:nth-child(even) { ... } gives you the shading.

edited Mar 24 '18 at 16:44

answered Mar 24 '18 at 15:59

cxw

15,429
2
37
69

Thank you. Can I use bootstrap with markedjs, Do I need to add bootstrap class (like "table-striped") to the table tag dynamically every time after converting markdown to html? – neifnei Mar 24 '18 at 16:32
Edited re. Bootstrap. As far as adding the bootstrap classes, I would suggest asking a separate question, since that might be more generally applicable. Based on [this](https://github.com/markedjs/marked/blob/master/docs/USING_PRO.md#user-content-block-level-renderer-methods) and [this](https://github.com/markedjs/marked/issues/334#issuecomment-33571577), I think you need to write a custom renderer. – cxw Mar 24 '18 at 16:46
Yes, absoluted. Thank you for your help @cxw . – neifnei Mar 24 '18 at 17:12

markedjs table has no styles

1 Answers1