---
title: Markdown block
description: ""
---

import { CopyButton } from "@/components/ui/custom/CopyButton";
import { GithubLinkButton } from "@/components/ui/custom/GithubLinkButton";
import { ExampleSideBySide } from "@/components/examples/ExampleMdx";
import { PackageInstall } from "@/components/docs/PackageInstall";
import {
  markdownGithubExampleUrl,
  fullMarkdownQuickStart,
  markdownStep1,
  markdownStep2,
} from "../../../snippets/markdownBlock";
import CopyDocsContainer from "@/components/content/CopyDocsContainer.astro";
import CopyExampleButton from "@/components/content/CopyExampleButton.astro";
import CopyOrGithub from "@/components/content/CopyOrGithub.astro";
import { examplesUrl } from "@/constants/constants";

The markdown block displays markdown content in the LLM output. The markdown block is designed to be used as the [fallback block](/docs/llm-output-hook#fallbackblock-object) in `useLLMOutput` which is used if no other block matches.

# Features

<ExampleSideBySide
  client:load
  example={`# Demo\n\n**Hello llm-ui!** this is [markdown](https://markdownguide.org)`}
  options={{ delayMultiplier: 1 }}
/>

- Streamed markdown support
- Markdown syntax hidden from users e.g. `##` for headers
- Show's one visible character at a time

# Installation

<PackageInstall client:load packages={["@llm-ui/markdown"]} />

# Quick start

<CopyOrGithub
  codeToCopy={fullMarkdownQuickStart}
  githubUrl={`${examplesUrl}/markdown`}
/>

## Install dependencies

<PackageInstall
  client:load
  packages={[
    "@llm-ui/react",
    "@llm-ui/markdown",
    "react-markdown",
    "remark-gfm",
  ]}
/>

## Step 1: Create a markdown component

Create a component to render markdown using `react-markdown`.

<CodeBlock code={markdownStep1} lang="tsx" />

<CopyDocsContainer>
  <CopyExampleButton toCopy={fullMarkdownQuickStart} />
</CopyDocsContainer>

## Step 2: Render markdown with llm-ui

Now we've created our markdown component, we're ready to use [useLLMOutput](/docs/llm-output-hook) to render a language model output which contains markdown.

<CodeBlock code={markdownStep2} lang="tsx" />

<CopyDocsContainer>
  <CopyExampleButton toCopy={fullMarkdownQuickStart} />
  Read more in the [useLLMOutput docs](/docs/llm-output-hook)
</CopyDocsContainer>

# Markdown block functions

## `markdownLookBack`

[Look back function](/docs/llm-output-hook#blocks-object) for the markdown block.

# Usage with `throttle`

In order to hide markdown syntax from users, your [`throttle` function](/docs/advanced/throttle-functions) must leave enough unrendered characters for the markdown block to parse and hide the syntax.
