# Prose
> Cherry Prose component - typography for rendered markdown: headings, links, lists, tables, code, and media.
Source: https://cherry.al/code/prose
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# Prose
The Prose component styles a block of rendered markdown - or any long-form HTML - with Cherry typography: the heading scale, underlined links with hover and focus states, bulleted and numbered lists, tables, inline code, blockquotes, rules, and media. Wrap the output of your markdown renderer in it and the content reads like the rest of the design system.
```jsx
import React from "react";
import { Prose } from "cherry-styled-components";
export default function Article({ html }) {
return ;
}
```
In the [chat kit](/code/chat), pass `` as an assistant message's content to render a markdown reply at chat density.
A few conventions from the markdown pipeline are honored:
- Fenced code blocks (`pre`, `.hljs`) keep their highlighter theme; only inline `code` without a class gets the Cherry tint.
- Wrap wide tables in a `
` to get horizontal scrolling with a slim scrollbar.
- Anchors that carry a class of their own, or that wrap an image, are left unstyled, so buttons and image links pass through untouched.
- First and last child margins are stripped, so the block sits flush inside whatever contains it (a card, a chat bubble, a callout).
## Properties
Tightens the vertical rhythm (20px block margins become 10px) and shifts each heading level down two steps, so markdown headings stay proportionate in dense contexts such as chat bubbles.
The component also accepts all native `
` attributes and forwards its ref to the root element.
## proseStyles
The styles are also exported as a mixin, `proseStyles(theme, $compact?)`, for applying to an element that is already styled instead of wrapping it in another `