CODEWITHSUNDEEP
csscss-tablesgithub-flavored-markdownjavascript-marked
Lavish Kothari
Lavish Kothari

Reputation: 2331

marked with gfm: true not rendering tables with appropriate css

I'm having these options to configure my marked object but the tables are not getting rendered with proper css.

{
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        xhtml: false,
        smartypants: true,
        langPrefix: 'hljs language-',
        highlight(code) {
            return hljs.highlightAuto(code, ['html', 'javascript', 'java']).value;
        },
    }

Is there anything that I'm missing? Is there a min.css file that I need to include in index.html to make this work and have proper css for tables?

The table is getting rendered as follows:

enter image description here

The corresponding markdown is:

| ID | Name| email |
|:----:|:----:|:----:|
| ... | ... | ... |
| ... | ... | ... |
| ... | ... | ... |

Upvotes: 0

Views: 820

Answers (2)

Dipen Dadhaniya
Dipen Dadhaniya

Reputation: 4640

Including the below CSS will resolve the issue.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pixelbrackets/gfm-stylesheet/dist/gfm.min.css" />

But it may not be the best option for most of us as it has global styles which will affect your whole website.

To overcome this issue, consider using the appropriate CSS from here:

It will allow you to apply styles only to the elements with the markdown-body class instead of affecting the whole website.

Upvotes: 1

Lavish Kothari
Lavish Kothari

Reputation: 2331

The problem got solved after including gfm.min.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pixelbrackets/gfm-stylesheet/dist/gfm.min.css" />

Upvotes: 0

Related Questions