WYSIWYG Markdown Editor with Live Preview

Write Markdown in the view that fits your task. Use familiar visual formatting, edit the source directly, or compare source and rendered output side by side.

Four views: WYSIWYG, source, split, and preview-only modes.
Rich Markdown: tables, task lists, code, math, Mermaid diagrams, and music notation.
Browser based: no account or installation is required.

# What Markdown Can Do

Markdown makes formatting easier. [Playground link](/playground/), [Webpage link](/guide/).

> Playground won't save your change.

## What Specifically Can It Do?

- [x] Implement a simple to-do list
- [x] Common paragraph formats: normal paragraphs, six levels of headings, block quotes, lists, to-dos, code, tables, formulas, footnotes, dividers, images, etc.
- [x] Common inline formats: **bold**, *italic*, ~~strikethrough~~, [links🔗](/reference/cheatsheet/), 🤣emoji, inline formula $e^\pi$, inline code `a = 3`...
- [ ] ~~Get some fries at the dock~~

## Markdown Can Do More

- [x] Various charts, such as flowcharts, mind maps, Gantt charts, timelines, etc. Find it troublesome? Try [letting ChatGPT do it](/reference/chatgpt/).[^1]
- [x] Presentation，e.g. [Slidev](https://sli.dev/)
- [x] Music scores (generally not supported by Markdown applications)
- [x] This website, see the [Website Building](#building-a-website) section
- [ ] ~~Go to Mars~~

### Timeline

```mermaid
timeline
    title ChatGPT Development Timeline
    section Early Development
        November 30, 2022 : ChatGPT released, OpenAI
    section Rapid Growth
        January 2023 : More than 100 million users
    section Version Update
        March 14, 2023 : GPT-4 released, available to ChatGPT Plus users
```

### Flowchart

```mermaid
flowchart LR
  A([Leave work]) --> B{Cook tonight?}
  B -->|Yes| C[Buy groceries]
  B -->|No| D[Pick up dinner]
  C --> E[Head home]
  D --> E
  E --> F([Eat together])
```
### Music Score

```abc
X:1
T:Ode to Joy
C:Ludwig van Beethoven
M:4/4
L:1/4
K:C
"G"G3/2A/2 G E G | "D7"F3/2E/2 F D F | "G"G3G G A | B3/2A/2 G E G |
"D7"F3/2E/2 F E D | "G"G3G G A | B3/2A/2 G E G | "D7"F3/2E/2 F D F | "G"G3z ||

```

## More Things If You Are a Programmer

### HTML

- <u>Underline</u>
- iframe
- svg
- Create a button

### CSS

Markdown ultimately renders as HTML, and CSS can modify the layout of HTML elements. If your Markdown editing software has the corresponding configuration, you might be able to:

- Define CSS inline
- Customize CSS globally

### Building a Website

You can deploy this site by clicking this button:

[![Deploy With Vercel](/deploy-with-vercel.svg)](https://vercel.com/import/project?template=https://github.com/gantrol/markdown-can-do)

There are many ways to build websites based on Markdown. Personal research has mainly identified Vitepress and MDX as two options, both extending Markdown and allowing for code component insertion. Vitepress primarily supports Vue components, while MDX mainly supports React components.

Considering performance and maintenance stability, this site is built with Vitepress, and the site owner learned Vue overnight (~~in one hour~~).

## Want More?

You might want to check out the [reference materials](/reference/resource) or ask ChatGPT？

![ChatGPT](/chatgpt-badge.svg)

[^1]: Find it difficult? Actually, there's no need to memorize the syntax for various charts. The site owner used to rely on manuals, but now mainly consults ChatGPT.

How to use the online Markdown editor

Choose WYSIWYG for visual formatting or source mode to write Markdown syntax directly.
Use split view to compare the source with the rendered result.
Copy the finished Markdown before leaving or refreshing the page.

<h2>Learn and reference Markdown</h2>
<p>New to the format? Start with the <a href="/tutorial/">interactive Markdown tutorial</a>. For a quick lookup, open the <a href="/reference/cheatsheet/">Markdown cheat sheet</a>, then explore <a href="/showcase/">diagram and math examples</a>.</p>

<h2>Frequently asked questions</h2>
<details>
  <summary>Does the editor upload my document?</summary>
  <p>The editor is designed to process your text in the browser. It does not provide cloud storage, so copy your work before leaving the page.</p>
</details>
<details>
  <summary>What is the difference between WYSIWYG and source mode?</summary>
  <p>WYSIWYG shows familiar formatting controls, while source mode exposes the Markdown characters directly.</p>
</details>
<details>
  <summary>Can I use this editor on a phone?</summary>
  <p>Yes. The interface adapts to smaller screens, although a wider screen is more comfortable for split view.</p>
</details>