Custom markdown styles

[augnustin]

Is your feature request related to a problem? Please describe

I would like to apply custom styles to all the markdown generated content in my app.

Describe the solution you'd like

I would like to have an HTML class applied to a wrapper of the component <ContentDoc /> . It would produce like

<div class="nuxt-content nuxt-content-markdown">
  <!-- Markdown content -->
</div>

And global styles like:

.nuxt-content-markdown {
  font-size: 1.2rem;
  a {
    color: green;
  }
}

Describe alternatives you've considered

I'm aware it is possible to customize markdown tags through the Prose options, which is amazingly powerful, but kind of overkill here. Unless it offers the possibility to customize a <Wrapper /> component that would surround the markdown content.

Another option would be to create myself a <ContentDocWrapper /> component that would forward all props and slots, but I'm not comfortable enough with this nuxt-content to make sure this wouldn't produce any unexpected side-effect.

Additional context

Eventually, make this class name customizable in the nuxt.config.js.

[farnabaz]

You can simply pass class to ContentDoc component <ContentDoc calss="nuxt-content-markdow" /> where you use it.

If you are using Document Driven mode, all you need it to create a catch-all page inside your pages directory [...slug].vue and override Document-Driven page. Checkout default document-driven page: https://github.com/nuxt/content/blob/main/src/runtime/pages/document-driven.vue

[randomseed42]

if I added scoped in the style tag of [...slug].vue, the style doen't work, why is that?