CSDN editor update

new changes

We have made some functional extensions 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 write blogs with it:

1. The new interface design will bring a new writing experience;
2. Set your favorite code highlighting style in the authoring center, and Markdown will display the selected highlighting style in the code snippet ;
3. Added image dragging function, you can directly drag and drop local images to the editing area for direct display;
4. Brand new KaTeX math formula syntax;
5. Added the 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, and left and right area synchronization wheel settings . The function button is located in the middle of the editing area and the preview area;
8. Added checklist functionality.

Function shortcut key

Ctrl/Command+ Undo: + 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: + +Insert Code: + + Ctrl/CommandInsert Link : + + Insert Image: + + Find: + Replace: +ShiftC
Ctrl/CommandShiftK
Ctrl/CommandShiftL
Ctrl/CommandShiftG
Ctrl/CommandF
Ctrl/CommandG

Reasonable creation of the title is helpful for the generation of the catalog

Enter 1 time directly #and press it space, and a level 1 title will be generated.
After entering 2 times #and pressing it space, a 2-level title will be generated.
By analogy, we support 6 levels of headings. TOCHelps to generate a perfect table of contents after using syntax.

How to change the style of text

emphasized text emphasized text

bold text bold text

markup text

delete text

quoted text

H2O is a liquid _.

2 ¹⁰ operation result is 1024.

Insert links and images

link: link .

picture:

Picture with dimensions:

Centered image:

Centered and sized images:

Of course, in order to make it more convenient for users, we have added the function of dragging and dropping pictures.

How to insert a nice piece of code

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

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

Generate a list that works for you

• project
  • project
    • project

1. item 1
2. item 2
3. item 3

• Scheduled Tasks
• mission accomplished

create a form

A simple table is created like this:

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

Set the content to be centered, left, and right

Use :---------:Center
Use :----------Left
Use ----------:Right

first row	The second column	third column
Center the first column of text	The second column of text is right-aligned	Third column text left

SmartyPants

SmartyPants converts ASCII punctuation characters into "smart" typographical 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. ²

Annotations are also essential

Markdown converts text to HTML .

KaTeX math formula

You can render LaTeX math expressions using KaTeX :

Gamma infrastructure $C\left(n\right)=(n-1)!\forall n\in N$ is the integral by 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 feature to enrich your articles

• For Gantt chart syntax, refer to here ,

UML diagrams

Can be rendered using UML diagrams. Mermaid . For example, a sequence diagram generated below:

This will generate a flowchart. :

• For Mermaid syntax, refer to here ,

FLowchart flow chart

We will still support the flowchart of flowchart:

• For Flowchart flowchart syntax, refer to here .

Export and import

export

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

import

If you want to load an .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 explanation ↩︎

2. Explanation of footnotes↩︎