Vue3-markdown-it not working with Vuetify 3 Stylesheet

Question

As title says, String formatting using Vue3-markdown-it library is not working with Vuetify 3 styles.

Just to find the root cause, As part of reproduceable demo, Below codesandbox links has been created :

Without Vuetify 3 Stylesheet - Working as per the expectation

With Vuetify 3 Stylesheet - Not working

After deep dive into the root cause analysis, I got to know that Vuetify is overriding the browser's default and the below global style from Vuetify is the victim.

* {
  padding: 0;
  margin: 0;
}

If I disable these style or assign a revert value to both the properties, It works fine for markdown elements but at the same time it impact another component of Vuetify.

Can someone please help me by suggesting a workaround or fix to get rid from this problem ?

Agree with @moritz's answer that Vuetify removes some browser defaults. One trick would be to apply manual CSS to the markdown elements instead of resetting Vuetify CSS (which will affect many components under the hood). For example - `#markdown-wrapper ul { padding: initial !important, margin: initial !important }` or hardcode values can also be tried. — Neha Soni, Aug 21 '23 at 16:25
In that way, this manual CSS work will only be limited to the markdown component, and the rest of the Vuetify components (which are primary though) would be untouched. — Neha Soni, Aug 21 '23 at 16:26
@NehaSoni Thanks for the workaround. Will definitely try this way. — Debug Diva, Aug 22 '23 at 05:44

Neha Soni · Accepted Answer · 2023-08-23T13:20:47.017

It's just a rough idea if this helps-

The root cause seems to be related to Vuetify's reset of some browser defaults, which subsequently affects the rendering of markdown content. To address this issue without disrupting other Vuetify components, consider the following workaround (As I mentioned in the comments too):

Manual CSS Targeting:

Instead of attempting to reset the Vuetify global styles, you can apply manual CSS targeting specifically to the markdown elements. This way, the manual CSS adjustments will only impact the markdown component and leave other primary Vuetify components unaffected. For instance, you can apply the following CSS to your markdown wrapper:

<style scoped>
::v-deep#markdown-wrapper ul {
  padding-inline-start: 30px;
}
::v-deep#markdown-wrapper p {
  margin: 1em 0px !important;
  padding-inline-start: 30px;
}
</style>

This example only demonstrates for ul and p tags (as per your example), you can do the same for other elements as well.

The key idea is to isolate the CSS adjustments to the markdown component, ensuring that your customization doesn't inadvertently affect other crucial aspects of the Vuetify framework.

Here is the working sandbox.

Vue3-markdown-it not working with Vuetify 3 Stylesheet

1 Answers1