Examples of using CSDN-markdown editor

Welcome to Markdown editor

Hello there! This is your first time using the welcome page displayed by the Markdown editor . 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 change

We have carried out some functional expansion and grammatical support for the Markdown editor. In addition to the standard Markdown editor functions, we have added the following new functions to help you use it to blog:

1. The new interface design will bring a new writing experience;
2. Set your favorite code highlighting style in the creation center, Markdown will display the selected highlighting style of the code slice ;
3. Adds picture drag and drop feature, you can directly drag and drop local images directly into the editing area display;
4. New KaTeX mathematical formula grammar;
5. Added support for mermaid grammar ¹ function of Gantt chart ;
6. Increased multi-screen editing Markdown article features;
7. Increased focus writing mode, a preview mode, simple writing mode, the left and right area of the synchronous roller set functions, function buttons in the middle of the editing area and a preview area;
8. Increase the checklist function.

Function shortcut

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
Check list: Ctrl/Command+ Shift+ C
Insert code: Ctrl/Command+ Shift+ K
Insert link: Ctrl/Command+ Shift+ L
Insert picture: Ctrl/Command+ Shift+G

Reasonable creation of headings is helpful for the creation of the catalog

Enter directly once #and press spaceit to generate a level 1 heading.
Enter it twice #and press spaceit to generate a level 2 heading.
By analogy, we support level 6 headings. It helps to TOCgenerate a perfect table of contents after using the syntax.

How to change the style of text

Emphasized text emphasized text

Bold text bold text

Markup text

Delete text

Quoted text

H ₂ O is liquid.

The result of the 2 ¹⁰ operation is 1024.

Insert link and image

Link: link .

image:

Picture with dimensions:

Centered picture:

Centered and dimensioned pictures:

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, choose a code piece highlighting style you like, the same highlighting is shown below 代码片.

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

Generate a list that suits you

• project
  • project
    • project

1. Item 1
2. Item 2
3. Item 3

• Scheduled Tasks
• mission accomplished

Create a table

A simple table is created like this:

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

Setting content is centered, left, right

Use :---------:centered
use :----------left
use use ----------:right

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

SmartyPants

SmartyPants converts ASCII punctuation characters into "smart" printed punctuation HTML entities. E.g:

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 use KaTeX to render LaTeX mathematical expressions :

The Gamma formula shows $\Gamma \left(n\right)=(n-1)!\forall n\in N$ is through Euler integral

$$\Gamma \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

• About Gantt syntax, reference here ,

UML diagram

You can use UML diagrams for rendering. Mermaid . For example, a sequence diagram produced as follows::

This will produce a flowchart. :

• About Mermaid syntax, reference here ,

Flowchart flow chart

We will still support the flow chart of flowchart:

• About Flowchart flowchart syntax, reference here .

Export and import

Export

If you want to try this editor, you can edit this article at will. When you have finished writing an article, found in the toolbar at the top articles exported , generating a .md file or .html file is stored locally.

Import

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

---

1. Mermaid syntax description↩︎

2. Explanation of footnotes ↩︎