User Guide · Release 2.0

Welcome to MarkChrome 2.0

MarkChrome is a two-pane Markdown workspace. You type on the left and see a beautiful, formatted result on the right — instantly. Version 2.0 adds diagrams, math, an outline sidebar, find & replace, Zen mode, a validator and three languages.

No account needed Works in your browser Saves to your computer
Getting Started

What is MarkChrome?

MarkChrome is a writing app for creating clean, well-formatted documents — notes, reports, README files, blog posts or journals.

It uses a simple text format called Markdown. You add formatting (headings, bold, lists) with plain characters like #, ** and -. Your file stays small, portable and readable anywhere.

ℹ️
You don't need to know Markdown to use MarkChrome. Click any toolbar button to insert the formatting for you, and learn the symbols as you go.
Getting Started

What's New in 2.0

Release 2.0 is a major upgrade. Here is everything that is new:

FeatureWhat it does
📊 Mermaid diagramsWrite flowcharts and sequence diagrams as text inside a ```mermaid block.
∑ KaTeX mathBeautiful formulas with $…$ (inline) and $$…$$ (block).
🎨 Code highlightingColoured syntax for many languages, plus a Copy button on every code block.
☰ Outline sidebarA clickable table of contents built from your headings.
🔎 Find & ReplaceFind Next, Replace and Replace All in a slim bar (Ctrl+F / Ctrl+H).
🧘 Zen modeHides all menus so you can focus. Esc to exit.
✅ ValidatorChecks your Markdown for common mistakes in one click.
📋 Copy Rich TextCopies your formatted document (diagrams included) so you can paste into Word, Docs or email.
📋 YAML front matterMetadata blocks at the top (---) display neatly — handy for Hugo, Jekyll and MkDocs.
🖼 Paste & dropPaste a screenshot directly, or drag a .md / .txt file onto the window to open it.
🌐 3 languagesEnglish, Español and اردو (with right-to-left layout).
🌓 High-contrast themeA third theme for accessibility, next to dark and light.
⚡ ShortcodesType //date or //table + Space for instant snippets.
⚠️
Changed in 2.0: the right-hand preview is now read-only (it is for viewing). All typing happens in the left Markdown pane, which makes the result more reliable and the file always clean Markdown.
Getting Started

The Interface

The app has these main areas:

☰ Outline H1 B I 🔗 Link ⊞ Table 🌓 Theme Zen New Open Save
① Markdown Source
# My Heading
**Bold** and *italic*
- Item one
- Item two
② Rendered Preview
My Heading
Bold and italic
• Item one
• Item two

① Menu & Toolbar

The top row has Zen, Validate, New, Open, Save, Save As…, Copy Rich Text, Export HTML, Export PDF, Help and the language picker. The formatting row below inserts Markdown for you.

② Markdown Source (left pane)

This is where you type. Drag a file onto it, or paste text and screenshots.

③ Rendered Preview (right pane)

Shows the finished document live — with diagrams, math and highlighted code. Scrolling stays in sync with the left pane.

④ Outline sidebar & Status bar

The ☰ Outline button opens a list of your headings. The bottom bar shows line, word and character counts and your cursor position.

Getting Started

Writing Your First Document

  • 1
    Click New to start with a blank page. If you have unsaved changes, the app asks first.
  • 2
    Click inside the left pane and type. The right pane updates as you write.
  • 3
    Use the toolbar buttons to add headings, bold text, lists, tables, links or images. Place your cursor first, then click.
  • 4
    Press Ctrl + S to save. The first time, you choose where to save it on your computer.
✅
A small dot beside the filename shows you have unsaved changes. It disappears once you save.
Using the Editor

Toolbar Buttons

Every button inserts formatting at your cursor. If text is selected, it wraps that text.

ButtonWhat it does
H1 · H2 · H3Headings, from largest to smallest
BBold text
IItalic text
SStrikethrough
★Highlight (==text==)
🔗 LinkOpens a box for the link text and web address
🖼 ImageOpens a box for the image description and address
• ListBulleted list
1. ListNumbered list
☑ TaskChecklist item
⊞ TableInserts a 3-column table to fill in
" QuoteBlockquote
— HRHorizontal line
`CodeInline code
``` BlockCode block (JavaScript by default — change the word after the backticks)
🌓 ThemeCycles through the three themes
Using the Editor

Markdown Cheat Sheet

Prefer typing to clicking? Type these directly in the left pane.

# Heading 1
Heading 1
**bold text**
bold text
*italic text*
italic text
~~strikethrough~~
strikethrough
==highlight==
highlight
- Bullet item
• Bullet item
1. Numbered item
1. Numbered item
- [x] Done task
☑ Done task
[Link text](https://…)
Link text
![Alt text](image-url)
An image
> Quote
Quote
---
a horizontal line
`code`
code
$E=mc^2$
Inline math
Text[^1]
Footnote marker
Using the Editor

Keyboard Shortcuts & Shortcodes

Shortcuts work when the left (Markdown) pane is active.

CtrlS
Save the file
CtrlB
Bold
CtrlI
Italic
CtrlK
Insert a link
CtrlF
Find & Replace bar
CtrlH
Find & Replace bar
Tab
Indent (inserts 4 spaces)
Esc
Exit Zen mode
💡
On a Mac, use ⌘ instead of Ctrl.

Shortcodes

Type one of these and press Space:

Type thisYou get
//dateThe current date and time, in italics
//tableA ready-made 2-column table
Using the Editor

Working with Tables

Creating a table

Click ⊞ Table (or type //table and Space). You get this:

| Header 1 | Header 2 | Header 3 |
| :------- | :------: | -------: |
| Cell 1   | Cell 2   | Cell 3   |

Editing

Click in the left pane and change the text between the | bars. The preview table updates instantly.

Adding rows and columns

To add a row, start a new line and type another row of | cells. To add a column, add a | cell to every row (including the header and the dashed line).

Aligning columns

On the dashed line: :--- left, :---: centre, ---: right.

Deleting

Select the table lines in the left pane and press Delete.

ℹ️
Every row must start with a |. The Validator will warn you if one doesn't.
Power Features

Diagrams & MathNew

Mermaid diagrams

Insert a code block and write mermaid after the backticks:

```mermaid
graph TD
    A[Write Markdown] --> B[Live Preview]
    B --> C[Export PDF]
