Provides syntax highlighting and colon (:
) matching for MDC (Markdown Components) files, as well as document folding and a format provider.
Best used with:
Or with Nuxt modules:
::card
---
icon: IconNuxt
title: A complex card.
---
Default slot
#description
::alert
Description slot
::
::
:button-link[A button link]{.text-bold}
<!-- or -->
:button-link{.text-bold}[A button link]
Hello [World]!
Hello [World]{.text-primary-500}!
[Link](#link){.text-primary-500 ref="noopener"}!
**Bold Text**{style="color: tomato"}
`Inline Code`{style="background: #333"}
_Italic Text_{#italic_text}
The extension enables document code folding for MDC block components (and nested components). Simply hover over the gutter of the line you'd like to fold and click on the icon to expand or collapse the range.
The plugin also enables a document format provider, disabled by default.
To globally configure document formatting in VS Code, search for mdc.enableFormatting
in Settings.
Alternatively, to configure per-project, create or edit .vscode/settings.json
in your project's root directory:
{
// Required for the extension
"mdc.enableFormatting": true,
// Recommended (for `mdc` and `md`, depending on your usage)
"[mdc]": {
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.detectIndentation": false,
"editor.formatOnPaste": true
}
}
Note
Since the format provider utilizes spaces for indention, you may also need to configure your project to insert spaces for tabs within .mdc
or .md
files as recommended above.