Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Markdown

Renders markdown content as styled HTML with zero dependencies. Supports headings, lists, code blocks, blockquotes, links, images, and inline formatting.

Components Markdown
typography static
<arc-markdown>

Overview

Markdown parses a markdown string into styled HTML using a lightweight built-in parser with zero external dependencies. Pass content via the `content` attribute or as slotted text, and the component renders it with full design-token styling — headings, code blocks, blockquotes, lists, links, and inline formatting all 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 intentionally lightweight — designed 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 for rich text editing — pair 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

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

content string ''
Markdown string to parse and render. Takes precedence over slotted text content.

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy