Allow adding a custom class to VPDoc container

[onmax]

I am building a typography plugin, very similar to https://tailwindcss.com/docs/typography-plugin

The idea is that the developer will add a class prose to the container and certain rules will apply.

I was looking how it would be possible to use that library in Vitepress, but there is no such an option. I would like to add a new option to the markdown object like:

// .vitepress/config.ts

defineConfig({
// your config

   markdown: {
   		wrapperClasses: 'prose'
   }
})

This approach is very similar to Unplugin Vue Components

I am willing to implement this feature but I would like to hear from the maintainers first, if they like it 😃

[brc-dd]

In vitepress, there is no wrapper class enforced by markdown. It should be added via theme - https://vitepress.dev/guide/custom-theme#building-a-layout

So if someone is writing a theme and they want to add class:

<!-- Layout.vue -->

<template>
  <Content class="prose" />
</template>

// .vitepress/theme.ts

import Layout from './Layout.vue'

export default {
  Layout
}

The default theme won't be compatible with your plugin for obvious style conflicts.

[onmax]

I mean this works, but correct me if I am wrong. This solution also forces me to create my own sidebar, navigation, footer... and basically all of the DefaultTheme.

[onmax]

For other people if are interested, I ended up using a custom Layout that uses Vitepress DefaultTheme but it adds a Mutation Observer:

<!-- Layout.vue -->
<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'
import { useMutationObserver } from '@vueuse/core'

useMutationObserver(globalThis.document.querySelector('#app') as HTMLDivElement, () => {
  globalThis.document.querySelector('main.main > div')?.classList.add('vp-raw', 'prose')
}, {
  subtree: true,
  childList: true,
})
</script>

<template>
  <DefaultTheme.Layout />
</template>

I still believe that all of this JS is unnecessary.

Possible solution

// .vitepress/config.ts
defineConfig({
    // your config

    markdown: {
   		 wrapperClasses: 'prose'
    }
})

  <!-- VPDoc.vue -->
 <main class="main">
  <Content
    class="vp-doc"
    :class="[
      pageName,
      theme.externalLinkIcon && 'external-link-icon-enabled',
      (Array.isArray(options.wrapperClasses) ? ...options.wrapperClasses : options.wrapperClasses)
    ]"
  />
</main>

[brc-dd]

This will force all client side navigations to be full-page as router won’t run inside vp-raw. You’re giving up SPA-like UX for UI. I’m afraid the only solution is to patch/write your own theme completely.

[onmax]

Yeah, I think that's the only solution.

I might write my own patch of vitepress :/

[brc-dd]

You can try patching node_modules/vitepress/dist/client/theme-default/components/VPDoc.vue to replace class="vp-doc" by class="prose". If it works for you we can allow customizing that inside themeConfig. But it should not be part of the markdown config.