markdown-link-card

markdown-link-card

English | 简体中文

Vue 3 link preview cards for Markdown (custom tags and link-card fenced blocks), with streaming skeletons and CSS variable theming.

Install

npm install markdown-link-card

Package	Notes
vue ^3.5	Required peer
markstream-vue ^1.0	Install when rendering inside Markdown
stream-markdown	Install when using the markstream code-highlight stack

Global setup

Register the plugin and import styles in your app entry:

import { createApp } from 'vue'
import { createMarkdownLinkCardPlugin } from 'markdown-link-card'
import 'markdown-link-card/setup.css'
import App from './App.vue'

createApp(App).use(createMarkdownLinkCardPlugin()).mount('#app')

Style entry	Description
markdown-link-card/setup.css	Theme variables + component styles (recommended)
markdown-link-card/theme.css	CSS variables only
markdown-link-card/style.css	Component styles only

Plugin options

Option	Default	Description
scopeId	markdown-link-card	Custom renderer scope id
registerMarkdownRender	true	Also register the MarkdownRender component globally

createApp(App).use(
  createMarkdownLinkCardPlugin({ scopeId: 'my-app', registerMarkdownRender: false }),
)

Use in Markdown

<script setup lang="ts">
import MarkdownRender from 'markstream-vue'
import { useLinkCardMarkdown } from 'markdown-link-card'

const linkCard = useLinkCardMarkdown()

const content = `
<link-card
  url="https://vuejs.org/"
  title="Vue.js"
  description="The Progressive JavaScript Framework"
/>
`
</script>

<template>
  <MarkdownRender
    v-bind="linkCard"
    :content="content"
  />
</template>

useLinkCardMarkdown() returns customId and customHtmlTags for spreading onto MarkdownRender. Outside <script setup>, use getLinkCardMarkdownProps().

Standalone LinkCard

Render a card without Markdown:

<script setup lang="ts">
import { LinkCard } from 'markdown-link-card'
import 'markdown-link-card/style.css'

const card = {
  url: 'https://example.com',
  title: 'Example',
  description: 'Site description',
  image: 'https://example.com/og.png',
}
</script>

<template>
  <LinkCard :card="card" />
</template>

Prop	Type	Description
card	LinkCardData	url, title; optional description, image
loading	boolean	Show loading skeleton
unstyled	boolean	Layout only, no default theme colors

Markdown syntax

HTML tag

<link-card
  url="https://example.com"
  title="Title"
  description="Description"
  image="https://example.com/cover.png"
/>

Fenced block (JSON)

```link-card
{
  "url": "https://example.com",
  "title": "Title",
  "description": "Description"
}
```

Streaming content

When Markdown is appended incrementally, wrap incomplete <link-card> tags:

<script setup lang="ts">
import MarkdownRender from 'markstream-vue'
import { computed, ref } from 'vue'
import {
  markdownWithLinkCardTagPlaceholder,
  useLinkCardMarkdown,
} from 'markdown-link-card'

const linkCard = useLinkCardMarkdown()
const text = ref('')
const done = ref(false)

const content = computed(() =>
  markdownWithLinkCardTagPlaceholder(text.value, !done.value),
)
</script>

<template>
  <MarkdownRender
    v-bind="linkCard"
    :content="content"
    :final="done"
  />
</template>

Fenced blocks show an inline skeleton until parsing completes; custom tags rely on markdownWithLinkCardTagPlaceholder for placeholder nodes.

Theming

Override appearance with CSS variables:

.link-card {
  --mlc-radius: 12px;
  --mlc-border-color: #e5e7eb;
  --mlc-bg: #fff;
  --mlc-title-color: #111827;
  --mlc-desc-color: #6b7280;
}

See src/styles/theme.css (copied to dist/theme.css on build).

API

Export	Description
LinkCard	Link preview card component
LinkCardRenderer	Markdown node renderer
LinkCardSkeleton	Loading skeleton
createMarkdownLinkCardPlugin	Vue plugin
useLinkCardMarkdown	Composable: Markdown integration props
getLinkCardMarkdownProps	Same as above (non-setup)
registerLinkCardRenderer	Manual renderer registration
markdownWithLinkCardTagPlaceholder	Streaming placeholder helper

License

MIT