,

,
,
1. , , etc.) → View component
- Inline elements (, , , , etc.) → Text component
- Type 1 blocks (

   , 
   
   `
   #### options.sanitizer
   By default a lightweight URL sanitizer function is provided to avoid common attack vectors that might be placed into the href of an anchor tag, for example. The sanitizer receives the input, the HTML tag being targeted, and the attribute name. The original function is available as a library export called sanitizer.
   This can be overridden and replaced with a custom sanitizer if desired via options.sanitizer:
   
   `tsx
   // sanitizer in this situation would receive:
   // ('javascript:alert("foo")', 'a', 'href')
    value }}>
     {foo)}
   // or
   compiler('foo)', {
     sanitizer: value => value,
   })
   `
   #### options.slugify
   By default, a lightweight deburring function is used to generate an HTML id from headings. You can override this by passing a function to options.slugify. This is helpful when you are using non-alphanumeric characters (e.g. Chinese or Japanese characters) in headings. For example:
   
   `tsx
    str }}># 中文
   compiler('# 中文', { slugify: str => str })
   `
   The original function is available as a library export called slugify.
   #### options.wrapper
   When there are multiple children to be rendered, the compiler will wrap the output in a div by default. You can override this default by setting the wrapper option to either a string (React Element) or a component.
   `tsx
   const str = '# Heck Yes\n\nThis is great!'
   {str}
   compiler(str, { wrapper: 'article' })
   `
   ##### Other useful recipes
   To get an array of children back without a wrapper, set wrapper to null. This is particularly useful when using compiler(…) directly.
   `tsx
   compiler('One\n\nTwo\n\nThree', { wrapper: null })[
     /* Returns / ((
   One
   ), (
   Two
   ), (
   Three
   ))
   ]
   `
   To render children at the same DOM level as  with no HTML wrapper, set wrapper to React.Fragment. This will still wrap your children in a React node for the purposes of rendering, but the wrapper element won't show up in the DOM.
   #### options.wrapperProps
   Props to apply to the wrapper element when wrapper is used.
   `tsx
     options={{
       wrapper: 'article',
       wrapperProps: { className: 'post', 'data-testid': 'markdown-content' },
     }}
   >
     # Hello World
   
   `
   $3
   When using fenced code blocks with language annotation, that language will be added to the  element as class="lang-${language}". For best results, you can use options.overrides to provide an appropriate syntax highlighting integration like this one using highlight.js:
   `html
   
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/obsidian.min.css"
   />
     crossorigin
     src="https://unpkg.com/@highlightjs/cdn-assets@11.9.0/highlight.min.js"
   >
   `
   ``tsx
   import { Markdown, RuleType } from 'markdown-to-jsx'
   const mdContainingFencedCodeBlock = '`js\nconsole.log("Hello world!");\n`\n'
   function App() {
     return (
             children={mdContainingFencedCodeBlock}
         options={{
           overrides: {
             code: SyntaxHighlightedCode,
           },
         }}
       />
     )
   }
   function SyntaxHighlightedCode(props) {
     const ref = React.useRef(null)
     React.useEffect(() => {
       if (ref.current && props.className?.includes('lang-') && window.hljs) {
         window.hljs.highlightElement(ref.current)
         // hljs won't reprocess the element unless this attribute is removed
         ref.current.removeAttribute('data-highlighted')
       }
     }, [props.className, props.children])
     return 
   }
   ``
   $3
   For Slack-style messaging with arbitrary shortcodes like :smile:, you can use options.renderRule to hook into the plain text rendering and adjust things to your liking, for example:
   `tsx
   import Markdown, { RuleType } from 'markdown-to-jsx'
   const shortcodeMap = {
     smile: '🙂',
   }
   const detector = /(:[^:]+:)/g
   const replaceEmoji = (text: string): React.ReactNode => {
     return text.split(detector).map((part, index) => {
       if (part.startsWith(':') && part.endsWith(':')) {
         const shortcode = part.slice(1, -1)
         return {shortcodeMap[shortcode] || part}
       }
       return part
     })
   }
   function Example() {
     return (
             options={{
           renderRule(next, node) {
             if (node.type === RuleType.text && detector.test(node.text)) {
               return replaceEmoji(node.text)
             }
             return next()
           },
         }}
       >
         {On a beautiful summer day, all I want to do is :smile:.}
       
     )
   }
   `
   When you use options.renderRule, any React-renderable JSX may be returned including images and GIFs. Ensure you benchmark your solution as the text rule is one of the hottest paths in the system!
   $3
   When rendering markdown content that arrives incrementally (e.g., from an AI/LLM API, WebSocket, or Server-Sent Events), you may notice raw markdown syntax briefly appearing before it renders properly. This happens because incomplete syntax like **bold text or partial content gets rendered as text before the closing delimiter arrives.
   The optimizeForStreaming option solves this by detecting incomplete markdown structures and returning null (React) or empty string (HTML) until the content is complete:
   `tsx
   import Markdown from 'markdown-to-jsx/react'
   function StreamingMarkdown({ content }) {
     return {content}
   }
   `
   LLM / AI chatbot integration:
   A common pattern is rendering streamed responses from LLM APIs (OpenAI, Anthropic, etc.) where tokens arrive one at a time. Without optimizeForStreaming, users see distracting flashes of raw markdown syntax between each token. With it enabled, incomplete structures are suppressed until the closing delimiter arrives, producing a smooth reading experience:
   `tsx
   import Markdown from 'markdown-to-jsx/react'
   import { useState, useEffect } from 'react'
   function ChatMessage({ stream }) {
     const [content, setContent] = useState('')
     useEffect(() => {
       // Accumulate tokens from the LLM stream
       stream.on('token', token => setContent(prev => prev + token))
     }, [stream])
     return {content}
   }
   `
   What it suppresses:
   - Unclosed HTML tags (
   content without 
   )
   - Incomplete tag syntax (
    without closing >)
   - Unclosed HTML comments ()
   - Unclosed inline code ( code ` without closing backtick)
   - Unclosed bold/italic (*text or text without closing)
   - Unclosed strikethrough (~~text without closing ~~)
   - Unclosed links ( without closing " class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">text)
   - Incomplete tables (header and separator row without any data rows)
   What renders normally (content visible as it streams):
   - Fenced code blocks - content is displayed as it arrives, waiting for closing fence
   $3
   Everything will work just fine! Simply Alias react to preact/compat like you probably already are doing.
   $3
   The Abstract Syntax Tree (AST) is a structured representation of parsed markdown. Each node in the AST has a type property that identifies its kind, and type-specific properties.
   Important: The first node in the AST is typically a RuleType.refCollection node that contains all reference definitions found in the document, including footnotes (stored with keys prefixed with ^). This node is skipped during rendering but is useful for accessing reference data. Footnotes are automatically extracted from the refCollection and rendered in a 
   Show more