Markdown
Markdown renderer for rich formatted content, with headings, lists, tables, code blocks, and KaTeX math expressions out of the box.
import { Markdown } from "@plexui/vue/components/Markdown";Examples
Overview
Math
API
| Prop | Type | Default | Description |
|---|---|---|---|
default slot | string | — | Markdown source (text only; interpolate a string to keep its newlines) |
source | string | — | Markdown source, used when the default slot is empty |
include-math | boolean | false | Enable LaTeX math rendering |
break-new-lines | boolean | false | Turn single newlines into line breaks |
copyable-code-blocks | boolean | true | Show a copy button on code blocks |
collapsible-code-blocks | boolean | true | Render code blocks in the collapsible view with a View Code button |
components | Record<string, MarkdownComponent> | — | Tag name to component overrides, applied over the built-in ones |
directives | MarkdownDirective[] | — | Custom directives, each rendered by its own component |
remark-plugins | PluggableList | — | Extra remark plugins, after the built-in ones |
rehype-plugins | PluggableList | — | Extra rehype plugins |
allowed-elements | string[] | — | Only render these elements |
disallowed-elements | string[] | — | Never render these elements |
skip-html | boolean | false | Ignore raw HTML in the source |
url-transform | (url: string) => string | — | Rewrites URLs; the default drops unsafe protocols (javascript:) and keeps tel: and sms: |
class | string | — | Applied to the wrapping element |
Styling
Markdown has no component tokens of its own. It reads the shared semantic color, typography and spacing tokens listed in Design tokens, so it follows theme changes made there.