Introduction to the use and development of the Markdown editor

Posted Jun 15, 202010 min read

When the department is sharing technology, it simply sorts out the information in hand

1 what is it

1.1 Markdown is a lightweight markup language

Markdown is a lightweight markup language founded by John Gruber(English:John
Gruber). It allows people to "write documents in plain text that is easy to read and write, and then convert them into valid XHTML(or HTML) documents."
Wikipedia

1.2 Write documents in plain text(easy to read, easy to write, easy to change)

Markdown is a lightweight markup language. It writes documents in plain text form(easy to read, easy to write, easy to change), and finally publishes in HTML format.
Markdown can also be understood as a tool that converts languages written in MARKDOWN syntax into HTML content.

1.3 "Easy-to-read, easy-to-write plain text format, and optionally converted into effective XHTML"

John Gruber created the Markdown language in 2004, and a large part of the grammar is in collaboration with Aaron Swartz. The purpose of this language is to hope everyone can use

Easy-to-read, easy-to-write plain text format, and optionally converted into effective XHTML(or HTML).

The most important design is readability, which means that the language should be able to be read literally without being marked by some formatting instructions(such as RTF and HTML). Therefore, it is the current practice of e-mail markup format.

2 why

2.1 It is easy to read(it looks comfortable), easy to write(simple syntax), easy to change plain text

When using editing software, such as Word, I often typeset while writing, often entangled in why there is no such font, how the line height is wrong, and so on.

But for writing, you are doing a kind of "creation", you need a kind of thinking coherence, rather than let you write a thesis with format specification.

Compared to the "what you see is what you get" in Word type editors, Markdown files themselves are plain text, and there is no format, but Markdown syntax symbols can provide more accurate HTML type format control and are not as difficult to write as HTML.

We click the mouse in word to achieve the purpose of bolding, slanting, and increasing the font, and it is replaced by the corresponding special symbol in Markdown. Markdown is used to liberate the mouse, and you can type very beautiful texts, blogs, etc. using only the keyboard

  • No time-consuming typesetting like HTML, easy to read
  • Let people focus on input rather than format, easy to write
  • Simple grammar, improve writing efficiency, easy to change

2.2 Compatible with HTML, can be converted to HTML format for publishing

Markdown is a markup language, HTML is also a markup sentence, should Markdown replace HTML? The answer is NO. Markdown's design philosophy is to make documents easier to read, write, and modify. HTML is the publishing format, and Markdown is the writing format. Markdown will eventually be converted to HTML format and displayed on the web page.

In fact, the browser does not recognize Markdown's syntax, but many blogs, wiki platforms, and github have built-in Markdown editors. The editor will first convert the Markdown text into HTML formatted web pages, and then give the HTML web pages to the browser to display . In addition to the built-in editors mentioned above, there are many writing tools that can parse Markdown grammar. These tools generally provide browser preview and export to HTML or PDF files.

Markdown's syntax is defined by some symbols, which are mixed in the text and used to control how the text is displayed. For example, two asterisks can make text bold bold, these two asterisks become bold tags in HTML after being processed by the Markdown editor.

2.3 Cross-platform use

Online MarkDown editor:

  • StackEdit
  • Mahua
  • Dillinger

Win platform:

  • Atom
  • MarkDownPad
  • Sublime Text 2
  • MDEditor

Linux platform:

  • ReText
  • Sublime Text 2

Of course, on Win and Linux, Vim and Emacs are artifact-level editing software, of course support

Mac platform:

  • Mou
  • Sublime Text 2

Many such software in Mac.

MarkDown For Chrome plugin

2.4 More and more websites support Markdown

At present, many website blogs support writing in Markdown format, and you will see a README.MD project description file under the project on Github.

  • GitHub
  • Stack Overflow
  • Reddit
  • Brief Book
  • Know almost
  • YouDao Cloud Note
  • Blog Park
  • CSDN
  • VS 2017
  • and many more

3 What to do

Markdown's grammar requires an editor to implement, so the editor can add or modify the meaning of a grammar according to its own needs. Therefore, basically all editors parse Markdown grammar in a slightly different way, but they can be roughly divided into three categories:

  1. Classic Markdown:The most basic Markdown syntax, supported by all editors
  2. Extra Markdown:Extended Markdown syntax, adding elements such as tables, may not all be supported
  3. Github Markdown:Markdown syntax used by the github document, including all the contents of Extra Markdown, and also added code highlighting, emoji expressions and other syntax, currently many blog platforms(cnblogs, csdn) support this syntax

3.1 Markdown basic tags

