Duct UI

Duct UI

A compact, DOM first UI library

GitHubNPM
NPM Version
pnpm install @duct-ui/corepnpm install @duct-ui/components

Markdown Component

A powerful markdown rendering component with syntax highlighting, customizable parsing, and full TypeScript support. This is the same component used throughout the Duct UI documentation.

View source on GitHub

Standard Markdown Rendering

This example shows standard markdown features with syntax highlighting.

Markdown Component Demo

This demo showcases the Duct UI Markdown component, which is the same component used throughout this documentation site.

Features

Basic Formatting

  • Bold text and italic text
  • Strikethrough text
  • inline code
  • Links

Lists

  1. Ordered lists
  2. With multiple items
    • Can be nested
    • With proper indentation
  • Unordered lists
  • Also work great
    • With nesting
    • As deep as needed

Code Blocks with Syntax Highlighting

// TypeScript example with Prism.js highlighting
interface MarkdownProps {
  content: string
  class?: string
  markdownIt?: MarkdownIt
  unsafe?: boolean
  linkTarget?: "_blank" | "_self" | "_parent" | "_top"
}

function render(props: BaseProps<MarkdownProps>) {
  const { content, markdownIt, unsafe } = props
  const md = markdownIt || defaultMarkdown
  return <div unsafe-html={md.render(content)} />
}

// JavaScript is also supported
const markdown = createMarkdownInstance({
  html: false,
  linkify: true,
  typographer: true
})

console.log(markdown.render('# Hello World'))

Blockquotes

“The Markdown component in Duct UI provides a clean,
extensible way to render markdown content with full
TypeScript support and customizable parsing options.”

— Duct UI Documentation

Tables

Feature Description Status
CommonMark Full CommonMark compliance ✅
Syntax Highlighting Prism.js integration ✅
HTML Support Raw HTML rendering enabled ✅
TypeScript Full type safety ✅

Horizontal Rules

Images

Duct UI Logo

Advanced Usage

The component supports:

  1. Custom markdown-it instances - Pass your own configured parser
  2. Unsafe HTML - Enable raw HTML rendering when needed
  3. Link targets - Control how links open
  4. Dynamic content updates - Use the component logic to update content

Security Note

By default, HTML in markdown is disabled for security. You can enable it with the unsafe prop, but be careful with user-generated content!

Usage Example

Installation

pnpm add markdown-it markdown-it-prism prismjs

Basic Usage

import Markdown from '@duct-ui/components/content/markdown/markdown'
import '@duct-ui/components/content/markdown/markdown.css'

// Simple markdown rendering
<Markdown content={markdownText} />

Advanced Usage

// Basic usage
<Markdown content={markdownText} />

// With component options
<Markdown
  content={markdownText}
  linkTarget="_blank"
  class="custom-markdown"
/>

// With custom markdown-it instance (if needed)
import { createMarkdownInstance } from '@duct-ui/components'
const md = createMarkdownInstance({ breaks: false })
<Markdown markdownIt={md} content={text} />

Component Logic

import { createRef } from '@duct-ui/core'
import type { MarkdownLogic } from '@duct-ui/components/content/markdown/markdown'

const markdownRef = createRef<MarkdownLogic>()

// Update content dynamically
markdownRef.current?.updateContent('# New Content')

// Get rendered HTML
const html = markdownRef.current?.getHtml()

Key Features

  • ✓Full CommonMark support via markdown-it
  • ✓Syntax highlighting with Prism.js
  • ✓Support for custom markdown-it instances
  • ✓TypeScript support with full type safety
  • ✓Dynamic content updates via component logic
  • ✓Configurable link targets with security

Peer Dependencies

To use the Markdown component, install these peer dependencies:

pnpm add markdown-it markdown-it-prism prismjs

These are optional peer dependencies, so you only need them if you use the Markdown component.