Added reference docs related to markdown parsing

docs/docs/reference/002-ui/005-markdown.mdx

@@ -0,0 +1,60 @@
+---
+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
+<br />
+<br />
+
+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
+<br />
+<br />
+
+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>
+    );
+});
+```