Markdown
Renders markdown content as styled HTML with zero dependencies. Supports headings, lists, code blocks, blockquotes, links, images, and inline formatting.
<arc-markdown>Overview
Markdown parses a markdown string into styled HTML using a small built-in parser with zero external dependencies. Pass content via the content attribute or as slotted text, and the component renders it with design-token styling, so headings, code blocks, blockquotes, lists, links, and inline formatting match the rest of the ARC UI theme.
The parser handles the most common markdown patterns: ATX headings (# through ######), bold, italic, inline code, fenced code blocks with optional language hints, ordered and unordered lists, blockquotes, links, images, horizontal rules, and paragraph separation. It is small, built for documentation, changelogs, README rendering, and component descriptions rather than full CommonMark compliance.
All output is sanitized through a DOMParser pipeline that strips <script> elements and on* event handler attributes, making it safe to render user-provided markdown. The rendered HTML is injected into a styled shadow DOM container with proper spacing, typography, and color tokens applied to every element type.
Guidelines
When to use
- Use the content attribute for dynamic markdown from APIs or state
- Use slotted text for static markdown embedded in templates
- Pair with CodeBlock for syntax-highlighted code when full highlighting is needed
- Use for README rendering, changelogs, documentation, and component descriptions
When not to use
- Do not rely on it for full CommonMark or GFM compliance. It covers common patterns only
- Do not render untrusted HTML directly. Always go through the markdown parser
- Do not use it for rich text editing. Pair it with a dedicated editor component instead
- Do not nest Markdown components inside each other
Features
- Zero-dependency markdown parser built into the component
- Supports headings, bold, italic, code, lists, blockquotes, links, images, and HR
- Fenced code blocks with optional language class for syntax highlighting hooks
- Content via attribute or slotted text with automatic re-render on changes
- XSS-safe: strips script tags and on* event handlers from rendered output
- Full design-token styling for all rendered elements
- Exposed "markdown" CSS part for external style customization
Preview
Hello World
This is a markdown component with italic text and inline code.
Features
- Zero dependencies
- Design token styling
- XSS sanitization
Blockquotes work too, styled with the accent color.
const greeting = 'Hello from ARC UI';
console.log(greeting);
Links like ARC UI are styled with the accent color.
Usage
<arc-markdown content="# Hello World
This is **bold** and *italic* text with `inline code`.
## Lists
- Item one
- Item two
- Item three
> A blockquote with accent styling.
"></arc-markdown>
<!-- Or use slotted text -->
<arc-markdown>
# Slotted Content
Markdown passed as text content.
</arc-markdown>import { Markdown } from '@arclux/arc-ui-react';
const readme = `# My Component
A description with **bold** and \`code\`.
## Installation
\`\`\`bash
npm install my-component
\`\`\`
`;
export function Docs() {
return <Markdown content={readme} />;
}<script setup>
import { Markdown } from '@arclux/arc-ui-vue';
const content = '# Hello\n\nMarkdown content here.';
</script>
<template>
<Markdown :content="content" />
</template><script>
import { Markdown } from '@arclux/arc-ui-svelte';
let content = '# Hello\n\nMarkdown content here.';
</script>
<Markdown {content} />import { Component } from '@angular/core';
import { Markdown } from '@arclux/arc-ui-angular';
@Component({
imports: [Markdown],
template: `<arc-markdown [content]="md"></arc-markdown>`,
})
export class DocsComponent {
md = '# Hello\n\nMarkdown content here.';
}import { Markdown } from '@arclux/arc-ui-solid';
export function Docs() {
return <Markdown content="# Hello\n\nMarkdown content here." />;
}import { Markdown } from '@arclux/arc-ui-preact';
export function Docs() {
return <Markdown content="# Hello\n\nMarkdown content here." />;
}<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-markdown — requires markdown.css + tokens.css (or arc-ui.css) -->
<div class="arc-markdown">
<div class="markdown" ></div>
<slot style="display:none" ></slot>
</div><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-markdown — self-contained, no external CSS needed -->
<style>
@media (prefers-reduced-motion: reduce) {
.arc-markdown *,
.arc-markdown *::before,
.arc-markdown *::after { animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important; }
}
.arc-markdown .markdown a:hover { text-decoration: underline; }
</style>
<div class="arc-markdown" style="display: block">
<div class="markdown" style="font-family: 'Host Grotesk', system-ui, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.7; color: rgb(160, 165, 195)" ></div>
<slot style="display:none" ></slot>
</div>API
contentstring''- Markdown string to parse and render. Takes precedence over slotted text content.