Comark - Components in Markdown (previously MDC) installs statistics

<img src="https://github.com/comarkdown/vscode-comark/raw/HEAD/images/logo.png" alt="Comark - Components in Markdow VS Code Extension" width="150" />

Comark & MDC syntax highlight for Visual Studio Code

[![MDC Extension for VS Code][extension-version-src]][extension-href] [![MDC Extension for VS Code][extension-installs-src]][extension-href] [![MDC Extension for VS Code][extension-ratings-src]][extension-href]

Provides syntax highlighting and colon (:) matching for MDC (Markdown Components) files, as well as document folding and format providers, along with component name and prop suggestions.

• Download VS Code extension

Best used with:

• Comark
• Markdown It Comark
• Remark MDC

Or with Nuxt modules:

• Nuxt Content
• Comark
• Nuxt MDC

Features

• Block Components
• Inline Components
• Span Text
• Attributes
• Document folding
• Bracket matching
• Formatting
• Component name and prop suggestions

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/comarkdown/vscode-comark/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.

Bracket matching

The extension automatically highlights matching opening and closing MDC block component tags. When your cursor is positioned on or adjacent to either an opening tag (e.g., ::component-name) or a closing tag (e.g., ::), both brackets will be highlighted to help you identify matching pairs in nested components.

This feature is always enabled and works automatically with no configuration required.

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.

Component name and prop suggestions

The extension can provide intelligent auto-completion for MDC block components and their props by scanning your local project files or by fetching remote data when provided with an API URL in your VS Code settings.

When typing a colon (:) in your MDC document, the extension will suggest available component names. Within MDC component YAML front matter sections (between ---), the extension provides contextual prop suggestions (including nested props) with types and documentation where provided.

To enable component name and prop suggestions, enable the mdc.enableComponentMetadataCompletions setting in in VS Code, and configure the other settings as described below depending on your preferred component metadata source.

The extension supports two methods for providing component metadata:

• Local component metadata provided by the nuxt-component-meta module, or a static JSON file in your project.
• Remote component metadata provided by an API endpoint that returns JSON data.

Regardless of the method you choose, the data source must match one of the following formats:

1. The default format used by nuxt-component-meta

   • If your data source matches this format, it will automatically be transformed into the interface documented below.

2. A custom format that matches the following TypeScript interface:

   interface MDCComponentData {
     /** The kebab-case name of the markdown component */
     mdc_name: string
     /** Component description */
     description?: string
     /** Markdown-formatted documentation */
     documentation_markdown?: string
     /** URL to component documentation */
     docs_url?: string
     /** Component metadata interface from `nuxt-component-meta` */
     component_meta: {
       mode?: string;
       global?: boolean
       filePath?: string
       pascalName?: string
       kebabName?: string
       chunkName?: string
       fullPath?: string
       shortPath?: string
       meta: ComponentMeta; // import type { ComponentMeta } from 'vue-component-meta'
     }
   }
   
   type MDCMetadataResponse = MDCComponentData[]
   

Local component metadata…