This is the 23rd day of my participation in Gwen Challenge

An overview of the

To understand what Markdown is, you need to understand a concept: a rich text editor.

Generally speaking, when you enter a text in a rich text editor and select a specific format, you can directly display the corresponding results. Office Word, for example, is a typical rich text editor.

This has two advantages:

  1. Simple and intuitive;
  2. What you see is what you get.

But this approach comes with a hard drawback: inefficiency.

Recall that when we use Word for content output, we often need to “enter text” while using the mouse to select the corresponding style: bold, sort, list, etc. Even when the content is edited, it often ends up being “inconsistent in style” (the pain of typesetting college papers), “inconsistent in format across platforms” (Word and WPS, for example), etc.

And what is a Markdown?

First, Markdown is a markup language. You should know that HTML, Markdown and HTML can be considered the same thing. In short, it is a way of describing formatted text in plain text code. So with HTML, what’s the use of Markdown? The simple answer is: HTML is too hard to write! Markdown’s indentation and notation format, compared to HTML tags, makes it much friendlier to content-conscious writers, and even Markdown code is fairly readable. So once we’ve written Markdown, how do we display it in the format we want? The usual practice is to compile Markdown into HTML. In fact, some websites already have such a compiler. You can type in the Markdown code and convert it directly to HTML, which can be rendered by the browser. The README on Github and the ability to preview various.md files are prime examples. Markdown can be widely used for the creation of formatted text content such as documents, blogs and forums. Once you get used to it, Markdown is more convenient and faster than WYSIWYG HTML editor, and has the advantage of plain text compared to Word and other formats. In these “informal Settings”, its advantages over LaTeX are self-evident.

So **Markdown is a syntax for styling content by marking characters. **Markdown aims to be “easy to read and easy to write”.

For example, in a common rich text editor, if I want to bold a paragraph, I need to select the corresponding text with the mouse and then select the bold option or Ctrl+B;

But in the Markdown editor, I just need to add two * at the beginning and end of the text that needs bolding, for example: ** bold this paragraph **.

This approach avoids two drawbacks of rich text editors:

  1. With the Markdown editor, you just focus on the output of the content without leaving the keyboard: editing (text characters) – typesetting (markup characters);
  2. ** The final rendering results are consistent and predictable. ** Don’t worry about formatting errors or style changes.

In fact, today’s mainstream Markdown editors are able to achieve the benefits of rich text editors: WHAT you see is what you get.

In Typora’s case, during text editing, you can preview the final rendering in real time.

Of course, in addition to this, there are some online sites, generally can be left text to the right preview, even if you don’t understand the syntax can also use the graphical interface.

IO. It also supports plug-ins such as MathJax.

Block element

Paragraphs and line breaks

