Skip to content

MarkdownViewer

Added in version 0.11.0

A Widget to display Markdown content with an optional Table of Contents.

  • Focusable
  • Container

Note

This Widget adds browser-like functionality on top of the Markdown widget.

Example

The following example displays Markdown from a string and a Table of Contents.

MarkdownExampleApp ▼ Ⅰ Markdown Viewer ├── Ⅱ FeaturesMarkdown Viewer ├── Ⅱ Tables ├── Ⅱ Code BlocksThis is an example of Textual's MarkdownViewer widget. └── Ⅱ Litany Against Fear Features Markdown syntax and extensions are supported. • Typography emphasisstronginline code etc. • Headers • Lists (bullet and ordered) • Syntax highlighted code blocks • Tables! Tables Tables are displayed in a DataTable widget. ────────────────────────────────────────────────────────────── NameTypeDefaultDescription ────────────────────────────────────────────────────────────── show_headerboolTrueShow the table header ────────────────────────────────────────────────────────────── fixed_rowsint0Number of fixed rows▃▃ ────────────────────────────────────────────────────────────── fixed_columnsint0Number of fixed columns ────────────────────────────────────────────────────────────── zebra_stripesboolFalseDisplay alternating colors on rows ────────────────────────────────────────────────────────────── header_heightint1Height of header row ────────────────────────────────────────────────────────────── show_cursorboolTrueShow a cell cursor ────────────────────────────────────────────────────────────── Code Blocks

from textual.app import App, ComposeResult
from textual.widgets import MarkdownViewer

EXAMPLE_MARKDOWN = """\
# Markdown Viewer

This is an example of Textual's `MarkdownViewer` widget.


## Features

Markdown syntax and extensions are supported.

- Typography *emphasis*, **strong**, `inline code` etc.
- Headers
- Lists (bullet and ordered)
- Syntax highlighted code blocks
- Tables!

## Tables

Tables are displayed in a DataTable widget.

| Name            | Type   | Default | Description                        |
| --------------- | ------ | ------- | ---------------------------------- |
| `show_header`   | `bool` | `True`  | Show the table header              |
| `fixed_rows`    | `int`  | `0`     | Number of fixed rows               |
| `fixed_columns` | `int`  | `0`     | Number of fixed columns            |
| `zebra_stripes` | `bool` | `False` | Display alternating colors on rows |
| `header_height` | `int`  | `1`     | Height of header row               |
| `show_cursor`   | `bool` | `True`  | Show a cell cursor                 |


## Code Blocks

Code blocks are syntax highlighted.

```python
class ListViewExample(App):
    def compose(self) -> ComposeResult:
        yield ListView(
            ListItem(Label("One")),
            ListItem(Label("Two")),
            ListItem(Label("Three")),
        )