--- title: "Markdown & code components" description: "Streaming Markdown, HTML, highlighted code, and diffs." image: "https://tuika.dev/social-card.png" --- > Documentation Index > Fetch the complete documentation index at: https://tuika.dev/llms.txt > Use this file to discover all available pages before exploring further. # Markdown & code components [All components](/components/) ### `Markdown` + `MarkdownState` Renders CommonMark (plus GFM tables and strikethrough) to styled lines — word-wrapping prose and fitting code and tables to the render width. `MarkdownState` adds incremental rendering for streaming text. See the [markdown guide](/markdown/) for streaming, tables, fenced-block renderers, highlighting, links, and images. [API](https://docs.rs/tuika/latest/tuika/components/markdown/index.html) Markdown streaming demo The presentational inline HTML tags render too — ``, ``, ``, ``, ``, ``, `
`, ``/`` — each resolving the same `StyleSheet` role as the markdown it mirrors. Block-level HTML is a boundary; see [Inline HTML](/markdown/#inline-html). Inline HTML in markdown: strong, emphasis, struck and underlined text, a highlighted run, keyboard keys, a link, Unicode subscript and superscript, and a line broken by a br tag ### `Html` Renders an HTML fragment to styled lines: headings, paragraphs, lists, definition lists, block quotes, `
`, `
`, ``,
`
`/``, and the presentational inline elements. Every element
resolves a `StyleSheet` role, so HTML inherits the app's theme like everything
else. No CSS — this renders content, not pages. Ships in the companion crate
[`tuika-html`](https://github.com/everruns/tuika/tree/main/crates/tuika-html/), which also supplies the
`MarkdownBlockRenderer` that lays out HTML blocks inside
[Markdown](/markdown/#block-html).
[API](https://docs.rs/tuika-html/latest/tuika_html/struct.Html.html)

The Html view filling a bordered pane: a heading, wrapped prose with bold and italic runs, a definition list, a box-drawn table, a block quote, a pre block on a code background, a rule, and a footer line with a link, keyboard keys and a highlighted run

### `CodeBlock`

A themed, syntax-highlighted fenced block: a language label, a left rail, and a
code background that fills the available width. Highlighting comes from a
pluggable `Highlighter` (none → plain, theme-colored text); the
`tuika-codeformatters` crate ships a tree-sitter one. An optional line-number
gutter (`line_numbers(true)` / `start_line(n)`) rides to the left of the rail.
[API](https://docs.rs/tuika/latest/tuika/components/struct.CodeBlock.html)

CodeBlock demo

```rust
use tuika::prelude::*;
view! {
node(CodeBlock::new("rust", "fn main() {}").highlighter(&highlighter).line_numbers(true))
}
```

### `Diff`

A line-oriented diff (LCS) rendered **unified** (`+`/`-`/` ` gutters) or
**side-by-side**, with an optional line-number gutter. Base, row, gutter, and
divider colors resolve from semantic styling; `DiffStyle` is the per-instance
override. The pure `diff::rows(old, new)` classifier is reusable on its own.
[API](https://docs.rs/tuika/latest/tuika/components/diff/struct.Diff.html)

Diff demo

```rust
use tuika::prelude::*;
view! {
node(Diff::new(old, new).mode(DiffMode::SideBySide).line_numbers(true))
}
```

---

[All components](/components/)

Source: https://tuika.dev/components/markdown-code/index.mdx