Terminal Markdown previewer — GUI-like experience.
Merge pull request #52 from RivoLink/docs/add-features-demo
docs: add features demo
+424
-1
+2
-1
README.md
+2
-1
README.md
+132
demo/README.md
+132
demo/README.md
···
1
+
# leaf - Features Demo
2
+
3
+
**leaf** is a terminal-based Markdown previewer with syntax highlighting, LaTeX rendering, theme support, and interactive navigation.
4
+
5
+
## Interactive Features
6
+
7
+
### Watch Mode
8
+
9
+
**leaf** can monitor your file for changes and automatically reload the preview. The status bar shows a "reloaded" flash indicator when the file is updated. Scroll position is preserved across reloads.
10
+
11
+
- Press `w` or `Ctrl+W` to toggle watch mode
12
+
- Press `r` or `Ctrl+R` to manually reload the file
13
+
- Use `--watch` flag on startup: `leaf --watch file.md`
14
+
15
+
Source: [demo-watch-mode.md](sources/demo-watch-mode.md)
16
+
17
+
18
+
19
+
### Open in Editor
20
+
21
+
Quickly open the current file in your preferred external editor without leaving **leaf**. When you return, the file is automatically reloaded with the latest changes.
22
+
23
+
- Press `Ctrl+E` to open in the configured editor
24
+
- Press `Shift+E` to pick an editor (nano, vim, code, subl, emacs)
25
+
- Use `--editor` flag on startup: `leaf --editor vim file.md`
26
+
27
+
Source: [demo-open-editor.md](sources/demo-open-editor.md)
28
+
29
+
30
+
31
+
### File Picker
32
+
33
+
Browse and open Markdown files without leaving **leaf**. Two modes are available: a fuzzy finder for quick search by filename, and a directory browser for navigating the file tree.
34
+
35
+
- Press `Ctrl+P` for fuzzy file picker
36
+
- Press `Shift+P` for directory browser
37
+
- Use `--picker` flag on startup: `leaf --picker`
38
+
39
+
Source: [demo-file-picker.md](sources/demo-file-picker.md)
40
+
41
+
42
+
43
+
### Table of Contents
44
+
45
+
A sidebar displays the document's heading structure for quick navigation. **leaf** intelligently normalizes heading levels and highlights the currently visible section.
46
+
47
+
- Press `t` to toggle the TOC sidebar
48
+
- Press `1-9` to jump directly to a heading
49
+
50
+
Source: [demo-toc-sidebar.md](sources/demo-toc-sidebar.md)
51
+
52
+
53
+
54
+
### Search
55
+
56
+
Full-text search with visual highlighting of all matches. Navigate between results with match counter feedback in the status bar.
57
+
58
+
- Press `/` or `Ctrl+F` to start searching
59
+
- Press `n` to jump to next match
60
+
- Press `Shift+N` to jump to previous match
61
+
62
+
Source: [demo-search.md](sources/demo-search.md)
63
+
64
+
65
+
66
+
**And also:**
67
+
- **Auto-update**: run `leaf --update` to check and install the latest version from GitHub with SHA256 verification
68
+
- **Stdin support**: pipe Markdown directly with `echo '# Hello' | leaf` (up to 8 MB)
69
+
- **Status bar**: displays filename, watch indicator, search status, and scroll percentage
70
+
- **Help modal**: press `?` to view all keyboard shortcuts organized by category
71
+
72
+
## Markdown Rendering
73
+
74
+
### LaTeX / Math
75
+
76
+
**leaf** renders mathematical formulas directly in the terminal — a rare feature for a terminal viewer. Inline math with `$...$` and display math with `$$...$$` are converted to Unicode symbols.
77
+
78
+
Supported: fractions, superscripts, subscripts, Greek letters, roots, and more. Code blocks with `latex` or `tex` language are also rendered.
79
+
80
+
Source: [demo-latex-render.md](sources/demo-latex-render.md)
81
+
82
+
83
+
84
+
### Code Blocks with Syntax Highlighting
85
+
86
+
Fenced code blocks are displayed in a decorative frame with language label and line numbers. Syntax highlighting supports 40+ languages (Rust, Python, JavaScript, TypeScript, Go, C/C++, Java, and more) via the syntect library.
87
+
88
+
Code blocks adapt to the terminal width with intelligent wrapping.
89
+
90
+
Source: [demo-code-syntax.md](sources/demo-code-syntax.md)
91
+
92
+
93
+
94
+
### Tables
95
+
96
+
Markdown tables are rendered with Unicode box-drawing borders and column alignment (left, center, right). Cells support inline code and LaTeX math. Tables adapt to the available terminal width.
97
+
98
+
Source: [demo-table-render.md](sources/demo-table-render.md)
99
+
100
+
101
+
102
+
### Theme Picker
103
+
104
+
Choose from 4 built-in themes with live preview as you navigate. Each theme applies to the UI, Markdown elements, and syntax highlighting simultaneously.
105
+
106
+
- Press `Shift+T` to open the theme picker
107
+
- Available themes: Arctic, Forest, Ocean Dark, Solarized Dark
108
+
- Press `Esc` to cancel and restore the original theme
109
+
110
+
Source: [demo-theme-picker.md](sources/demo-theme-picker.md)
111
+
112
+
113
+
114
+
### Navigation
115
+
116
+
Navigate documents with keyboard shortcuts or mouse. The scrollbar on the right supports click and drag for quick positioning.
117
+
118
+
- `j`/`k` or arrow keys: scroll line by line
119
+
- `d`/`u` or PageDown/PageUp: scroll by page
120
+
- `g`/`Shift+G` or Home/End: jump to top/bottom
121
+
- Mouse wheel: scroll 3 lines per tick
122
+
- Scrollbar: click and drag for fast navigation
123
+
124
+
Source: [demo-navigation.md](sources/demo-navigation.md)
125
+
126
+
127
+
128
+
**And also:**
129
+
- **Blockquotes**: multi-level nesting with vertical markers, italic text, can contain lists and code
130
+
- **Nested lists**: Unicode bullets per level (bullet, circle, triangle), distinct colors, ordered lists with numbering
131
+
- **Headings**: H1 underlined with double lines, H2 with single lines, H3 bold, H4+ with distinct colors
132
+
- **Inline formatting**: **bold**, *italic*, ~~strikethrough~~, `inline code`, links with icon
+132
demo/README_FR.md
+132
demo/README_FR.md
···
1
+
# leaf - Démo des fonctionnalités
2
+
3
+
**leaf** est un prévisualiseur Markdown en terminal avec coloration syntaxique, rendu LaTeX, support de thèmes et navigation interactive.
4
+
5
+
## Fonctionnalités interactives
6
+
7
+
### Mode Watch
8
+
9
+
**leaf** peut surveiller votre fichier et recharger automatiquement l'aperçu lors de modifications. La barre de statut affiche un indicateur "reloaded" lorsque le fichier est mis à jour. La position de défilement est préservée.
10
+
11
+
- Appuyez sur `w` ou `Ctrl+W` pour activer/désactiver le mode watch
12
+
- Appuyez sur `r` ou `Ctrl+R` pour recharger manuellement le fichier
13
+
- Utilisez le flag `--watch` au démarrage : `leaf --watch fichier.md`
14
+
15
+
Source: [demo-watch-mode.md](sources/demo-watch-mode.md)
16
+
17
+
18
+
19
+
### Ouverture dans un éditeur
20
+
21
+
Ouvrez rapidement le fichier courant dans votre éditeur externe préféré sans quitter **leaf**. Au retour, le fichier est automatiquement rechargé avec les dernières modifications.
22
+
23
+
- Appuyez sur `Ctrl+E` pour ouvrir dans l'éditeur configuré
24
+
- Appuyez sur `Shift+E` pour choisir un éditeur (nano, vim, code, subl, emacs)
25
+
- Utilisez le flag `--editor` au démarrage : `leaf --editor vim fichier.md`
26
+
27
+
Source: [demo-open-editor.md](sources/demo-open-editor.md)
28
+
29
+
30
+
31
+
### Sélecteur de fichiers
32
+
33
+
Parcourez et ouvrez des fichiers Markdown sans quitter **leaf**. Deux modes sont disponibles : un sélecteur fuzzy pour rechercher rapidement par nom, et un navigateur de dossiers pour parcourir l'arborescence.
34
+
35
+
- Appuyez sur `Ctrl+P` pour le sélecteur fuzzy
36
+
- Appuyez sur `Shift+P` pour le navigateur de dossiers
37
+
- Utilisez le flag `--picker` au démarrage : `leaf --picker`
38
+
39
+
Source: [demo-file-picker.md](sources/demo-file-picker.md)
40
+
41
+
42
+
43
+
### Table des matières
44
+
45
+
Une barre latérale affiche la structure des titres du document pour une navigation rapide. **leaf** normalise intelligemment les niveaux de titres et met en surbrillance la section actuellement visible.
46
+
47
+
- Appuyez sur `t` pour afficher/masquer la table des matières
48
+
- Appuyez sur `1-9` pour sauter directement à un titre
49
+
50
+
Source: [demo-toc-sidebar.md](sources/demo-toc-sidebar.md)
51
+
52
+
53
+
54
+
### Recherche
55
+
56
+
Recherche plein texte avec surlignage visuel de toutes les correspondances. Naviguez entre les résultats avec un compteur affiché dans la barre de statut.
57
+
58
+
- Appuyez sur `/` ou `Ctrl+F` pour lancer la recherche
59
+
- Appuyez sur `n` pour aller au résultat suivant
60
+
- Appuyez sur `Shift+N` pour aller au résultat précédent
61
+
62
+
Source: [demo-search.md](sources/demo-search.md)
63
+
64
+
65
+
66
+
**Et aussi :**
67
+
- **Mise à jour automatique** : lancez `leaf --update` pour vérifier et installer la dernière version depuis GitHub avec vérification SHA256
68
+
- **Support stdin** : envoyez du Markdown via un pipe avec `echo '# Bonjour' | leaf` (jusqu'à 8 Mo)
69
+
- **Barre de statut** : affiche le nom du fichier, l'indicateur watch, le statut de recherche et le pourcentage de défilement
70
+
- **Modal d'aide** : appuyez sur `?` pour afficher tous les raccourcis clavier organisés par catégorie
71
+
72
+
## Rendu Markdown
73
+
74
+
### LaTeX / Math
75
+
76
+
**leaf** rend les formules mathématiques directement dans le terminal — une fonctionnalité rare pour un viewer en terminal. Les formules inline avec `$...$` et les formules en bloc avec `$$...$$` sont converties en symboles Unicode.
77
+
78
+
Supporté : fractions, exposants, indices, lettres grecques, racines, et plus encore. Les blocs de code en langage `latex` ou `tex` sont également rendus.
79
+
80
+
Source: [demo-latex-render.md](sources/demo-latex-render.md)
81
+
82
+
83
+
84
+
### Blocs de code avec coloration syntaxique
85
+
86
+
Les blocs de code sont affichés dans un cadre décoratif avec le label du langage et des numéros de ligne. La coloration syntaxique supporte plus de 40 langages (Rust, Python, JavaScript, TypeScript, Go, C/C++, Java, etc.) via la bibliothèque syntect.
87
+
88
+
Les blocs de code s'adaptent à la largeur du terminal avec un retour à la ligne intelligent.
89
+
90
+
Source: [demo-code-syntax.md](sources/demo-code-syntax.md)
91
+
92
+
93
+
94
+
### Tableaux
95
+
96
+
Les tableaux Markdown sont rendus avec des bordures Unicode et un alignement des colonnes (gauche, centre, droite). Les cellules supportent le code inline et les formules LaTeX. Les tableaux s'adaptent à la largeur disponible du terminal.
97
+
98
+
Source: [demo-table-render.md](sources/demo-table-render.md)
99
+
100
+
101
+
102
+
### Sélecteur de thèmes
103
+
104
+
Choisissez parmi 4 thèmes intégrés avec prévisualisation en temps réel pendant la navigation. Chaque thème s'applique à l'interface, aux éléments Markdown et à la coloration syntaxique simultanément.
105
+
106
+
- Appuyez sur `Shift+T` pour ouvrir le sélecteur de thèmes
107
+
- Thèmes disponibles : Arctic, Forest, Ocean Dark, Solarized Dark
108
+
- Appuyez sur `Esc` pour annuler et restaurer le thème d'origine
109
+
110
+
Source: [demo-theme-picker.md](sources/demo-theme-picker.md)
111
+
112
+
113
+
114
+
### Navigation
115
+
116
+
Naviguez dans les documents avec les raccourcis clavier ou la souris. La barre de défilement à droite supporte le clic et le glisser-déposer pour un positionnement rapide.
117
+
118
+
- `j`/`k` ou flèches : défiler ligne par ligne
119
+
- `d`/`u` ou PageDown/PageUp : défiler par page
120
+
- `g`/`Shift+G` ou Home/End : aller au début/fin
121
+
- Molette de la souris : défilement de 3 lignes par cran
122
+
- Barre de défilement : cliquez et glissez pour naviguer rapidement
123
+
124
+
Source: [demo-navigation.md](sources/demo-navigation.md)
125
+
126
+
127
+
128
+
**Et aussi :**
129
+
- **Blockquotes** : imbrication multi-niveaux avec marqueurs verticaux, texte en italique, peut contenir des listes et du code
130
+
- **Listes imbriquées** : puces Unicode par niveau (puce, cercle, triangle), couleurs distinctes, listes ordonnées avec numérotation
131
+
- **Titres** : H1 souligné avec double ligne, H2 avec ligne simple, H3 en gras, H4+ avec couleurs distinctes
132
+
- **Formatage inline** : **gras**, *italique*, ~~barré~~, `code inline`, liens avec icône
demo/images/demo-code-syntax.png
demo/images/demo-code-syntax.png
This is a binary file and will not be displayed.
demo/images/demo-file-picker.png
demo/images/demo-file-picker.png
This is a binary file and will not be displayed.
demo/images/demo-latex-render.png
demo/images/demo-latex-render.png
This is a binary file and will not be displayed.
demo/images/demo-open-editor.png
demo/images/demo-open-editor.png
This is a binary file and will not be displayed.
demo/images/demo-search.png
demo/images/demo-search.png
This is a binary file and will not be displayed.
demo/images/demo-table-render.png
demo/images/demo-table-render.png
This is a binary file and will not be displayed.
demo/images/demo-theme-picker.png
demo/images/demo-theme-picker.png
This is a binary file and will not be displayed.
demo/images/demo-watch-mode.png
demo/images/demo-watch-mode.png
This is a binary file and will not be displayed.
+44
demo/sources/demo-code-syntax.md
+44
demo/sources/demo-code-syntax.md
···
1
+
# Code Blocks with Syntax Highlighting
2
+
3
+
Read code — 40+ languages with colors, line numbers, and frames.
4
+
5
+
## What Syntax Highlighting is
6
+
7
+
**Syntax Highlighting** renders fenced code blocks with language-aware coloring, decorative frames, and line numbers.
8
+
9
+
## Rust
10
+
11
+
```rust
12
+
fn main() {
13
+
let name = "leaf";
14
+
println!("Hello from {}!", name);
15
+
}
16
+
```
17
+
18
+
## Python
19
+
20
+
```python
21
+
def fibonacci(n):
22
+
a, b = 0, 1
23
+
for _ in range(n):
24
+
a, b = b, a + b
25
+
return a
26
+
```
27
+
28
+
## JavaScript
29
+
30
+
```javascript
31
+
const greet = (name) => {
32
+
return `Hello, ${name}!`;
33
+
};
34
+
console.log(greet("leaf"));
35
+
```
36
+
37
+
## Bash
38
+
39
+
```bash
40
+
#!/bin/bash
41
+
for file in *.md; do
42
+
leaf --watch "$file" &
43
+
done
44
+
```
+9
demo/sources/demo-file-picker.md
+9
demo/sources/demo-file-picker.md
···
1
+
# File Picker
2
+
3
+
Browse and open — find Markdown files without leaving **leaf**.
4
+
5
+
## What File Picker is
6
+
7
+
**File Picker** lets you browse and open Markdown files directly from **leaf**.
8
+
9
+
Two modes are available: a **fuzzy finder** for quick search by filename, and a **directory browser** for navigating the file tree.
+15
demo/sources/demo-latex-render.md
+15
demo/sources/demo-latex-render.md
···
1
+
# LaTeX / Math
2
+
3
+
Render formulas — mathematical expressions directly in the terminal.
4
+
5
+
## What LaTeX Rendering is
6
+
7
+
**LaTeX Rendering** converts mathematical formulas into Unicode symbols right in the terminal — a rare feature for a terminal viewer.
8
+
9
+
Einstein's famous equation: $E = mc^2$
10
+
11
+
Euler–Poisson integral:
12
+
13
+
```latex
14
+
\int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
15
+
```
+11
demo/sources/demo-open-editor.md
+11
demo/sources/demo-open-editor.md
···
1
+
# Open in Editor
2
+
3
+
Edit without leaving — open your file in an external editor.
4
+
5
+
## What Open in Editor is
6
+
7
+
**Open in Editor** lets you quickly open the current file in your preferred external editor directly from **leaf**.
8
+
9
+
When you return, the file is automatically reloaded with the latest changes.
10
+
11
+
Supported editors: **nano**, **vim**, **code**, **subl**, **emacs**.
+11
demo/sources/demo-search.md
+11
demo/sources/demo-search.md
···
1
+
# Search
2
+
3
+
Find anything — full-text search with visual highlighting.
4
+
5
+
## What Search is
6
+
7
+
**Search** lets you find text across the entire document with highlighted matches and navigation.
8
+
9
+
The status bar shows the match counter (e.g. "3/7") as you navigate between results.
10
+
11
+
+12
demo/sources/demo-table-render.md
+12
demo/sources/demo-table-render.md
···
1
+
# Tables
2
+
3
+
Structured data — rendered with Unicode borders and column alignment.
4
+
5
+
## What Table Rendering is
6
+
7
+
**Table Rendering** displays Markdown tables with box-drawing borders, column alignment, and support for inline code and LaTeX in cells.
8
+
9
+
| Feature | Syntax | Rendered | Align |
10
+
|:--------|:------:|----------|--------:|
11
+
| Code | `` `code` `` | `code` | `code` |
12
+
| Math | `$E=mc^2$` | $E=mc^2$ | $E=mc^2$ |
+11
demo/sources/demo-theme-picker.md
+11
demo/sources/demo-theme-picker.md
···
1
+
# Theme Picker
2
+
3
+
Customize your view — choose from 4 built-in themes with live preview.
4
+
5
+
## What Theme Picker is
6
+
7
+
**Theme Picker** lets you switch between color themes with real-time preview as you navigate.
8
+
9
+
Each theme applies to the UI, Markdown elements, and syntax highlighting simultaneously.
10
+
11
+
Available themes: **Arctic**, **Forest**, **Ocean Dark**, **Solarized Dark**.
+11
demo/sources/demo-watch-mode.md
+11
demo/sources/demo-watch-mode.md
···
1
+
# Watch Mode
2
+
3
+
Live reload — edit and preview in real time.
4
+
5
+
## What Watch Mode is
6
+
7
+
**Watch Mode** monitors your Markdown file for changes and automatically reloads the preview.
8
+
9
+
It is designed for editing workflows where you want instant feedback without manually refreshing.
10
+
11
+
**Watch Mode** is active when the status bar shows "**⟳ watch**".