Markdown — ARC UI

Components

Markdown

typography

static

<arc-markdown>

Overview

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

Rely on it for full CommonMark or GFM compliance — it covers common patterns only
Render untrusted HTML directly — always go through the markdown parser
Use for rich text editing — pair with a dedicated editor component instead
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

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: `<Markdown [content]="md"></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

Prop	Type	Default	Description
`content`	`string`	—	Markdown string to parse and render. Takes precedence over slotted text content.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight