About Markdown Editor

Markdown language is adopted in editing questions. To simplify the work, the Markdown Editor (MDE) is used to provide an interface for previewing the resulting text and automatic styling.

Live demo

Basic syntax of Markdown

Markdown is a clever language that is relatively readable to humans compared to code while allowing styling to text.

An example is always the best way to explain a thing:

md

**Hello**, welcome to *Markdown*!

# Heading 1

## Heading 2

### Heading 3
                    
html

<p>
    <strong>Hello</strong>, welcome to <em>Markdown</em>!
</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
                    
result

Hello, welcome to Markdown!

Heading 1

Heading 2

Heading 3

For the basic syntax of the Markdown language, you may check this. It will also be explained in the following section.

Note that the Markdown language used on this website has been slightly modified.

Font

The main font options available in the MDE include:

# Option Icon Shortcut Syntax Example
1 Bold Ctrl-B
**text**
md
**bold**
result
bold
2 Italic Ctrl-I
*text*
md
*italic*
result
italic
3 Underline Ctrl-U
<u>text</u>
md
<u>underline</u>
result
underline
4 Strikethrough /
~~text~~
md
~~strikethrough~~
result
strikethrough
5 Subscript Ctrl-Shift-_
<sub>text</sub>
md
H<sub>2</sub>O
result
H2O
6 Superscript Ctrl-Shift-+
<sup>text</sup>
md
x<sup>2</sup>
result
x2

Notes:

  1. The options above are ordered from left to right in the toolbar.
  2. To bold and italic the text at the same time, use ***text***.
  3. An underscore (_) can be used to replace an asterisk (*), e.g. __text__.
  4. Fun fact: Underline, subscript and superscript are not supported in the Markdown language. The syntax used is in fact the HTML code.

Paragraph

# Option Icon Shortcut Syntax Example
7~9 Headings Ctrl-Alt-n
# text
md
### Heading 3
result

Heading 3

10 Unordered list /
* text
md
* First item
* Second item
result
  • First item
  • Second item
11 Ordered list /
1. text
A. text
a. text
I. text
i. text
md
1. First item
2. Second item
result
  1. First item
  2. Second item

Notes:

  1. The options above are ordered from left to right in the toolbar.
  2. A plus (+) or minus (-) sign is also allowed to indicate the start of an unordered list.
  3. Use tab to increase indent and add level to the list.

Demo of unordered and ordered lists:

md

 * First item of unordered list 1
 * Second item of unordered list 1
	 * First item of unordered list 2
	 * Second item
of unordered list 2
with multiple lines
 1. First item of numbered list
 A. First item of lettered list
                    
html

<ul>
    <li>
        First item of unordered list 1
    </li>
    <li>
        Second item of unordered list 1
        <ul>
            <li>First item of unordered list 2</li>
            <li>Second item<br>of unordered list 2<br>with multiple lines</li>
        </ul>
    </li>
</ul>
<ol type="1">
    <li>First item of numbered list</li>
</ol>
<ol type="A">
    <li>First item of lettered list</li>
</ol>
                    
result
  • First item of unordered list 1
  • Second item of unordered list 1
    • First item of unordered list 2
    • Second item
      of unordered list 2
      with multiple lines
  1. First item of numbered list
  1. First item of lettered list

Note the whitespaces before each line.

Miscellaneous

# Option Icon Shortcut Syntax Remarks
12 Insert image /
![alt](src)

An image can be inserted by clicking the toolbar button, dragging and dropping, or pasting from the clipboard.

Clicking the button, you will be required to select an image from your local drive.

Only images in png and jpg(jpeg) format are accepted.

You may be required to resize the image if the image exceeds the limit of 500×500.

After successfully uploading the image, the Markdown statement and the image file name will be automatically generated.

Never change the file name in the Markdown code!

13 Insert table /

| [1, 1] | [1, 2] |
| ------ | ------ |
| [2, 1] | [2, 2] |
                    

Check here for the syntax of tables.

14 KaTeX /
$expression$

Check here for the syntax of KaTeX.

Quick example:

KaTeX
$x = \frac{-b\pm\sqrt{b^2-4ac}}{2a}$
RESULT
15 Undo Ctrl-Z
/

Undo last change

16 Redo Ctrl-Y
/

Redo last change