Awesome Preview Markdown

Preview local & remote Markdown in a side-by-side dual pane — with table of contents, Mermaid diagrams, syntax highlighting, one-click copy, and synchronized scrolling.

View on GitHub Install guide

Features

🖱️

Right-click to preview

“Preview markdown on side” opens any Markdown tab in Chrome’s side panel.

◫

Dual-pane layout

Source and preview side by side with one shared toolbar and a draggable splitter.

📑

Table of contents

Right-docked, in-flow TOC with scroll-spy and click-to-jump. Never floats over content.

📊

Mermaid diagrams

Flowchart, sequence, class, state, ER, Gantt, pie, journey, gitGraph, mindmap, timeline.

🎨

Highlight + copy

~70 languages via highlight.js, each block labeled with a one-click Copy button.

🔗

Synced scrolling

Line-accurate two-way sync between source and preview. Toggleable.

⛶

Fullscreen & theme

Fullscreen preview and light/dark switching.

🔒

No self-fetching

The browser opens content; the extension only reads the tab. No network calls of its own.

📈

Status bar

Live lines · words · KB stats, file name and reading position.

💾

Remembers settings

Theme, layout, TOC, sync and splitter position persist across sessions.

🔄

Auto-follows the tab

The preview refreshes when the source tab navigates or reloads.

🌗

System dark mode

On first run the theme follows your OS light/dark preference.

Install (load unpacked)

  1. Clone or download the repository.
  2. Open chrome://extensions and enable Developer mode.
  3. Click Load unpacked and select the repo root (the folder with manifest.json).
  4. Pin the icon, open a Markdown file in a tab, then right-click → Preview markdown on side.

To preview local file:// Markdown, open the extension’s Details in chrome://extensions and enable Allow access to file URLs. Remote http(s):// files need no extra setting.

Keyboard shortcuts

1Source-only layout
2Split layout
3Preview-only layout
TToggle table of contents
SToggle synchronized scrolling
FToggle fullscreen
DToggle light / dark theme

Screenshots

Right-click → Preview markdown on side, dual pane
Right-click → Preview markdown on side
Layout modes and draggable splitter
Layout modes + draggable splitter
Syntax highlighting across languages with copy buttons
Multi-language highlighting + copy
Mermaid diagrams
Mermaid diagrams
Fullscreen preview with table of contents
Fullscreen + table of contents

Try it

The repo ships sample documents for testing, including a feature stress file that exercises every renderer path.

python3 -m http.server 8765
# open http://localhost:8765/samples/stress.md, then right-click → Preview markdown on side