Prose - Chakra Ui — ContextQMD

Setup

If you don't already have the snippet, run the following command to add the prose snippet

npx @chakra-ui/cli snippet add prose

jsx

import { Prose } from "@/components/ui/prose"

jsx

<Prose>
  <div dangerouslySetInnerHTML={{ __html: "..." }} />
</Prose>

Use the size prop to change the size of the Prose component

Blockquote elements are styled to match the design language of the Blockquote component.

List elements are styled to match the design language of the List component.

Here's an example of using the react-markdown library to render markdown content.

The table elements are styled to match the design language of the Table component.