Prettier Plugin for MDC Syntax

0.2.1 verified Sat Apr 25 auth: no javascript

A Prettier plugin for formatting MDC (Markdown Components) syntax, as used in Nuxt Content. Current stable version is 0.2.1, released with bug fixes for extra newlines after frontmatter and fallback to mdast embed logic. Requires Prettier >=3.6.0. Ships TypeScript types. Differentiators: supports YAML front matter in components, nested components, GFM, and math syntax. Plugin must be added to Prettier config with the 'mdc' parser explicitly set via overrides. Works with .mdc and .md files.

Common errors

error Cannot find module 'prettier-plugin-mdc' ↓

cause Package not installed or not installed as dev dependency

fix

npm install -D prettier-plugin-mdc

error Error: No parser and no filepath given, couldn't infer a parser. ↓

cause Plugin registered but no parser override for .mdc or .md files

fix

Add overrides with parser: 'mdc' in Prettier config

error Error: Invalid configuration file. Expected overrides to be an array. ↓

cause Incorrect prettier config format (e.g., overrides as object instead of array)

fix

Use array: "overrides": [{ "files": ["*.md"], "options": { "parser": "mdc" } }]

error error: unknown option `--parser' ↓

cause Using CLI option --parser instead of config override

fix

Set parser in config file, not CLI. Run prettier --write without --parser

Warnings

breaking Prettier >=3.6.0 required (v0.2.0+ breaks with older prettier) ↓

fix Upgrade prettier to >=3.6.0

gotcha Parser must be set to 'mdc' in overrides; using default 'markdown' parser will not format MDC syntax correctly ↓

fix Add override: { files: ['*.md', '*.mdc'], options: { parser: 'mdc' } }

gotcha Plugin only formats .mdc and .md files; other file extensions require explicit parser override ↓

fix Include desired file extensions in the files array of the override

deprecated v0.1.x required prettier 3.6.0+; v0.2.0 made it work with prettier 3.8 ↓

fix Upgrade to v0.2.0+ for prettier 3.8 compatibility

gotcha YAML front matter in components may lose extra newlines if not properly handled; v0.2.1 fixed extra newlines after frontmatter ↓

fix Upgrade to v0.2.1+

Install

npm install prettier-plugin-mdc

yarn add prettier-plugin-mdc

pnpm add prettier-plugin-mdc

Imports

plugin

wrong

plugins: ['prettier-plugin-mdc'] // no default or named import needed; configured in prettier config

correct

plugins: ['prettier-plugin-mdc']

Not imported in code; added to Prettier config's plugins array. No JS import required.

parser
wrong
```
parser: 'markdown'
```
correct
```
parser: 'mdc'
```
Must set parser to 'mdc' in Prettier overrides for .md or .mdc files. Using 'markdown' parser will not apply MDC-specific formatting.
types (TypeScript)
wrong
```
import type { Options } from 'prettier-plugin-mdc'
```
correct
```
import type { Options, Plugin } from 'prettier'
```
Package ships types but they are internal; use Prettier's own types for configuration. No direct type import from this package.

Quickstart

Shows how to configure Prettier with the MDC plugin, including required overrides for parser, and example CLI usage.

// .prettierrc or prettier.config.js
{
  "plugins": ["prettier-plugin-mdc"],
  "overrides": [
    {
      "files": ["*.md", "*.mdc"],
      "options": {
        "parser": "mdc"
      }
    }
  ]
}

// CLI: prettier --write "**/*.mdc" "**/*.md"
// Example MDC file (before formatting):
// ::component{prop=value}
// content
// ::
// After formatting: proper indentation and spacing