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](https://github.com/nuxtlabs/vscode-mdc/issues/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, 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.

For more information

• MDC Syntax Reference