MarkdownRenderer Component

The MarkdownRenderer component safely renders markdown content with syntax highlighting and custom element support.

Import

import { MarkdownRenderer } from 'aichatkit'

Usage

Basic Example

basic-markdown-renderer.tsx

import { MarkdownRenderer } from 'aichatkit'
 
function BasicMarkdownRenderer() {
  const content = `
# Hello World
 
This is **bold** and *italic* text.
 
\`\`\`javascript
console.log('Hello, world!')
\`\`\`
  `
 
  return <MarkdownRenderer content={content} />
}

With Custom Components

custom-markdown-renderer.tsx

<MarkdownRenderer 
  content={content}
  components={{
    code: CustomCodeBlock,
    link: CustomLink,
    image: CustomImage
  }}
  enableSyntaxHighlighting={true}
/>

API Reference

Props

Prop	Type	Default	Description
`content`	`string`	-	Markdown content to render
`components`	`object`	`{}`	Custom component overrides
`enableSyntaxHighlighting`	`boolean`	`true`	Enable code syntax highlighting
`allowDangerousHtml`	`boolean`	`false`	Allow raw HTML rendering
`linkTarget`	`string`	`'_blank'`	Target for external links
`className`	`string`	-	Additional CSS classes

Custom Components

Code Block Override

const CustomCodeBlock = ({ children, className }) => (
  <pre className={`custom-code ${className}`}>
    <code>{children}</code>
  </pre>
)

Link Override

const CustomLink = ({ href, children }) => (
  <a href={href} className="custom-link" target="_blank">
    {children}
  </a>
)

⚠️

Be cautious when enabling allowDangerousHtml as it can introduce security vulnerabilities.

StreamingIndicator CodeBlock