search

cloudacy / vue-markdown-render

A simple markdown parser for Vue using markdown-it.
MIT License
79 stars 10 forks source link

Tables do not get css-styled. #5

Closed Gaojianli closed 3 years ago

Gaojianli commented 3 years ago

image

p-kuen commented 3 years ago

This is strange because it is just a simple wrapper around markdown-it. Can you please post your code please?

Gaojianli commented 3 years ago

@Patcher56 Of course! Here is the vue file: https://github.com/Gaojianli/UrlShorter-web/blob/461fed489dbe69071d5ee19e9c39072f062de5ea/src/components/API.vue#L1-L22 And this is my markdown file: https://github.com/Gaojianli/UrlShorter-web/blob/461fed489dbe69071d5ee19e9c39072f062de5ea/src/assets/APIDoc.md Finally, this is the result page: https://short.u2b.eu/api

As you can see, tables in this page do not have any style: image

p-kuen commented 3 years ago

Oh, I thought the table does not get formatted at all. vue-markdown-render does not provide any styles at all. It just formats it as a table in this case, so you have to do the styles by yourself. In this case you just have to add border styles in css to see the borders.

This gives you more flexibility and does not give you opinionated styles.

Gaojianli commented 3 years ago

I mean is there any way to add a class to the table? I dont't think it's a good idea to add a element selector.

Moreover, the example of markdown-it has generated a class for its tables image

Would you please tell me how to reproduce it?

p-kuen commented 3 years ago

I would suggest wrapping your markdown content into a div with a class on it and set the css rules with this class. Another option could be https://github.com/markdown-it/markdown-it/issues/117#issuecomment-109386469, but therefore we have to allow access to the MarkdownIt instance.