A Markdown paragraph is made up of one or more consecutive lines of text preceded by more than one blank line (a blank line is defined as a blank line if it appears empty on display. For example, if a line contains only Spaces and tabs, it is considered empty. Normal paragraphs should not be indented with Spaces or tabs.

The title

Markdown supports two header syntax, class [Setext] 1 and class [atx] 2 forms.

The setext-like form is in the form of the bottom line, using = (highest-order heading) and – (second-order heading), for example:

This is an H1
=============

This is an H2
-------------
Copy the code

Any number of = and – will work.

The ATX-like form inserts 1 to 6 # at the beginning of the line, corresponding to order 1 to 6 of the title, for example:

# this is H1

# # this is H2

# # # # # # H6 is this
Copy the code

You can optionally “close” atX-like headings. This is purely aesthetic, and if you feel comfortable with it, you can add # at the end of the line, and the number of # at the end of the line doesn’t have to be the same as the number of # at the beginning (the number of hashtags at the beginning of the line determines the order of the heading) :

# This is H1 ### this is H2 ##### and this is H3 ######Copy the code

Blocks reference Blockquotes

Markdown marks a block reference using a reference similar to the > used in email. If you’re familiar with the introductory part of an email, you know how to create a block reference in a Markdown file that looks like you broke the line yourself and then preceded each line with > :

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
> > Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.
Copy the code

Markdown also allows you to be lazy and just add > at the beginning of the first line of the entire paragraph:

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.
Copy the code

Block references can be nested (e.g., references within references) by adding a different number of > depending on the level:

> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.
Copy the code

Other Markdown syntax can also be used within referenced blocks, including headings, lists, code blocks, and so on:

> ## This is a headline.
> > 1. This is the first list item.
> 2. This is the second row entry.
> > Give some examples of code:
> 
>     return shell_exec("echo $input | $markdown_script");
Copy the code

The list of

Markdown supports both ordered and unordered lists.

Unordered lists are marked with an asterisk, plus, or minus sign:

*   Red
*   Green
*   Blue
Copy the code

Is equal to:

+   Red
+   Green
+   Blue
Copy the code

Also equivalent to:

-   Red
-   Green
-   Blue
Copy the code

Ordered lists use numbers followed by an English period:

1.  Bird
2.  McHale
3.  Parish
Copy the code

List item tags are usually placed at the far left, but can be indented up to three Spaces, and must be followed by at least one space or TAB.

To make a list look nice, you can sort things out with fixed indentation:

*   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. * Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.Copy the code

If the list items are separated by blank lines, Markdown will wrap the item contents in

tags when the HTML is output, for example:

*   Bird
*   Magic
Copy the code

Will be converted to:

<ul>
<li>Bird</li>
<li>Magic</li>
</ul>
Copy the code

But this:

*   Bird

*   Magic
Copy the code

Will be converted to:

<ul>
<li><p>Bird</p></li>
<li><p>Magic</p></li>
</ul>
Copy the code

List items can contain multiple paragraphs, each paragraph must be indented 4 Spaces or 1 TAB:

1.  This is a list item with two paragraphs. Lorem ipsum dolor
sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. Donec sit amet nisl. Aliquam semper ipsum sit amet velit.
2.  Suspendisse id sem consectetuer libero luctus adipiscing.
Copy the code

If you indent each line, it looks a lot better. Again, if you’re lazy, Markdown also allows:

*   This is a list item witmarkdownh two paragraphs.

This is the second paragraph in the list item. You're only required to indent the first line. Lorem ipsum dolorsit amet,  consectetuer adipiscing elit.
*   Another item in the same list.
Copy the code

If you want to put a reference in a list item, then the > needs to be indented:

*   A list item with a blockquote:

> This is a blockquote > inside a list item.Copy the code

To place a code block, the block needs to be indented _ twice _, which is either 8 Spaces or 2 tabs:

*A list item contains a list block:< Code here >Copy the code

The code block

There are two ways to insert program code: using backquotes (~ key) or indentation (Tab).

  • To insert in-line code, that is, to insert a word or a line of codecodeInsert like this.
  • Insert multiple lines of code, each wrapped in three backquotes (‘ ‘). Or use indentation (Tab).

Program-related writing or label language primitives usually have blocks of code that are already formatted. Usually these blocks are not expected to be formatted like a normal paragraph file, but rather displayed as they are. Markdown uses’

<div class="footer">
    &copy; 2004 Foo Corporation
</div>
Copy the code
In code blocks, normal Markdown syntax is not converted, and asterisks, for example, are just asterisks, which means you can easily write Markdown syntax related files in Markdown syntax. You can create a line with more than three asterisks, minus signs, and bottom lines on one line. Nothing else can be in the line. You can also insert Spaces between asterisks and minus signs. Each of the following is written can establish separation line: ` ` ` markdown * * * * * * * * * * * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --Copy the code

Segment element

form

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |
Copy the code
First Header Second Header
Content Cell Content Cell
Content Cell Content Cell

link

Markdown supports two forms of link syntax: _ inline _ and _ reference _. Either way, the link text is marked with square brackets. To create an inline _ link, place the parentheses after the square brackets and insert the url link. If you also want the title text of the link, put double quotation marks around the title text after the url, for example:

This is [an example] (http://example.com/ "Title") inline link.

[This link] (http://example.net/) has no title attribute.
Copy the code

Produce:

<p>This is <a href="http://example.com/" title="Title">
an example</a> inline link.</p>

<p><a href="http://example.net/">This link</a> has no
title attribute.</p>
Copy the code

If you want to link to a resource from the same host, you can use a relative path:

See my [About] (/about/) page for details.
Copy the code

A link in the _ reference form _ follows the link text’s brackets with another square bracket, and inside the second square bracket is a mark that identifies the link:

This is [an example] [id] reference-style link.
Copy the code

You can optionally add a space between the brackets:

This is [an example] [id] reference-style link.
Copy the code

Then, at any point in the file, you can define what the tag links to:

[id] :http://example.com/ "Optional Title Here"
Copy the code

The link content definition is of the form:

  • Square brackets (optionally preceded by up to three Spaces for indentation) enter the link text inside
  • And then a colon
  • Followed by more than one space or TAB character
  • Then the url of the link
  • Optionally enclose the title content, either in single, double, or parentheses

The following three links are defined the same:

[foo] :http://example.com/ "Optional Title Here"
[foo] :http://example.com/ 'Optional Title Here'
[foo] :http://example.com/ (Optional Title Here)
Copy the code

Note: There is a known problem with markdown.pl 1.0.1 that ignores single quoted link titles. Link urls can also be wrapped in Angle brackets:

[id] :
       "Optional Title Here"
Copy the code

You can also put the title property on the next line, or indent it if the url is too long:

[id] :http://example.com/longish/path/to/resource/here
    "Optional Title Here"
Copy the code

Url definitions are only used to generate links and do not appear directly in files. Link discrimination tags can have letters, numbers, whitespace, and punctuation, but are not case-insensitive, so the following two links are the same:

[link text] [a]
[link text] [A]
Copy the code

The _ implicit link tag _ feature allows you to omit the specified link tag. In this case, the link tag is treated as the same as the link text. To use the implicit link tag, you simply put an empty square bracket after the link text.

[Google] []
Copy the code

Then define the link content:

[Google] :http://google.com/
Copy the code

Because link text may contain white space, this simplified tag may contain more than one word:

Visit [Daring Fireball] [] for more information.
Copy the code

Then we define the link:

[Daring Fireball] :http://daringfireball.net/
Copy the code

The link definition can be placed anywhere in the document, usually directly after the paragraph where the link appears, or you can place it at the very end of the document, like a comment. Here is an example of a reference link:

I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].

  [1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"
Copy the code

If you use the link name instead:

I get 10 times more traffic from [Google] [] than from
[Yahoo] [] or [MSN] [].

  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"
Copy the code

Either way, the following HTML is generated.

<p>I get 10 times more traffic from <a href="http://google.com/"
title="Google">Google</a> than from
<a href="http://search.yahoo.com/" title="Yahoo Search">Yahoo</a>
or <a href="http://search.msn.com/" title="MSN Search">MSN</a>.</p>
Copy the code

Here is the Markdown file with the same paragraph in inline form, provided for comparison:

I get 10 times more traffic from [Google] (http://google.com/ "Google")
than from [Yahoo] (http://search.yahoo.com/ "Yahoo Search") or
[MSN] (http://search.msn.com/ "MSN Search").
Copy the code

The point of reference links is not that they are easier to write, but that they are easier to read. Compare this to the example above. The reference text itself is only 81 characters long, but the inline text is 176 characters long. There are more tags than text. Using Markdown’s referential links makes the document more like the end result of the browser, allowing you to move some of the markup related metadata out of the paragraph text so you can add links without breaking the reading feel of the article.

Emphasis on

Markdown uses an asterisk (*) and a bottom line (_) as symbols for emphasizing words. Words surrounded by * or _ are converted to tags, and words surrounded by two * or _ are converted to , for example:

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__
Copy the code

Will be converted to:

<em>single asterisks</em>

<em>single underscores</em>

<strong>double asterisks</strong>

<strong>double underscores</strong>
Copy the code

You can use any style you like, the only limitation is that you end the tag with the same symbol you open it with. Emphasis can also be inserted directly into the text:

un*frigging*believable
Copy the code

But if you have space on both sides of the *** *** and **_** *, they will be treated as normal symbols. To insert plain asterisks or underlines directly before and after text, you can use backslashes:

\*this text is surrounded by literal asterisks\*
Copy the code

delete

~~some text to del~~
Copy the code

some text to del

code

If you want to mark a small piece of in-line code, you can surround it with backquotes, for example:

Use the `printf()` function.
Copy the code

Produce:

<p>Use the <code>printf()</code> function.</p>
Copy the code

If you want to insert backquotes inside a code section, you can open and close a code section with multiple backquotes:

``There is a literal backtick (`) here.``
Copy the code

