Tutorial: CSDN-markdown editor

Welcome to use the Markdown editor to write a blog

This Markdown editor is modified from StackEdit , and blogging with it will bring a brand new experience:

  • Markdown and extended Markdown concise syntax
  • Code block highlight
  • Picture link and picture upload
  • LaTex mathematical formula
  • UML sequence diagrams and flowcharts
  • Blogging offline
  • Import and export Markdown files
  • Rich shortcut keys

hot key

  • Bold Ctrl + B
  • Italic Ctrl + I
  • Quote Ctrl + Q
  • Insert link Ctrl + L
  • Insert code Ctrl + K
  • Insert picture Ctrl + G
  • Boost title Ctrl + H
  • Ordered list Ctrl + O
  • Unordered list Ctrl + U
  • Horizontal line Ctrl + R
  • Revoke Ctrl + Z
  • Redo Ctrl + Y

Markdown and extension

Markdown is a lightweight markup language that allows people to write documents in a plain text format that is easy to read and write, and then convert them into rich HTML pages. —— [Wikipedia]

Use simple symbols to identify different headings, mark some text as bold or italic , create a link, etc., refer to the help for detailed grammar? .

This editor supports Markdown Extra and has expanded many useful functions. Please refer to Github for details .

form

Markdown Extra table syntax:

project price
Computer $1600
Phone $12
Pipe $1

You can use a colon to define the alignment:

project price Quantity
Computer 1600 yuan 5
Phone 12 yuan 12
Pipe 1 Yuan 234

Definition list

Markdown Extra  definition list syntax: Item 1 Item 2
Definition A
Definition B
Item 3
Definition C

Definition D

Define D content

Code block

The code block syntax follows the standard markdown code, for example:

@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''

footnote

Generate a footnote 1 .

table of Contents

Use [TOC]to generate the table of contents:

Mathematical formula

Use MathJax to render LaTex mathematical formulas, see math.stackexchange.com for details .

  • In-line formula, the mathematical formula is: Γ ( n ) = ( n - 1 ) !nN Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N <script type="math/tex" id="MathJax-Element-1">\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N</script>。
  • Block-level formula:

x=b±b24ac2 a x = − b ± b 2 − 4 a c 2 a
<script type="math/tex; mode=display" id="MathJax-Element-2"> x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} </script>

More LaTex syntax please refer to here .

UML graphics:

You can render sequence diagrams:

Created with Raphaël 2.1.2 张三 张三 李四 李四 嘿,小四儿, 写博客了没? 李四愣了一下,说: 忙得吐血,哪有时间写。

Or flow chart:

Created with Raphaël 2.1.2 开始 我的操作 确认? 结束 yes no
  • About Sequence FIG syntax, reference here ,
  • About flowchart syntax, reference here .

Blogging offline

Even if users don’t have a network, they can write blogs offline through this editor (just enter write.blog.csdn.net/mdeditor in the browser they have used . Markdown editor uses the browser to store offline The content is saved locally.

When the user writes a blog, the content is saved in the browser cache in real time, and the content will not be lost when the user closes the browser or other abnormal situations. When the user opens the browser again, the unpublished content that the user was editing last time will be displayed.

After the blog is published, the local cache will be deleted. 

User can choose Save the blog you are writing to the server draft box, even if you change the browser or clear the cache, the content will not be lost.

Note: Although browser storage is relatively reliable most of the time, for your data security, please be sure to publish it in time or save it to the server draft box after connecting to the Internet .

Browser compatible

  1. Currently, this editor has the most complete support for Chrome browser. I suggest you use a newer version of Chrome.
  2. Not supported under IE9
  3. IE9, 10, 11 have the following problems
    1. Does not support offline functionality
    2. IE9 does not support file import and export
    3. IE10 does not support drag and drop file import


  1. Here is the footnote of content .

Guess you like

Origin blog.csdn.net/qq_34571940/article/details/79551252