Markdown syntax is mainly divided into the following parts:
Title, Paragraph, Block Quote, Code Block, Emphasis, List, Division Line, Link, picture, backslash\.

3.1.1 Title

Two forms:

  1. Use = and - to mark the first and second titles.
    First level heading
    =========
    Secondary heading
    ---------

effect:

First level heading

Secondary heading

  1. Use # to indicate level 1-6 headings.
    # First level heading
    ## Secondary heading
    ### Level 3 heading
    #### Title IV
    ##### Title five
    ###### Title 6

Effect:
# First level heading
## Secondary heading
### Level 3 heading
#### Title IV
##### Title five
###### Title 6

3.1.2 Paragraph

There must be blank lines before and after the paragraph. The so-called blank line means that there is no text content. If you want to force a line break within a paragraph, use more than two spaces plus a carriage return(line breaks are omitted in the quote).

3.1.3 Block reference

Use the symbol > on each line of the paragraph or only the first line, and you can also use multiple nested references, such as:
> Block reference
>> Nested references

effect:

Block reference

Nested references

3.1.4 Code block

Code can be represented by inline code or code blocks.

  1. Inline code Use one or more accent marks to represent the code area, and the number of accent marks at the beginning and end must be the same.

Use the `printf()` function.

Effect:
Use the printf() function.

Ordinary paragraph:

$(document).ready(() => {
$('pre code').each((i, block) => {

hljs.highlightBlock(block);

});
});

  1. Classic code block is created by adding 4 spaces or a tab character to each line(just like writing code). When converting to HTML, 4 spaces or 1 tab indentation at the beginning of each line will be removed, and the remaining spaces or tabs will be retained. In addition, the Markdown syntax symbols generally in the code block will not be converted. Such as

Code block:

$(document).ready(() => {
    $('pre code').each((i, block) => {
        hljs.highlightBlock(block);
        **highlight**
    });
});
  1. Github code block Use three or more accents(``` ```) to be placed on the previous and next lines of the code block. Add the language name(note to lower case) after the accent on the previous line, you can highlight the content of the code block according to the syntax of the language. If you want to display three accents in the code block, use four accents to indicate the start and end of the code block. For supported programming languages, see the languages YAML file , if you want to use code blocks without syntax highlighting, use plain mark.

```javascript
$(document).ready(() => {

$('pre code').each((i, block) => {
    hljs.highlightBlock(block);
    **highlight**
});

});
```

effect:

$(document).ready(() => {
    $('pre code').each((i, block) => {
        hljs.highlightBlock(block);
        **highlight**
    });
});

require'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html

Note:There must be a blank line between the normal paragraph.

3.1.5 Emphasis

Add * or _ to both sides of the emphasis, such as:

*Italic*, _Italic_
**Bold**, __bold__

Effect:
Italic, _Italic_
Bold, __bold__

3.1.6 List

Use ·, +, or - to mark an unordered list, such as:

-(+*) The first item

-(+*) The second item

-(+*) Item 3

Note:At least one _space_ or _tab character_ after the mark. If it is not in the quoted block, there must be a blank line between the preceding paragraph.

effect:

  • 1

    • 1.1
    • 1.2
  • 2

  • 2

  • 1

  • 2

The way to mark an ordered list is to replace the above symbols with numbers, supplemented by ., such as:
1. The first item
2. Item 2
3. Item 3

effect:

  1. The first item

     1 a
     2. Two
  2. The second item

  3. The third item

3.1.7 Dividing line

The most commonly used dividing line is three or more *, you can also use - and _.