This syntax produces:

<p><code>There is a literal backtick (`) here.</code></p>
Copy the code

The picture

Obviously, it is difficult to design a “natural” syntax for inserting images in a text-only application. Markdown uses a syntax similar to linking to tag images, but also allows for two styles: inline _ and _ reference. Inline image syntax looks like:

! [Alt text] (/path/to/img.jpg)

![Alt text] (/path/to/img.jpg "Optional title")
Copy the code

The details are as follows:

  • An exclamation point!
  • Then a square bracket is placed inside the image’s substitute text
  • This is followed by a normal parenthesis with the url of the image inside it, and finally enclosed in quotation marks with optional ‘title’ text.

The reference image syntax looks something like this:

! [Alt text] [id]
Copy the code

“Id” is the name of an image reference, which is defined in the same way as a link reference:

[id] :url/to/image "Optional title attribute"
Copy the code

So far, Markdown has no way to specify the width and height of an image, but you can use the normal tag if you want.

other

Automatic link

Markdown supports shorter auto-links for web addresses and E-mail addresses, which Markdown automatically converts to links when wrapped in Angle brackets. The text of the link is the same as the link address, for example:

<http://example.com/>
Copy the code

Markdown will become:

<a href="http://example.com/">http://example.com/</a>
Copy the code

The backslash

Markdown can use backslashes to insert symbols that have other meanings in the syntax. For example, if you want to add asterisks to text for emphasis (but without the tag), you can add backslashes before the asterisks:

\*literal asterisks\*
Copy the code

Markdown supports the following symbols preceded by backslashes to help insert normal symbols:

\ backslash 'backquotes*The asterisk_ bottom line {} curly brackets [] square brackets () bracket # hash + + - minus. English period! Exclamation markCopy the code

Limitations of Markdown

“When to use Markdown” is a very personal question to answer. To clarify the boundaries between Markdown and other editors, instead of enumerating application scenarios, change the question to “When not to use Markdown” **. As mentioned earlier, Markdown is only a “lightweight markup language”, lacking in typesetting capabilities compared to Word processors such as Latex, Word or Pages, which are also markup languages, not to mention professional-grade typesetting software such as Indesign. A slight comparison with the most familiar Word reveals the flaws:

  1. Markdown has no flexibility with paragraphs. In Word, you can insert text boxes and reposition them. Although this is not a common usage, it means that Word can be formatted in paragraphs (Latex can do a similar job), making specialized typesetting software more suitable for specialized needs than Markdown’s linear typesetting of text.
  2. Markdown is poor at typesetting non-pure text elements, the most common example being images. Sure, many editors now support text mashup, but given the text-only format, it’s almost impossible for a Markdown editor to have the flexibility to position images as Word does, let alone adapt text around the image.

It can be seen that these disadvantages all come from the plain text format of Markdown itself, because Markdown has been positioned as a “text input tool” from the very beginning, and the typesetting function is also an extension based on HTML, which is not suitable for typesetting documents with a high degree of customization of typesetting format.

thinking

Thinking is one of the core of human activity, and writing is one of the most important media for recording the results of thinking. The pen, the tool that makes gorgeous literature become an entity, has become an indelible part of human memory. As Shakespeare said in a Midsummer Night’s Dream:

When the imagination

Giving shape to the unknown

Be the poet’s pen

Let them form and give to the emptiness of the air

A place

A title

reference

What is a Markdown?

Markdown complete Introduction (1)

Markdown complete Introduction (2)

Markdown-Syntax-CN