Drop file to import Markdown

1
Outcome Preview
Help Guide

Typography Formatting

Headings
Use hashtags (1 to 6) followed by a space to create section headings. More hashtags make the heading smaller.
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
Visual Outcome

Heading 1

Heading 2

Heading 3

Emphasis (Bold, Italic, Strikethrough)
Wrap text in asterisks or underscores to apply bold, italic, or strikethrough formatting.
**Bold Text** or __Bold Text__
*Italic Text* or _Italic Text_
***Bold and Italic***
~~Strikethrough~~
Visual Outcome

Bold Text or Bold Text

Italic Text or Italic Text

Bold and Italic

Strikethrough

Subscript & Superscript
Use HTML sub and sup tags to represent chemical formulas, math degrees, or notes.
Water is H<sub>2</sub>O.
Einstein's equation is E = mc<sub>0</sub><sup>2</sup>.
Visual Outcome
Water is H2O. Einstein's equation is E = mc02.
Keyboard Keys
Use HTML kbd tags to format keyboard hotkeys or shortcut indicators.
Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to export.
Visual Outcome
Press Ctrl + S to export.
HTML Styling (Color, Font & Typography)
Standard Markdown doesn't have native keywords to change text color, size, or fonts. You can embed inline HTML tags with CSS style attributes to achieve this.
<!-- Text Colors -->
This is <span style="color: #ef4444;">red</span> and <span style="color: #3b82f6;">blue</span> text.

<!-- Fonts & Typography -->
Use <span style="font-family: Georgia;">Serif font</span> or <span style="font-size: 1.2rem; font-weight: 700;">large bold text</span>.
Visual Outcome
This is red and blue text.
Use Serif font or large bold text.
Unordered List
Start lines with hyphens, asterisks, or plus signs followed by a space. Indent items to nest lists.
- Apples
- Oranges
  - Mandarins
- Bananas
Visual Outcome
  • Apples
  • Oranges
    • Mandarins
  • Bananas
Ordered List
Start lines with numbers followed by a period and a space. The browser handles chronological indexing automatically.
1. First item
2. Second item
3. Third item
Visual Outcome
  1. First item
  2. Second item
  3. Third item
Task List
Start lines with a hyphen, a space, and brackets containing either a space (for unchecked) or an 'x' (for checked).
- [x] Completed task
- [ ] Uncompleted task
Visual Outcome
Completed task
Uncompleted task
Inline Code
Wrap inline code snippets with a single backtick. Use backticks inside a sentence to show code.
Press \`Ctrl + S\` to save, or edit \`const x = 5;\`.
Visual Outcome
Press Ctrl + S to save, or edit const x = 5;.
Code Blocks
Wrap multi-line code blocks in triple backticks. Add the language name immediately after the first group of backticks for syntax highlighting.
\`\`\`javascript
const message = "Hello World!";
console.log(message);
\`\`\`
Visual Outcome
const message = "Hello World!";
console.log(message);
Blockquotes
Precede text lines with the greater-than symbol (>) followed by a space. Blockquotes can be nested by using multiple signs.
> This is a blockquote.
>> This is a nested quote.
Visual Outcome
This is a blockquote.
This is a nested quote.
Syntax Highlighting Languages
Append the language alias directly after the opening triple backticks to enable auto highlighting. Common languages: html, css, javascript, python, json, sql, bash, markdown.
\`\`\`python
def greet(name):
    return f"Hello, {name}!"
\`\`\`
Visual Outcome
def greet(name):
    return f"Hello, {name}!"
HTML Entities
Display literal Markdown characters or tags by writing their HTML entities. E.g. write &amp; for ampersand, &lt; for less-than, &gt; for greater-than.
Representing <div> block in text requires writing &lt;div&gt;.
Visual Outcome
Representing <div> block in text requires writing &lt;div&gt;.
Tables
Use pipes (|) to divide columns and hyphens (-) to make row borders. Use colons (:) inside the divider line to align column cells (left, center, or right).
| Item       | Qty | Price |
| :---       | :---: | ---: |
| Apple      |  12 | $1.20 |
| Orange     |   6 | $2.50 |
Visual Outcome
Item Qty Price
Apple 12 $1.20
Orange 6 $2.50
Horizontal Rules
Use three or more hyphens, asterisks, or underscores on a line by themselves to build a horizontal separator.
---
Visual Outcome
Escaping Characters
Prevent Markdown symbols from formatting by prefixing them with a backslash (\). This shows the literal symbol.
\\*This is raw asterisks text, not italicised\\*
\\\\ Renders a backslash
Visual Outcome
*This is raw asterisks text, not italicised* \ Renders a backslash
Footnotes
Create footnote markers using bracketed carats followed by an identifier. Declare the footnote reference at the bottom of the page.
Here is a claim[^1].

[^1]: This is the footnote citation details.
Visual Outcome
Here is a claim[1].
Collapsible Accordions
Use HTML <details> and <summary> tags to create a collapsible content section (accordion).
<details>
  <summary>Click to expand section</summary>
  Here is the hidden content that expands on click.
</details>
Visual Outcome
Click to expand section

Here is the hidden content that expands on click.
HTML copied to clipboard!