Links can be generated in two forms:inline and reference.

  1. Inline:
    [ ](http::// www.cnblogs.com/"Link title").

Effect:
Blog Park .

  1. Reference type:

    [ 1][1]
    [ 2][2]
    [1] http://www.cnblogs.com
    [2] http://www.cnblogs.com

effect:

1
Blog Park 2

Note:The above [1]:https:://github.com/younghz/Markdown "Markdown" does not appear in the block.

3.1.9 Picture

The form of adding a picture is similar to a link, just add a in front of the link! .

![Description]( http://ww1.sinaimg.cn/large/a... )

Effect:
Description

3.1.10 Backslash \

Equivalent to reverse meaning effect. Make the symbol an ordinary symbol.

3.2 Extended syntax

3.2.1 Form

Item Price Quantity
Computer 1600 Yuan 5
Phone 12 yuan 12
Pipe 1 yuan 234

Does not support complex forms

3.2.2 Task list

  • []a bigger project

    • [x]first subtask
    • [x]follow up subtask
    • []final subtask
  • []a separate task

3.2.3 Directory

Table of Content

3.2.4 Flow chart, sequence diagram, Gantt chart

3.2.5 HTML

Fully supports HTML5

3.3 Common tools

3.3.1 Markdown Reader/Editor

See
2.3 Cross-platform use
2.4 More and more websites support Markdown

Markdown Ecological Chain

3.3.2 Chrome plugin

Markdown here
StackEdit

3.3.3 API documentation tool

Markdown is a pure text markup language, which can be accurately converted into HTML format through Markdown syntax format, and it is not as difficult to write as HTML. This feature has prompted it to become a suitable language for writing API documents.

Briefly introduce one

docsify

Local

  1. Use npm tool to install
  2. Run the web service
  3. Open localhost:3000,
  4. Edit the md file

With LiveReload function, real-time preview

GitHub

  1. Create a docs folder in the project
  2. Publish README.MD file under the docs folder
  3. Find GitHub pages in setting and change the source to master branch /docs folder

  1. As shown in the figure is the address of this document, click directly to see the final effect

3.3.4 Development tools

  1. Editor.md
  • Feature-rich
  • Larger
  • Compatible with IE8
  • There is a compatibility issue with the layer
  • No updates since 15 years, more bugs
  1. Markdown Plus
  • Lightweight and small
  • Complete basic functions
  • Extended syntax support is good
  • Use ES6
  • Not compatible with lower versions of IE
  1. StackEdit
  • Git version control

4 Editor development

4.1 Requirements analysis

Requirement:
An easy-to-use online editing tool for API documentation and operation manuals

  1. Considering that it can be displayed well on the website, so use HTML language

  2. To be easy to use, let non-technical personnel write the operation manual, so first try to use word to write, and then convert to HTML file to save, but there are several problems in this way:

    • The converted HTML files use inline styles, which are very messy and redundant, and it is not easy to modify the styles later;
    • The picture cannot be saved. The path of the picture inserted in the word document is a fixed physical path or stored with the document. When the document is converted into an HTML file and placed on the website server, the path of the picture changes. It would be very troublesome to adjust the picture again;
    • There is a solution to the picture. Word can be saved in htm format. This format is to save the picture and text together in a file, but the final result is that only IE can recognize this format, both in Chrome Is garbled.
  3. The comprehensive consideration is to make an online Markdown editor

Layer model

4.2 What You See Is What You Get(WYSIWYG)

What You See Is What You Get
The rich text editor that we commonly use now is such a mode, which is commonly used in the replies and article edit boxes of various forums. After we type the content, the content is automatically converted to HTML format, so that what we input, what we see Style is what we want last.

It itself has been converted to HTML tags, so the input field is iframe or div

Most Markdown editors are not WYSIWYG
Markdown itself is plain text, bold is equivalent to bold, so it only needs to be edited in textarea. In fact, the mark is stored and parsed when displayed

4.3 Parsing and preview

It can be parsed on the server side, and related items can be found in various languages, but this operation can be completely carried out on the client side, which is convenient for preview operation

  • marked The earliest markdown parser developed with node.js can support code highlighting through highlight.js in addition to general functions

  • markdown-js

  • markdown-it

    $("#mdeditor").keyup(function() {

    $("#preview").html(marked(acen_edit.getValue()));

    });

Html to Markdown reverse analysis

js plugin:

  • to-markdown
  • breakdance

Online HTML to Markdown

4.4 Basic functions

  • Shortcut keys such as Undo
  • Search and replace
  • Code highlighting, folding, automatic completion
  • Scroll bar follow

CodeMirror

CodeMirror is an "Online Source Editor", based on Javascript, short and powerful, real-time online code highlighting, he is not a subsidiary product of a rich text editor, he is the base library of many famous online code editors

  • chrome developer tools
  • firebug
  • JS Bin
  • The two open source Markdown editors mentioned above

4.5 Picture upload

This method is very simple, but the simplicity is for developers. The user experience is not necessarily very good. Ordinary users may find it difficult to find a stable and easy-to-use picture bed, especially when doing this operation during the writing process. The idea of broken writing is contrary to Markdown's original intention.

4.5.2 Controls

The use of the picture upload control ultimately generates a link, there is no essential difference, is to provide a picture bed for the user
Unlike rich text editors, there are few Markdown editors that provide image uploading, and you are exposed to CSDN

Extend the function, you can monitor the paste event onpaste to achieve automatic upload of pasted pictures

There are certain rules for naming image files uploaded to the server

4.6 Other functions

  • toolbar
  • Import and Export
  • Extended syntax
  • Custom CSS
  • Full screen and other layout switching

4.7 Length of request string

web.config modify configuration