Attributes

The comark/plugins/attributes plugin enables Comark inline attributes ({...} after a token):

• Props after a token: Hello {.cls} → paragraph gets class="cls"
• Props on links, emphasis, headings, list items, and components
• Props on span wrappers from the components plugin: [world]{.accent}

The plugin is enabled by default via registerDefaultPlugins. No installation or registration required.

Usage

# Title {.hero}

Hello [world]{class="accent"}.

[Docs](https://comark.dev){target="_blank"}

import { parseMarkdown } from 'comark'

const result = await parseMarkdown('Hello {.cls}')
// → [ ['p', { class: 'cls' }, 'Hello'] ]

const span = await parseMarkdown('[world]{.accent}')
// → [ ['p', {}, ['span', { class: 'accent' }, 'world']] ]

Explicit registration

When default plugins are off, opt in with the plugin directly:

import { parseMarkdown } from 'comark'
import attributes from 'comark/plugins/attributes'

const result = await parseMarkdown(content, {
  registerDefaultPlugins: false,
  plugins: [attributes()],
})

With framework packages:

<script setup lang="ts">
import { Markdown } from '@comark/vue'
import attributes from '@comark/vue/plugins/attributes'
</script>

<template>
  <Markdown :plugins="[attributes()]">{{ content }}</Markdown>
</template>

import { Markdown } from '@comark/react'
import attributes from '@comark/react/plugins/attributes'

<Markdown plugins={[attributes()]}>{content}</Markdown>

Disable attribute syntax

Turn off all defaults (including attributes):

const result = await parseMarkdown(content, { registerDefaultPlugins: false })

With attributes disabled, {...} is left as plain text. Bare [text] span wrappers still require the components plugin.

markdown-it / markdown-exit adapter

import { markdownItAttributes } from 'comark/plugins/attributes'

md.use(markdownItAttributes)

Pair with components when you also need ::name / :name syntax:

import { markdownItComponents } from 'comark/plugins/components'
import { markdownItAttributes } from 'comark/plugins/attributes'

md.use(markdownItComponents)
md.use(markdownItAttributes)

How it works

The plugin registers comark_inline_props for {class="foo" id="x"} after a preceding token.

Hidden mdc_inline_props tokens are merged onto the previous token (or a wrapping span for bare text). Parent-level props on headings, paragraphs, and list items are lifted during md.parse.

Span openers ([text]) are provided by the components plugin; attributes only attach the trailing {...}.