Getting started
Usage
Add comark-etiket to parseMarkdown or pair it with the @comark/vue Markdown component.
Parse with the plugin only
parse.ts
import { parseMarkdown } from 'comark'
import etiket from 'comark-etiket'
const tree = await parseMarkdown(content, {
plugins: [etiket()],
})
Directives compile to inline SVG (or PNG/img when configured). No renderer component is required.
Use with the Vue renderer
No special component is required — SVG is injected into the AST:
App.vue
<script setup lang="ts">
import { Markdown } from '@comark/vue'
import etiket from 'comark-etiket'
</script>
<template>
<Suspense>
<Markdown :plugins="[etiket()]">
{{ markdown }}
</Markdown>
</Suspense>
</template>
Write directives in markdown
example.md
::qrcode{value="https://comark.dev" dot-type="dots" ec-level="H"}
::
::barcode{value="4006381333931" type="ean13" show-text="true"}
::
::qr-wifi{ssid="GuestNetwork" password="Welcome123"}
::
Set plugin defaults
Pass defaults via the factory — frontmatter overrides these:
plugins.ts
import etiket from 'comark-etiket'
const plugins = [
etiket({
etiket: {
output: 'svg',
ecLevel: 'H',
},
}),
]
Handle runtime bindings
Attributes with a :key prefix (e.g. :value="user.profileUrl") cannot be resolved at parse time. See Binding behaviour for renderEtiketSvg.