Markdown Viewer

beta

The MarkdownViewer component provides a comprehensive solution for rendering markdown content with advanced features like syntax highlighting, interactive task lists, code suggestions, and customizable image handling. Perfect for displaying documentation, comments, READMEs, and code review content.

Basic Usage

The MarkdownViewer renders standard markdown syntax including headings, lists, links, images, and code blocks.

Usage

import { MarkdownViewer } from '@harnessio/ui/components'

//...

return (
  <MarkdownViewer
    source="# Hello World\n\nThis is **markdown** content."
  />
)

With Border

Add a bordered container around the markdown content using the withBorder prop.

Max Height

Control the maximum height of the markdown container to create scrollable content.

Code Blocks with Syntax Highlighting

Code blocks automatically receive syntax highlighting based on the language specified.

Code Blocks with Line Numbers

Enable line numbers for code blocks using the showLineNumbers prop. This is especially useful for code reviews and documentation.

Interactive Task Lists

The MarkdownViewer supports interactive checkboxes in task lists. Use the onCheckboxChange prop to handle state updates.

Variant Sizes

The MarkdownViewer supports two variants: default and sm for different typography scales.

Code Suggestions

The MarkdownViewer can render special code suggestion blocks with custom headers and footers. Use the suggestionBlock, suggestionTitle, and suggestionFooter props.

Image URL Transform

Transform image URLs before rendering using the imageUrlTransform prop. Useful for handling relative paths or proxying images.

Tables and Blockquotes

The MarkdownViewer fully supports markdown tables and blockquotes.

External Links

External links automatically open in a new tab with security attributes (nofollow, noreferrer, noopener).

Video Embeds

The MarkdownViewer supports video file embeds for common video formats.

Loading State

Display a loading state to disable interactive elements while content is being updated.

Real-World Example: Comment System

Here’s a practical example combining multiple features for a comment/discussion system.

API Reference

Prop	Required	Default	Type
source	true		string
variant	false	'default'	'default' \| 'sm'
maxHeight	false		string \| number
withBorder	false	false	boolean
className	false		string
markdownClassName	false		string
showLineNumbers	false	false	boolean
onCheckboxChange	false		(source: string) => void
isLoading	false	false	boolean
imageUrlTransform	false		(src: string) => string
suggestionBlock	false		SuggestionBlock
suggestionCheckSum	false		string
suggestionTitle	false		string
suggestionFooter	false		ReactNode

Features Summary

Markdown Support

Standard Syntax: Headings, paragraphs, lists, links, emphasis
Tables: Full table rendering with alignment
Blockquotes: Styled quote blocks
Code Blocks: Syntax highlighting with copy button
Images: Click to open in new tab
Videos: Embedded video support for common formats

Interactive Features

Task Lists: Clickable checkboxes with state management
Code Suggestions: Special rendering for code review suggestions
Line Numbers: Optional line numbering for code blocks

Security

Sanitization: Content is sanitized using rehype-sanitize
External Links: Automatically configured with security attributes
XSS Protection: Image props and event handlers are sanitized

Customization

Typography Variants: Default and small size options
Image Transforms: Custom URL transformation for images
Styling: Customizable with className props
Layout: Border and height constraints

Plugins

The component uses several rehype and remark plugins:

remark-breaks - Convert line breaks to <br> tags
rehype-sanitize - Sanitize HTML output
rehype-video - Embed video files
rehype-external-links - Configure external link behavior