Markdown 语法

Markdown 语法

1月 9, 2024

Markdown Features

This topic is meant to give you a very basic overview of how Markdown works, showing some of the most frequently used operations.

Bold and Italic

This text is bold.
This text is italic.
This text is struck out.

Header Text

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Line Continuation

By default Markdown adds paragraphs at double line breaks. Single line breaks by themselves are simply wrapped together into a single line. If you want to have soft returns that break a single line, add two spaces at the end of the line (shift-enter) or use a backslash \.


This line has a paragraph break at the end (empty line after).

Theses two lines should display as a single line because there’s no double space at the end.

The following line has a soft break at the end (two spaces or a \ at end)
This line should be following on the very next line.

You can also use shift-enter to inject the two spaces plus linefeed at the end of a line.
To show all white space and returns in a document you can use View → Toggle Invisible Characters.


You can easily link using [text](link) syntax:

Markdown Monster Web Site

If you need additional image tags like targets or title attributes you can also embed HTML directly using raw HTML markup:

Go to the 
<a href="https://markdownmonster.west-wind.com" style="font-style: italic">
    Markdown Monster Web Site
</a>

renders:

Go to the Markdown Monster Web Site


Images

Images are similar to links:

![Markdown Monster](https://markdownmonster.west-wind.com/Images/MarkdownMonster_Icon_128.png)

which renders:

Markdown Monster

You can embed images from the Clipboard by pasting (ctrl-v), by using the Image Dialog, or by dragging and dropping images into the document from the Folder Browser, Windows Explorer or a

Block Quotes

Block quotes are callouts that are great for adding notes or warnings into documentation.

Simple block quotes simply use a > to start a quote block:

> **Note:** Block quotes can be used to highlight important ideas.

This renders to:

Note: Block quotes can be used to highlight important ideas.

You can make quote blocks look nicer with headers and icons (using FontAwesome here):

> ### @ icon-info-circle Headers break on their own
> Note that headers don't need line continuation characters 
> as they are block elements and automatically break. Only text lines
> require the double spaces for single line breaks.

Note that lines automatically wrap in the quote block, if no newline with >' is provided. Shown with the breaks here to make it easier to read. The following uses a single line for the second block which renders identically:</p> <blockquote> <h3 id="icon-info-circle-headers-break-on-their-own"><i class="fa fa-info-circle"></i> Headers break on their own</h3> <p>Note that headers don't need line continuation characters as they are block elements and automatically break. Only text lines require the double spaces for single line breaks.</p> </blockquote> <h3 id="fontawesome-icons">Fontawesome Icons</h3> <p>Markdown Monster includes custom syntax for FontAwesome icons in its templates. You can embed a <code>@ icon-</code> followed by a font-awesome icon name to automatically embed that icon without full HTML syntax.</p> <pre><code class="language-markdown">@ icon-gear Configuration </code></pre> <p>which renders:</p> <hr /> <p><i class="fa fa-gear"></i> Configuration</p> <hr /> <p>Note that this renders the following html:</p> <pre><code class="language-html"><i class="fa fa-gear"></i> </code></pre> <h3 id="emojis">Emojis</h3> <p>You can also embed Emojis into your markdown using the Emoji dialog or common</p> <pre><code class="language-markdown">:smile: :rage: :sweat: :point_down: :-) :-( :-/ </code></pre> <p>This renders:</p> <hr /> <p>😄 😡 😓 👇</p> <p>😃 😦 😕</p> <hr /> <h3 id="html-markup">HTML Markup</h3> <p>You can also embed plain HTML markup into the page if you like. For example, if you want full control over fontawesome icons you can use this:</p> <p>This text can be <strong>embedded</strong> into Markdown:</p> <pre><code class="language-markdown"><i class="fa fa-refresh fa-spin fa-2x"></i> &nbsp;**Refresh Page** </code></pre> <p><i class="fa fa-refresh fa-spin fa-2x"></i>  <strong>Refresh Page</strong></p> <p>Note that blocks of raw HTML markup should be separated from text by empty lines above and below the HTML blocks.</p> <h3 id="comment-blocks---keep-markdown-from-rendering">Comment Blocks - Keep Markdown from Rendering</h3> <p>Markdown has support for HTML comments and you can use <code><!--</code> for the beginning and <code>--></code> for the end of a block of markdown that you don't want to render.</p> <pre><code class="language-markdown">### Commenting This text and header renders fine. <!-- This paragraph is commented out and **does not render**. --> This footer is comming across just fine. </code></pre> <p>This renders:</p> <hr /> <h3 id="commenting">Commenting</h3> <p>This text and header renders fine.</p> <!-- This paragraph is commented out and **does not render**. --> <p>This footer is coming across just fine.</p> <hr /> <h3 id="unordered-lists">Unordered Lists</h3> <pre><code class="language-markdown">* Item 1 * Item 2 * Item 3 </code></pre> <p>This renders:</p> <hr /> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <hr /> <p>This text is part of the third item. Use a soft return (<code>shift-enter</code> or two spaces or <code>\</code>) at the end of the the list item to break the line and continue at the bullet indentation.</p> <p>A double line break, breaks out of the list.</p> <h3 id="ordered-lists">Ordered Lists</h3> <p>Ordered lists use number like <code>1.</code> or <code>2.</code> for the bullet items.</p> <pre><code class="language-markdown">1. **Item 1** Item 1 is really something 2. **Item 2** Item two is really something else </code></pre> <p>renders to:</p> <ol> <li><strong>Item 1</strong><br /> Item 1 is really something</li> <li><strong>Item 2</strong><br /> Item two is really something else</li> </ol> <p>If you want lines to break (like after the bold headers) you cna use <strong>soft returns</strong>.</p> <blockquote> <p><strong>Note</strong>: Numbered lists <strong>order themselves based on order</strong> rather than the number you explicitly use. If you frequently reorder lists it's useful to number all items <code>1.</code>.</p> </blockquote> <p>You can also nest lists and mix ordered and unordered lists:</p> <pre><code class="language-markdown">1. First, get these ingredients: * carrots * celery * lentils 2. Boil some water. 3. Dump everything in the pot and follow this algorithm: </code></pre> <p>This renders:</p> <hr /> <ol> <li><p>First, get these ingredients:</p> <ul> <li>carrots</li> <li>celery</li> <li>lentils</li> </ul> </li> <li><p>Boil some water.</p> </li> <li><p>Dump everything in the pot and follow<br /> this algorithm:</p> </li> </ol> <hr /> <h3 id="inline-code">Inline Code</h3> <p>If you want to embed code in the middle of a paragraph of text to highlight a coding syntax or class/member name you can use inline code syntax:</p> <pre><code class="language-markdown">Inline code or member references like () can be codified... </code></pre> <hr /> <p>Inline code or member references like <code>SomeMethod()</code> can be codified... You can use the <code>'{}'</code> menu or <strong>Ctrl- to embed inline code.


Indented Code Blocks

Markdown supports code blocks syntax in a couple of ways:

Using an indented text block for code:

Some rendered text...

    // This is code by way of four leading spaces
    // or a leading tab
    int x = 0;
    string text = null;
    for(int i; i < 10; i++;) {
        text += text + "Line " + i;
    }

More text here

renders:


Some rendered text…

// This is code by way of four leading spaces
// or a leading tab
int x = 0;
string text = null;
for(int i; i < 10; i++;) {
    text += text + "Line " + i;
}

More text here


Fenced Code Blocks with Syntax Highlighting

You can also use triple back ticks plus an optional coding language to support for syntax highlighting.

The following is C# code.

`csharp
// this code will be syntax highlighted
for(var i=0; i++; i < 10)
{
    Console.WriteLine(i);
}
</code></pre>
<p>which renders syntax colored code:</p>
<pre><code class="language-csharp">// this code will be syntax highlighted
for(var i=0; i++; i < 10)
{
    Console.WriteLine(i);
}
</code></pre>
<p>Many languages are supported: html, xml, javascript, typescript, css, csharp, fsharp foxpro, vbnet, sql, python, ruby, php, powershell, dos, markdown, yaml and many more. Use the Code drop down list to get a list of available languages.</p>
<p>You can also leave out the language to attempt auto-detection or use <code>text</code> for plain text:</p>
<pre><code class="language-markdown">```text
robocopy c:\temp\test d:\temp\test

renders plain, but formatted text:

robocopy c:\temp\test d:\temp\test

Note: Prefer using text for non-highlighted syntax over no syntax as no syntax tries to auto-discover the syntax which often is not correct. Always be specific with syntax specified.

Footnotes

Footnotes can be embedded like this:

Here is some text that includes a Footnote 1 in the middle of its text. And here’s another footnote 2. The actual footnotes render on the very bottom of the page.

Pipe Tables

Pipe Tables can be used to create simple single line tables:

|size | material     | color       |
|---- | ------------ | ------------|
|9    | leather      | brown **fox**  |
|10   | hemp canvas  | natural |
|11   | glass        | transparent |

size material color
9 leather brown fox
10 hemp canvas natural
11 glass transparent

Note: Cell lines don’t have to line up to render properly. Max columns in any row determines table columns for the entire table. Pipe tables also don’t need leading and trailing pipes to render as tables, but make sure you check compatibility with your final rendering site.

Grid Tables

Grid Tables are a bit more flexible than Pipe Tables in that they can have multiple lines of text per cell and handle multi-line embedded Markdown text.

+---------+---------+
| Header  | Header  |
| Column1 | Column2 |
+=========+=========+
| 1. ab   | > This is a quote
| 2. cde  | > For the second column 
| 3. f    |
+---------+---------+
| Second row spanning
| on two columns
+---------+---------+
| Back    |         |
| to      |         |
| one     |         |
| column  |         | 

Header Column1 Header Column2
  1. ab
  2. cde
  3. f

This is a quote For the second column

Second row spanning on two columns
Back to one column

Use the Table Editor

For easier table data entry and pretty rendered tables you can use the table editor which provides grid based table data entry. You can use the table editor with Pipe, Grid and HTML tables.

Leave A Comment

作者: Lawrence Lang

一位资深Linux云计算、云原生、大数据、高可用集群运维架构工程师。