MDC syntax highlight for Visual Studio Code

Provides syntax highlighting and colon (:) matching for MDC (Markdown Components) files, as well as document folding and a format provider.

• Download VS Code extension

Best used with:

• Remark MDC
• Markdown It MDC

Or with Nuxt modules:

• Nuxt MDC
• Nuxt Content

Features

Block Components

::card
---
icon: IconNuxt
title: A complex card.
---

Default slot

#description
  ::alert
    Description slot
  ::
::

Inline Components

:button-link[A button link]{.text-bold}
<!-- or -->
:button-link{.text-bold}[A button link]

Span Text

Hello [World]!

Attributes

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}

Document folding

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.

Formatting

The plugin also enables a document format provider. You may customize the settings in your project's .vscode/settings.json to override formatOnType etc.

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.

For more information

• MDC Syntax Reference