```

The preview turns it into a flowchart. Sequence diagrams, and other Mermaid types, work too.

Math formulas (KaTeX)

Inline: $E = mc^2$. Whole-line block:

$$
\int_0^1 x^2 \, dx = \frac{1}{3}
$$

Code highlighting

Put the language name after the opening backticks (for example ```python or ```javascript). Hover a code block in the preview to see its Copy button.

ℹ️
Diagrams, math and highlighting load from the internet, so you need to be online when you open the app.
Power Features

Markdown ValidatorNew

Click Validate to scan your document. It looks for:

  • 1
    Code blocks that were opened with ``` but never closed.
  • 2
    A lone * that could break italic formatting.
  • 3
    Table rows that don't start with |, with the line number shown.
✅
Run Validate before you export or publish a README — it takes one second.
Power Features

Themes & LanguagesNew

🌓 Themes

Click Theme to cycle through three looks: the default, a dark preview, and a high-contrast mode (strong yellow-on-black) for easier reading.

🌐 Languages

Use the language picker in the top bar to switch the interface between English, Español and اردو. Urdu switches the layout to right-to-left.

YAML front matter

If your file starts with a block like this, MarkChrome shows it as a tidy metadata box:

---
title: My Post
date: 2026-10-23
tags: [notes, ideas]
---
Files

Open, Save & Export

New document

Click New. You'll be asked first if there are unsaved changes.

Opening a file

Click Open and choose a .md or .txt file — or simply drag the file onto the window.

Saving

Click Save or press Ctrl + S. The first time you choose a location; after that it saves to the same file. Save As… makes a copy under a new name.

Export HTML

Creates one standalone web page you can open anywhere or send to others.

Export PDF

Creates a PDF of your formatted preview. (You can also press Ctrl + P to print.)

Copy Rich Text

Copies the formatted document — diagrams included — to your clipboard. Paste it into Word, Google Docs or an email and the formatting stays.

Pasting screenshots

Copy a screenshot and paste (Ctrl+V) in the left pane. It is embedded in your document.

ℹ️
Files are saved as plain .md Markdown text, which opens in any text editor and works with GitHub, blogs and note apps. Firefox and Safari don't support direct overwrite-saving, so they download a new copy each time.
Help

Common Questions

Is my writing uploaded anywhere? ▼
No. Everything stays in your browser. MarkChrome has no server and no account. Only the supporting libraries (diagrams, math, PDF) are downloaded from public CDNs.
I closed the tab by accident. Is my work lost? ▼
Probably not. MarkChrome caches your draft every 3 seconds. Reopen the app and your last draft is restored. Saving to a file is still the safest option.
Can I type in the right-hand preview? ▼
Not in 2.0. The preview is read-only. Type in the left pane — the preview updates as you type.
My diagram, math or PDF export isn't working. ▼
These need an internet connection to load their libraries. Check your connection and refresh. If your network blocks cdn.jsdelivr.net or cdnjs.cloudflare.com, they won't load.
Why does the Validate button say there's an error? ▼
It points to a likely mistake: an unclosed code block, a lone *, or a table row missing its leading |. Fix it in the left pane and validate again.
How do I undo? ▼
Press Ctrl + Z in the left pane (⌘+Z on Mac).
Does it work on a phone? ▼
Yes — the layout adapts to small screens, and Zen mode has an Exit button for touch devices. A desktop browser gives the best writing experience.
How do I report a bug? ▼
Email aatayyab@yahoo.com with your browser, operating system and what you were doing.
Help

Tips & Tricks

Select text before clicking toolbar buttons

Select a word, then click B and it is wrapped in bold. With nothing selected, a placeholder is inserted for you to replace.

Watch the status bar

Line, word and character counts update live at the bottom.

Use the Outline for long documents

Open ☰ Outline and jump between sections instead of scrolling.

Validate, then export

A quick Validate before Export PDF or Export HTML catches formatting slips.

Back up important files

Keep your .md files in a synced folder, or in a Git repository on GitHub.