---
sidebar_label: 'Markdown'
---

# Markdown Parsing

`NLUX` comes with its own markdown parser that can be used to render markdown content in the chat area.<br />
On top of that, a `<Markdown>` primitive is provided to render markdown in custom renderers.

## Usage

---

### With Streaming Custom Renderers

In order to use markdown stream parser with custom renderers, you can simply pass the `props.containerRef`
to the container element where you would like to add the rendered markdown content, and `NLUX` will
take care of the rest.

```jsx
import {memo} from 'react';
import {ResponseRenderer, Markdown} from '@nlux/react';

const responseRenderer: ResponseRenderer<string> = memo((props) => {
    const {props.containerRef} = props;

    return (
        <div className="myCustomRenderer">
            <div ref={props.containerRef}/>
        </div>
    );
});
```

---

### With Batched Custom Renderers

If you are using batched custom renderers, or your would like to add markdown to initial conversation messages,
you can use the `<Markdown>` primitive.

```jsx
import {memo} from 'react';
import {ResponseRenderer, Markdown} from '@nlux/react';

const responseRenderer: ResponseRenderer<string> = memo((props) => {
    const {content} = props;
    return (
        <div className="myCustomRenderer">
            <Markdown>{content}</Markdown>
        </div>
    );
});
```
