Read My MD
Read My MD is a focused VS Code preview for Markdown documentation. It renders CommonMark and GitHub Flavored Markdown with themed Mermaid diagrams and data-rich charts, syntax-highlighted code blocks, front matter, callouts, live refresh, printing, and PDF export.
What's new in 0.0.14
- Diagrams match your theme. Every Mermaid diagram takes its colors from your VS Code theme, in light, dark, and high contrast, and updates when you switch themes. Chart series use a palette chosen to stay distinguishable for color-blind readers.
- Charts tell you more. Pie, XY, sankey, quadrant, radar, and Gantt charts show headline facts under the chart. Hover pie slices, points on XY charts, and sankey flows for exact values, or choose
Data to read a chart's numbers as a table. XY bar charts label each bar with its value.
- Large diagrams stay readable. Wide and tall diagrams open at a readable size instead of shrinking to tiny text. Pan to see the rest, or choose
Fit to see the whole diagram.
- Print and PDF match the preview. Exports use the same diagram colors and chart facts.
Features
Markdown
- CommonMark syntax for headings, block quotes, lists, links, images, code spans, fenced code blocks, HTML blocks, line breaks, and reference links
- GitHub Flavored Markdown tables, task list items, strikethrough, and automatic links
- Footnotes and definition lists
- YAML front matter display
- Admonition blocks for
info, tip, warning, and danger, plus GitHub-style [!NOTE], [!TIP], [!IMPORTANT], [!WARNING], and [!CAUTION] callouts
- Syntax highlighting for fenced code blocks, with a language label and copy button
Diagrams and charts
- Mermaid diagrams from fenced
mermaid code blocks, including flowcharts, sequence, class, state, entity relationship, Gantt, pie, XY, quadrant, mind map, timeline, user journey, Git graph, sankey, radar, treemap, kanban, and block diagrams
- Diagram colors that follow your VS Code theme, with a chart palette checked for color-blind readers
- Headline facts under charts, listed below
- Exact values on hover for pie, XY, and sankey charts, with the hovered data highlighted
- A
Data table view for charts with data
- Inline zoom, pan, and
Fit controls; wide and tall diagrams open at a readable size
| Chart |
Facts shown under the chart |
| Pie |
Total, largest and smallest slice, share of the top two |
| XY |
Change from first to last value and the peak, for each series |
| Sankey |
Number of flows, total input, largest flow |
| Quadrant |
Points in each quadrant |
| Radar |
Average for each curve, widest gap between two curves |
| Gantt |
Tasks done, in progress, critical, and milestones |
Reading and export
- Colors that follow your VS Code theme, including high contrast themes
- Responsive headings outline with active-section tracking
- Click-to-enlarge images with zoom and pan controls
- Live preview refresh while editing
- Print and PDF export from the preview
Usage
- Open a Markdown file in VS Code.
- Run
Read My MD: Open Preview from the Command Palette, editor title menu, or Markdown file context menu.
- Keep editing with the preview open. The preview refreshes automatically as the document changes.
- Use the document outline to jump between sections.
- Zoom and pan Mermaid diagrams inline, or choose
Fit to see a large diagram whole. Hover a chart for exact values, or choose Data to see its numbers as a table. Click images to enlarge them.
- Right-click inside the preview and choose
Print or Export as PDF.
Print and Export as PDF open a temporary browser-rendered version of the current preview and trigger the system print dialog. To create a PDF, choose the dialog's Save as PDF destination.
Diagram controls
| Action |
Mouse or trackpad |
Keyboard |
| Zoom |
Ctrl/⌘ + scroll, or the + and − buttons |
+ and - |
| Pan |
Drag, or Shift + scroll |
Arrow keys |
| See the whole diagram |
Fit |
F |
| Back to the readable size |
Click the zoom percentage |
0 |
| Zoom in on a spot |
Double-click |
|
Keyboard shortcuts work when the diagram has focus.
Commands
| Command |
Description |
Read My MD: Open Preview |
Opens a live preview for the active Markdown file. |
Read My MD: Refresh Preview |
Refreshes the active Markdown preview. |
Read My MD: Print |
Opens the preview in a print-ready browser view. |
Read My MD: Export as PDF |
Opens the print dialog for PDF export. |
Examples
Mermaid diagrams render from fenced code blocks:
flowchart TD
Start --> Validate
Validate -->|ok| Render
Validate -->|error| Retry
Charts get value labels, facts, and hover readouts. This one shows each month's installs, the change from January to August, and the peak:
xychart-beta
title "Installs per month"
x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug]
y-axis "Installs" 0 --> 1200
bar [180, 260, 340, 410, 520, 690, 820, 1040]
line [150, 240, 300, 380, 470, 610, 760, 930]
Admonitions use container blocks:
::: warning Build note
This preview sanitizes raw HTML before rendering it in the webview.
:::
License
Read My MD is free to use under a proprietary license. It is not open source.
You may install and use the extension, but you may not redistribute, resell, or publish modified versions except where the license explicitly allows it.
See LICENSE.txt for the full terms.
| |
