CSDN Markdown Editor Instructions for Use

Welcome to the Markdown editor

Hello! This is the welcome page displayed when you use the Markdown editor for the first time . If you want to learn how to use the Markdown editor, you can read this article carefully to learn about the basic syntax of Markdown.

new changes

We have made some functional expansion and syntax support for the Markdown editor. In addition to the standard Markdown editor functions, we have added the following new features to help you use it to write blogs:

1. The new interface design will bring a new writing experience;
2. Set your favorite code highlighting style in the creation center, and Markdown will display the code piece in the selected highlighting style ;
3. Added image drag and drop function, you can drag local images directly to the editing area for direct display;
4. Brand new KaTeX mathematical formula syntax;
5. Added mermaid syntax ¹ function that supports Gantt charts ;
6. Added the function of editing Markdown articles on multiple screens;
7. Added functions such as focus writing mode, preview mode, concise writing mode, left and right area synchronized wheel settings, etc. The function button is located between the editing area and the preview area;
8. Checklist functionality added .

Function shortcut keys

Undo: Ctrl/Command+ Z
Redo: Ctrl/Command+ Y
Bold: Ctrl/Command+ B
Italic: Ctrl/Command+ I
Title: Ctrl/Command+ Shift+ H
Unordered list: Ctrl/Command+ Shift+ U
Ordered list: Ctrl/Command+ Shift+ O
Checklist: + +Insert code : + Ctrl/Command+ Insert link : + + Insert image: + + Find: + Replace: +ShiftC
Ctrl/CommandShiftK
Ctrl/CommandShiftL
Ctrl/CommandShiftG
Ctrl/CommandF
Ctrl/CommandG

Properly create titles to help create a table of contents

Enter it directly once #and press it, spaceand a level 1 title will be generated.
After entering it twice #and pressing it space, a level 2 title will be generated.
By analogy, we support level 6 titles. TOCHelps to generate a perfect table of contents using syntax.

How to change the style of text

Emphasis on text Emphasis on text

bold text bold text

mark text

Delete text

quoted text

H ₂ O is a liquid.

The result of 2 ¹⁰ operation is 1024.

Insert links and images

Link: link .

picture:

Pictures with dimensions:

Centered image:

Centered and sized image:

Of course, in order to make it more convenient for users, we have added the image drag and drop function.

How to insert a beautiful piece of code

Go to the blog settings page and choose a code fragment highlighting style you like. The same highlighting style is shown below 代码片.

// An highlighted block
var foo = 'bar';

Generate a list that works for you

• project
  • project
    • project

1. Project 1
2. Project 2
3. Project 3

• Scheduled Tasks
• mission accomplished

Create a table

A simple table is created like this:

project	Value
computer	$1600
cell phone	$12
catheter	$1

Set content to center, left, or right

Use :---------:center
. Use :----------left.
Use ----------:right.

first row	The second column	third column
The first column of text is centered	The second column of text is on the right	The third column of text is on the left

SmartyPants

SmartyPants converts ASCII punctuation characters into "smart" typographic punctuation HTML entities. For example:

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

Create a custom list

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

How to create a footnote

A text with footnotes. ²

Comments are also essential

Markdown converts text to HTML .

KaTeX math formula

You can render LaTeX mathematical expressions using KaTeX :

Gamma infrastructure $C\left(n\right)=(n-1)!\forall n\in N$ is the integral via Euler

$$C\left(z\right)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

You can find more information about LaTeX mathematical expressions here .

New Gantt chart function to enrich your articles

• Regarding Gantt chart syntax, please refer here ,

UML diagram

UML diagrams can be used for rendering. Mermaid . For example, a sequence diagram generated below:

This will produce a flowchart. :

• Regarding Mermaid syntax, refer here ,

FLowchart flowchart

We will still support flowchart flow charts:

• Regarding Flowchart flowchart syntax, refer here .

Export and import

Export

If you want to try using this editor, you can edit whatever you want in this article. When you finish writing an article, find the article export in the upper toolbar and generate a .md file or .html file for local saving.

import

If you want to load a .md file you have written, you can select the import function on the upper toolbar to import the file with the corresponding extension and
continue your creation.

---

1. mermaid syntax description↩︎

2. Explanation of footnote↩︎