MDC Prose Components

Prose components for Nuxt MDC.

• ✨ Release Notes
• 🏀 Online playground
• 🌈 Preview

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add @sunshj/mdc

That's it! You can now use MDC Prose Components in your Nuxt app ✨

Styles

Headings and paragraphs follow a compact type scale inspired by Tailwind Typography, driven by CSS variables so a theme can retune it without touching component styles:

| Variable | Default | Description | | --------------------------- | --------- | -------------------------------- | | --mdc-prose-line-height | 1.75 | Paragraph line height | | --mdc-prose-spacing | 1.25em | Paragraph vertical rhythm | | --mdc-heading-spacing | 1 | Multiplier for heading margins | | --mdc-heading-weight | 600 | Weight for h3–h6 | | --mdc-h1-size | 2.25em | h1 font size | | --mdc-h1-weight | 800 | h1 font weight | | --mdc-h2-size | 1.5em | h2 font size | | --mdc-h2-weight | 700 | h2 font weight | | --mdc-h3-size | 1.25em | h3 font size | | --mdc-h4-size | 1.125em | h4 font size | | --mdc-h5-size | 1em | h5 font size | | --mdc-h6-size | 0.875em | h6 font size |

The bundled theme.css only declares the variables the components consume and is mounted by default. Disable it to provide your own stylesheet:

export default defineNuxtConfig({
  mdcp: {
    css: false
  }
})

Every var() keeps the default as a fallback, so components stay readable without the stylesheet.

Comark

The components also render under Comark, including its streaming mode. Comark resolves Prose* components by name, so no component mapping is needed.

Disable the bundled @nuxtjs/mdc module when the app renders with Comark, otherwise both modules register the same prose components:

export default defineNuxtConfig({
  modules: ['@sunshj/mdc'],
  mdcp: {
    mdc: false
  }
})

<template>
  <Suspense>
    <Markdown :value="content" streaming caret />
  </Suspense>
</template>

<script setup lang="ts">
import { Markdown } from '@comark/vue'
</script>

Syntax highlighting comes from Comark's shiki() plugin. Copy buttons, code folding and code group tabs follow the streamed content.

Contribution

  # Install dependencies
  npm install

  # Generate type stubs
  npm run dev:prepare

  # Develop with the playground
  npm run dev

  # Develop the Comark demo (shiki 4, no MDC)
  npm run dev:comark

  # Build the playground
  npm run dev:build

  # Run ESLint
  npm run lint

  # Run Vitest
  npm run test
  npm run test:watch

  # Release new version
  npm run release