CSDN markdown editor

Markdown Editor

Hello ！ This is the first time you use Markdown Editor The welcome page shown . If you want to learn how to use Markdown Editor , You can read this article carefully , Get to know Markdown Basic grammar knowledge of .

New changes

We are right. Markdown The editor has some function expansion and syntax support , Except standard Markdown Editor function , We have added the following new features , Help you blog with it ：

1. New interface design , Will bring a new writing experience ;
2. Set your favorite code highlight style in the creative center ,Markdown Highlight the selected style in the code slice display To display ;
3. Added Picture drag and drop function , You can drag the local image to the editing area to display it directly ;
4. all-new KaTeX The mathematical formula grammar ;
5. Added support Gantt chart mermaid grammar ¹ function ;
6. Added Multi screen editing Markdown Article function ;
7. Added Focus writing mode 、 Preview Mode 、 Concise writing mode 、 Left and right area synchronous roller settings And so on , The function button is located between the editing area and the preview area ;
8. Added Checklist function .

Function shortcut

revoke ：Ctrl/Command + Z
redo ：Ctrl/Command + Y
In bold ：Ctrl/Command + B
Italics ：Ctrl/Command + I
title ：Ctrl/Command + Shift + H
Unordered list ：Ctrl/Command + Shift + U
Ordered list ：Ctrl/Command + Shift + O
Checklist ：Ctrl/Command + Shift + C
Insert code ：Ctrl/Command + Shift + K
Insert link ：Ctrl/Command + Shift + L
Insert a picture ：Ctrl/Command + Shift + G
lookup ：Ctrl/Command + F
Replace ：Ctrl/Command + G

Create a reasonable title , It's helpful for catalog generation

Direct input 1 Time #, And press space after , Will generate 1 Level title .
Input 2 Time #, And press space after , Will generate 2 Level title .
And so on , We support 6 Level title . Help to use TOC Generate a perfect directory after Syntax .

How to change the style of the text

Emphasis text Emphasis text

Bold text Bold text

Tag text

Delete text

Reference text

H₂O is It's liquid .

2¹⁰ The result is 1024.

Insert links and pictures

link : link.

picture :

Picture with size :

Centered picture :

A picture centered and dimensioned :

Of course , In order to make users more convenient , We've added image drag .

How to insert a beautiful piece of code

Go to Blog settings page , Choose a highlight style you like , Here's the same highlight Code chip .

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

Generate a list that suits you

• project
  • project
    • project

1. project 1
2. project 2
3. project 3

• Planning tasks
• To complete the task

Create a table

This is how a simple table is created ：

project	Value
The computer	$1600
mobile phone	$12
A catheter	$1

Set content center 、 be at the left side 、 be at the right

Use :---------: In the middle
Use :---------- be at the left side
Use ----------: be at the right

First column	Second column	The third column
Center first column of text	Second column text right	Third column text left

SmartyPants

SmartyPants take ASCII Punctuation character to “ intelligence ” Print punctuation HTML Entity . 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 .²

Annotation is also essential

Markdown Convert text to HTML.

KaTeX The mathematical formula

You can use rendering LaTeX Mathematical expression KaTeX:

Gamma Formula display $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ It's through Euler integral

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

You can find more information about LaTeX Mathematical expression here.

New Gantt chart features , Enrich your articles

• About Gantt Chart grammar , Reference resources here ,

UML Chart

have access to UML Chart rendering . Mermaid. For example, a sequence diagram generated below ：

This will produce a flowchart .:

• About Mermaid grammar , Reference resources here ,

FLowchart flow chart

We will still support flowchart Flow chart of ：

• About Flowchart flow chart grammar , Reference resources here .

Export and import

export

If you want to try this editor , You can edit this article at will . When you finish writing an article , Find... On the top toolbar Article export , Generate a .md Documents or .html File for local storage .

Import

If you want to load an article you've written .md file , In the upper toolbar, you can select the import function to import the file with the corresponding extension ,
Continue your work .

---

1. mermaid Syntax description ︎

2. Explanation of footnotes ︎