The first time I got to know Markdown was when I was writing the code and I saw many big guys on Github. Their project must have a file called Readme. Md, which is composed of some simple and beautiful symbols and Chinese letters. It turns out there is a magic markup language that can produce such beautiful documents

Of course, when we are documenting some technical documents or writing technical blogs, we often have a headache. How to write a technical document that can be posted to multiple blogging platforms in a beautiful format?

Markdown solves the problem of quick writing and multi-platform adaptation by formatting your documents with simple tags and ensuring consistent formatting across platforms

Of course, some of the parsed styles, such as font size, hyperlink color, code block color, and so on, may vary slightly from platform to platform depending on the Markdown parser configuration

Markdown is built for simplicity, so to speak

What is a Markdown?

  1. MarkdownIs a lightweight markup language that allows people to write documents in plain text formats that are easy to read and write
  2. He is byJohn GruberInvented and created in 2004
  3. byMarkdownThe documentation you write can be exportedHTML, Word, image, PDF, EpubAnd other documents in various formats
  4. MarkdownThe document suffix is written.mdor.markdown`
  5. Attention!!!!!!MarkdownSupport sectionHtmlThe syntax section for displaying complex content can be usedHtmlCode to write

Markdown editor selection

Since I started out with JS, the first editor I chose was Hbuilder, but it has been upgraded to HbuilderX, which is not a dedicated Markdown editor. However, its internal integrated plug-in has the function of directly writing Markdown. Personally, I think it is very suitable for writing Markdown documents. Not only does it not delay the writing of codes, but also the color of Markdown text marks is very consistent with my aesthetic taste. There are, of course, some Markdown compilers for everyone to try

  1. Major blog sites are written to support Markdown syntax, so you can write directly on the website, such as: Github, CSDN, Open Source China, Nuggets, Sifu and other platforms
  2. Specialized Markdown editors such as:

    Mou

    MarkdownPad

    Typora

    Atom

    Haroopad SublimeText

    Cmd Markdown

    Byword

    CuteMarkEd

    Dillinger

    EpicEditor

    MarkdownEditor

    MarkPad

    Marxico

  3. Finally, most compilers are installableMarkdown compilerPlugins, so you can basically write technical articles using Markdown while writing code

Some grammar I often use

* * * attention!!!!!! *** Here are some Markdown tags that I use to write my own documents and technical blogs. Markdown is not the official definition of this tag

### paragraph title #### special tip *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** <span id="# span ID "></span> The combination can complete the chain, Jumps to the specified location within the current articleCopy the code

Markdown syntax

  1. The title
  2. The paragraph
  3. The list of
  4. reference
  5. code
  6. link
  7. The picture
  8. form
  9. other

The title

  1. It is mainly used to write the directory structure of the entire document, and it is necessary to pay attention to the font size of the headings at all levelsh1-h6
  2. It is possible to underline headings, but I don’t like to do this. The length of the line varies depending on the number of characters
# 1 title # # 2 headlines # # # # # # # 3 4 headlines # # # # # # # 5 # # # # 6 title tag lineCopy the code

The paragraph

  1. This can be done by adding two Spaces at the end of the text or one empty line after itA newline
  2. use*or_Combination to achieve bold or slant
* * _ _ * * italic text italic text bold text bold text (* * * * * * * * bold italic text ___ ___ bold italic textCopy the code
  1. Any of the following symbols can be used to create a partition line, and the length of the partition line varies depending on the number of symbols
***
* * *
*****
- - -
----------
Copy the code
  1. Add before and after the text~or~ ~You can delete lines
~ Indicates the text to be marked with the deletion line. ~~ Indicates the text to be marked with the deletion lineCopy the code
  1. Let the text have a footnote, which is the text displayed after the mouse hover
[^ Text to be noted]: text displayed after suspensionCopy the code

The list of

  1. Ordered list, direct use1. 2. 3.You can label them in order. Note that they are numbers plus.
1. Item 1 2. Item 2 3Copy the code
  1. Unordered list, used*or+or-Mark down in order
* first term * second term * third term + first term + second term + third term - first term - second term - third termCopy the code
  1. Nested lists, list nesting simply requires adding four Spaces before the options in the child list. Note that it can also be used under the list>To refer to the relevant content, note that quoting a newline requires two Spaces at the end
1. First item: * first element nested in first item * second element nested in first item 2. Second item: + second nested first element + second nested second element 3. Item 3 - first element of item 3 nested - Second element of item 3 nested 4. Reference content > reference one (note that if you want to wrap a line, add two Spaces, the default is not to wrap, will automatically concatenate the following reference content) > reference twoCopy the code

reference

  1. Add at the beginning of the paragraph>, and the paragraph with a space between. By default, there is no newline, which requires two Spaces at the end. Support nested
> Reference one > reference two > Reference three > Outermost > > Layer 1 nesting > > > Layer 2 nestingCopy the code
  1. See the end of the previous section for lists in blocks and blocks in lists
> Block use list > 1. First item > 2. Second item > + first item > + second item > + third item * List use block * first item > reference one > reference two * second itemCopy the code

code

  1. If the code is a function or fragment on a paragraph, it can be wrapped in backquotes (‘). HbuilderX test not supported)
` ` code () functionCopy the code
  1. Code blocks can be usedFour SpacesOr a TAB characterTabKey). It is also possible to wrap a code in two (‘ ‘) packages, which I use a lot, and you can specify the language of the code, or not
Javascript $(document).ready(function () {alert('RUNOOB'); alert('RUNOOB'); }); (` ` `)Copy the code

