Markdown
Live Markdown preview, Mermaid diagrams, SVG badges, and preview modes.
Rope Notes has a live Markdown preview that renders your source as you type.
Open a .md file and use the view toggle to switch modes.
Preview modes
| Mode | Behaviour |
|---|---|
| Editor only | Plain source editing |
| Side by side | Source on the left, live preview on the right — scrolls in sync |
| Preview only | Full-window rendered preview (hides the source pane) |
Cycle through modes from the editor toolbar or the View menu.
Standard Markdown
Most CommonMark features are rendered live in the preview:
- Headings (
#through######) - Bold (
**bold**), italic (*italic*), strikethrough (~~strikethrough~~) - Ordered and unordered lists
- Links (
[text](url)) and images () - Blockquotes (
>) - Inline code (
`code`) and fenced code blocks with syntax highlighting - Tables using pipes and dashes
- Horizontal rules (
---)
Code blocks
Fenced code blocks get syntax highlighting for the language specified after the opening backticks. Supported languages include Bash, C/C++, CSS, Dart, Diff, Go, Java, JavaScript, JSON, Kotlin, Markdown, PHP, Python, Ruby, Rust, SQL, Swift, TypeScript, XML/HTML, YAML, and more.
Source:
```python
def hello():
print("Hello, Rope Notes!")
```
Rendered:
def hello():
print("Hello, Rope Notes!")
Mermaid diagrams
Write diagrams as fenced code blocks with the mermaid language tag. They render inline in the preview and in the AI agent's chat responses.
Source:
```mermaid
flowchart LR
A[Start] --> B{Is it working?}
B -->|Yes| C[Done]
B -->|No| D[Fix it]
D --> B
```
Rendered:
Supported diagram types
| Type | Description |
|---|---|
| Flowchart | flowchart TD / flowchart LR — directional graphs |
| Sequence diagram | sequenceDiagram — message flows between actors |
| Pie chart | pie — proportional data |
| Gantt chart | gantt — project timelines |
| Timeline | timeline — chronological events |
| Class diagram | classDiagram — object-oriented structures |
| State diagram | stateDiagram-v2 — state machines |
| Kanban | kanban — board columns and cards |
| XY chart | xyChart — scatter / line / bar charts |
| Radar chart | radarChart — multi-axis comparisons |
Interactive controls
Mermaid diagrams are interactive:
- Pan — drag with mouse or touch
- Zoom — pinch on touch devices, Ctrl+scroll on desktop
- Initial fit — large diagrams auto-scale to fit the viewport on first render
- Copy source — click the copy button in the diagram header to copy the raw Mermaid source
Theme
Diagrams follow the editor's colour scheme — light mode uses a neutral palette, dark mode uses a dark palette. This is automatic based on your theme selection in Preferences → View.
SVG badges
Shields.io-style badge SVGs (common in README.md files) render correctly in the preview, including proper text scaling. No special syntax is needed — just use a standard Markdown image:
Source:
Rendered:
Related
- Editor — general editing, tabs, find/replace, diffs