link

  1. For normal links, write directly in the following format, including full format and introduction format
[link name](link address "link title ") // Concise < link title >Copy the code
  1. Advanced links, we can set a link by variable, variable assignment at the end of the document
This link uses 1 as url variable [Google][1] this link uses abc123 as url variable [Baidu][abc123] this link uses runoob as url variable [runoob] [runoob] and then assigns the variable value at the end of the document (url) [1]: http://www.google.com/ [abc123]: http://www.baidu.com/ [rb]: http://www.rb.com/Copy the code

The picture

  1. Basic syntax, written directly in the following format
! [Alt attribute text](image address or image url)! [Alt attribute text](image address or image url "optional title ")Copy the code
  1. Advanced syntax, using variables like a web address
This link uses a as the url variable [RB][a]. It then assigns a value to the variable (image address or image url) at the end of the document [a]: image address or image urlCopy the code
  1. There is no way to specify the height and width of the image, you can use normal if you want<img>The label
<img src="http://static.rb.com/images/rb-logo.png" width="50%">
Copy the code

form

  1. Use form making|To separate different cells, use-To separate the header from the other rows
| | header header | | -- - | -- - | | | cell cell | | | | cell cellCopy the code
  1. We can set the alignment of the table
    • - :Align the content and title bar to the right
    • : -Aligns the content and title bar to the left
    • : - :Center the content and title bar
| left-aligned | | center aligned right | | : -- -- -- -- - | - : | : - : | | | | | cell cell cell | | | | cell cell cellCopy the code
  1. Complex tables, such as table headers, can be used directlyHtmlThe table provided in
< table > < tr > < th colspan = "3" > js - pratice < / th > < / tr > < tr > < th > level directory < / th > < th > secondary directory < / th > < th > description < / th > < / tr > < tr > < td Rowspan = "3" > Array < / td > < td > Basic < / td > < td > Array Basic operations < / td > < / tr > < tr > < td > Repeat < / td > < td > Array to retry < / td > < / tr > < tr > < td > Sort < / td > < td > array Sort operations < / td > < / tr > < tr > < td > Date < / td > < td > Date < / td > < td > Date object manipulation < / td > < / tr > < tr > < td > Inherit < / td > < td > Inherit < / td > < td > inheritance object manipulation < / td > < / tr > < tr > < td > Promise < / td > < td > Promise < / td > < td > Promise object manipulation < / td > < / tr > < / table >Copy the code

other

  1. supportHtmlcode

    For example, Html escape characters are implemented by adding a space at the beginning of the line,   Represents half corner space,   For example, use

    to implement line breaks in a table

  2. with\Package to escape
  3. Part of the seniorMarkdownEditor support$$Wrap to use mathematical formulas
  4. Part of the seniorMarkdownThe editor supports compilation and presentation of flow charts

Reference documentation: ———— novice Markdown tutorial Reference documentation: ———— Several mainstream Markdown editors are introduced. Reference documentation: ———— Some of Markdown’s tricks and tricks

I’m FX67ll.com. If you find anything wrong with this article, please comment on it in the comments section. Thank you for reading! If you like this article, welcome to visit my github warehouse address, for me to click a Star, Thanks~ 🙂 forward please note the reference article address, very thank you!!