Markdown Notes || 語法整理


Posted by george16886 on 2020-04-08

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).


Title

# Title
Title
=
Title
====

Sub-title

## Sub-title
Sub-title
-
Sub-title
--------

Sub-sub-title

### Sub-sub-title

Sub-sub-sub-title

#### Sub-sub-sub-title
Sub-sub-sub-sub-title
##### Sub-sub-sub-sub-title
Sub-sub-sub-sub-sub-title
###### Sub-sub-sub-sub-sub-title

</br>

Notes

  • ### Title would be set as URL, use [any text](#Title) to jump to another title in the same page.
    • Space in a title would be replaced with -, go to Inline HTML.
    • Title duplicated with the same content would be indexed with number, go to table notes.
* ### Title would be set as URL, use **`[any text](#Title)`** to jump to [another title](#Link) in the same page.
  * #### Space in a title would be replaced with `-`, go to [Inline HTML](#Inline-HTML).
  * #### Title duplicated with the same content would be indexed with number, go to [table notes](#Notes-2).
  • ### Title is available in a list or blockquote. #
  • ### Add \ before # to show # if # is at the end of a title like #
* ### Title is available in a [list](#List) or [blockquote](#Blockquote). #
> * #### Only sub-title is available in a blockquote, see [blockquote notes](#Notes-4). #
* ### Add `\` before `#` to show # if `#` is at the end of a title like \#

</br>


Highlighting

italic

*italic*
_italic_

bold

**bold**
__bold__

strikethrough

~~strikethrough~~
<del>strikethrough</del>

</br>

Examples with some combinations

bold and italic
***bold and italic*** or ___bold and italic___ or
_**bold and italic**_ or *__bold and italic__* or
__*bold and italic*__ or **_bold and italic_**

bold and italic and strikethrough
~~___bold and italic and strikethrough___~~ or
__*~~bold and italic and strikethrough~~*__ or
***~~bold and italic and strikethrough~~***

italic, bold, bold and italic, bold and strikethrough
_italic_, __bold, *bold and italic*, ~~bold and strikethrough~~__

</br>


List

Unordered list

  • Use * (or + or -) for bullets.
    • Use tab (two spaces) to make a sub-item.
    • Sub-item
      • Sub-sub-item
        • Sub-sub-sub-item
  • New list
* Use __`*`__ (or __`+`__ or __`-`__) for bullets.
  + Use **tab** (*two spaces*) to make a sub-item.
  + Sub-item
    - Sub-sub-item
      - Sub-sub-sub-item
* New list

Ordered list (sorting sequence)

  1. Use #. for numbering. (# = integer)
    1. Any number can be used to start an ordered list.
    2. Number of succeeding item is assigned automatically.
    3. Regardless of what number is set even duplicate numbers.
      1. Sub-sub-item with # = 0
      2. Fail to create a sub-sub-sub-item with # = 3.
  2. Succeeding item in the same ordered list with # = 0

    1. Sub-item by ordered list with # = 0
    • Insert an unordered list inside an ordered list.
    1. Sub-item by ordered list with # = 0
  3. Inserting only one blank line results in the same ordered list.

  • Create a new unordered list to start a new ordered list numbering.
    1. New ordered list created with # = 7
  1. Create a new ordered list with # = 8 by inserting two blank lines.
1. Use **`#.`** for numbering. (**`#`** = integer)
  5. Any number can be used to start an ordered list.
  5. Number of succeeding item is assigned automatically.
  5. Regardless of what number is set even duplicate numbers.
    0. Sub-sub-item with # = 0
      3. ***Fail*** to create a **sub-sub-sub-item** with # = 3.
0. Succeeding item in the same ordered list with # = 0
  0. Sub-item by ordered list with # = 0
  * Insert an unordered list inside an ordered list.
  0. Sub-item by ordered list with # = 0

8. Inserting only one blank line results in the same ordered list.
* Create a new unordered list to start a new ordered list numbering.
  7. New ordered list created with # = 7


8. Create a new ordered list with # = 8 by inserting two blank lines.

Mixed list

  1. Item with # = 0
    • Sub-item
    1. Sub-item with # = 8
    2. No sub-sub-item with # = 0
    • No sub-sub-item
  • Item
    • Sub-item
    1. Sub-item with # = 0
    • No sub-sub-item
    1. No sub-sub-item with # = 7
    2. No sub-sub-item with # = 7

Number of succeeding item in ordered list is still assigned automatically.

</br>

Notes

List following text can only be created as

Unordered list

Text

  • Unordered list created.
    • Sub-item

Ordered list with # = 1

Text

  1. Failed to create list with # = 0.
    1. Sub-item with # = 7
  2. Failed to create list with # = 3.
    1. Sub-item with # = 7
  3. Ordered list created with # = 1.
    1. Sub-item with # = 7

Or you can insert one blank line before creating a list.

  1. Ordered list created with # = 0.
    1. Sub-item with # = 7

If you want to use - without creating a list, add a \ before -.

  • Here is a list created with -.

- No list created.

</br>


Table

Ich komme aus Taiwan
col 1 is left-aligned italic
col 2 is centered bold
col 3 is right-aligned code
left center right
| *Ich*        | komme aus      | ***Taiwan*** |
| ------------ |:--------------:| ------------:|
| col 1 is     | left-aligned   | *italic*     |
| col 2 is     | centered       | **bold**     |
| col 3 is     | right-aligned  | `code`       |
| left         | center         | right        |

More concise writing.

*Ich* | komme aus | ***Taiwan***
- | :-: | -:
col 1 is | left-aligned | *italic*
col 2 is | centered | **bold**
col 3 is | right-aligned | `code`
left | center | right

</br>

Notes

  • The first row is always centered.
  • Colon ( : ) is used for alignment.
    • Left :- to align left. (default)
    • Right -: to align right.
    • Both :-: to align center.
  • The outermost vertical bar ( | ) is not absolutely necessary.

</br>


New Line

Line1
Hit <Enter> for a new line.
Or append </br> at the end of line.

Line1
Hit <**Enter**> for a new line.
Or append **`</br>`** at the end of line.
Line1 </br> Hit <**Enter**> for a new line. </br> Or append **`</br>`** at the end of line.

</br>


New Paragraph

Paragraph1

Hit <Enter> twice for a new paragraph.
New line

Or add a new line after appending </br> at the end of line.
New line

Paragraph1

Hit <**Enter**> twice for a new paragraph.
New line

Or add a new line after appending **`</br>`** at the end of line.
New line
Paragraph1 </br>
Hit <**Enter**> twice for a new paragraph. </br> New line </br>
Or add a new line after appending **`</br>`** at the end of line. </br> New line

</br>

Notes

  • Force more than one blank line by using </br>

</br>

New paragraph
New line

* Force more than one blank line by using **`</br>`**

</br>

New paragraph
New line

</br>


Horizontal Rule


---
***
___

</br>


Blockquote

Here is a blockquote.
- george16886

Here is a blockquote.
\- george16886

</br>

Notes

Once using the symbol >, you can continuously do writing and the whole paragraph would be in this blockquote.
Even if you make a new line without >.
Inline Markdown language is available in the blockquote, such as italic, bold, inline code, etc.

However, if you are creating a sub-title, list or horizontal rule, there must be > in the front of the line.

  1. Title (largest) is not allowed in a blockquote.
  2. ### Blockquote can also be inside a list.
    1. Sub-sub-item

To start a new blockquote, insert one blank line.

To make a blockquote inside a blockquote, use double >.

Once you are in a layer-2 blockquote, you can't use a layer-1 blockquote.

  • Unless you are using a list.
    • Sub-item

You can also start a layer-n blockquote directly by using n >.

>>> - Layer-9 blockquote

</br>


Block

Here is a block.
Don't worry, be happy!
Be YOURSFLF!
<!-- Add four spaces in the fornt of each line -->
    Here is a block.
    Don't worry, be happy!
    Be YOURSFLF!

</br>


Code

Inline code

int a = 0;

`int a = 0;`

int `a` = 0;

``int `a` = 0;``

Code block

var s = "JavaScript syntax highlighting";
alert(s);
``` Javascript 
var s = "JavaScript syntax highlighting";
alert(s);

## Code block with file name

``` Python demo.py
s = "Python syntax highlighting"
print s
``` Python demo.py
s = "Python syntax highlighting"
print s

</br>

## Notes
* Use **`` ` ``** *`inline code`* **`` ` ``** for inline code.
  * If you want to use **`` ` ``** inside code, use two **`` ` ``** for inline code instead of one.
* Use **`` ``` ``** *`(language)`* + *(new line) `code block`* + *(new line)* **`` ``` ``** for code clock.
  * Specify programming language after the starting **`` ``` ``**.
    * If no language indicated, no syntax highlighting. And the title of the code block would be **"Code"**.
  * Do not leave space after the ending **`` ``` ``**.

</br>

---

# Link

## Direct link

### https://george16886.nctu.me
``` Markdown
### https://george16886.nctu.me

URL link

### [URL link](https://george16886.nctu.me)

URL link with title (mouseover text)

### [URL link with title (mouseover text)](https://george16886.nctu.me "george16886's blog")

Relative path link

### [Relative path link](../../../../link)

Reference link

Reference link

### [Reference link][george16886's blog]

[george16886's blog]: https://george16886.nctu.me

Reference link using #

### [Reference link using `#`][1]

[1]: https://george16886.nctu.me

Reference link using # with title (mouseover text)

### [Reference link using `#` with title (mouseover text)][2]

[2]: https://george16886.nctu.me "george16886's blog"

Direct reference link

### [Direct reference link]

[Direct reference link]: https://george16886.nctu.me

</br>

Notes

  • Link and reference should be separated with a blank line.

</br>


Embedded Image

Direct link

URL link with title (mouseover text)

image_tag

![image_tag](https://bit.ly/3aVcEJV "pika cute")

Relative path link

image_tag

![image_tag](/uploads/images/friend_404.gif "404 ghost")

Reference link

Reference link with title (mouseover text)

image_tag

![image_tag][logo]

[logo]: https://bit.ly/2xceXtv "pika ball"

Reference link using #

image_tag

![image_tag][9]

[9]: https://bit.ly/3aVcEJV

Image with hyperlink

alt text

[![alt text](/uploads/images/travel.gif "德國鬼的180天交換計畫")](https://medium.com/%E5%BE%B7%E5%9C%8B%E9%AC%BC%E7%9A%84180%E5%A4%A9%E9%A4%8A%E6%88%90%E8%A8%88%E7%95%AB)

Resize image

Resize using HTML

image_tag

<img src="https://bit.ly/3aVcEJV" 
alt="image_tag" title="pika cute" width="320" height="240">

Resize using HEXO tag plugins

{% img [class names] https://bit.ly/2xceXtv 320 240 '"pika ball" "alt text"' %}

{% img [class names] https://bit.ly/2xceXtv 320 240 '"pika ball" "alt text"' %}

</br>

Notes

  • Adapt the method of link.
  • Animated GIF is supported.

</br>


Embedded Youtube Video

Direct link

image_tag

[![image_tag](https://bit.ly/2woblUN)](https://www.youtube.com/watch?v=xRZAHBs8OQI)

Resize using HTML

image_tag

<a href="https://www.youtube.com/watch?feature=player_embedded&v=xRZAHBs8OQI
" target="_blank"><img src="https://bit.ly/2woblUN" 
alt="image_tag" width="320" height="240" border="10" ></a>

HEXO tag plugins

{% youtube xRZAHBs8OQI %}

{% youtube xRZAHBs8OQI %}

</br>

Notes

</br>


Inline HTML

Example 1


Definition list
Is something people use sometimes.

Markdown in HTML
Does *not* work **very** well. Use HTML tags.
</dl>

<dl>
  <dt> Definition list </dt>
  <dd> Is something people use sometimes. </dd>

  <dt> Markdown in HTML </dt>
  <dd> Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>

Example 2

  1. Bird
  2. McHale
  3. Parish

<ol>
  <li> Bird </li>
  <li> McHale </li>
  <li> Parish </li>
</ol>

</br>


Text Alignment

Centered
<center> Centered </center>

Aligned left

<p align = "left"> Aligned left </p>

Aligned right

<p align = "right"> Aligned right </p>

</br>


Font Color


Green

<font color = green> Green </font>

Red

<font color = red> Red </font>

Blue

<font color = blue> Blue </font>


</br>


Font Size


Font size = 3

<font size = "3"> Font size = 3 </font>

Font size = 6

<font size ="6"> Font size = 6 </font>

​​
</br>


Font Face


Arial Black

<font face = "Arial Black"> Arial Black </font>

Calibri

<font face = "Calibri"> Calibri </font>

Droid Sans Mono

<font face = "Droid Sans Mono"> Droid Sans Mono </font>

</br>


Comment

Standard HTML tags

<!-- comment -->
<!-- mutli-line
comment -->

</br>


GitHub Flavored Markdown

Task list

  1. [x] This is a complete item.
  2. [ ] This is an incomplete item.
    • [ ] This is an incomplete sub-item.
    • [x] This is a complete sub-item
0. [x] This is a complete item.
0. [ ] This is an incomplete item.
  * [ ] This is an incomplete sub-item.
  * [x] This is a complete sub-item

</br>

Notes

  • Links, formatting, tags, @mentions, and #refs, are supported.
  • List syntax is required.

</br>


document.write( "");

#Markdown #notes #Cheatsheet









Related Posts

每日心得筆記 2020-06-16(二)

每日心得筆記 2020-06-16(二)

mkcert:讓你在 localhost 開發也能用 https

mkcert:讓你在 localhost 開發也能用 https

《鳥哥 Linux 私房菜:基礎篇》Chapter 06 - Linux 的檔案與目錄管

《鳥哥 Linux 私房菜:基礎篇》Chapter 06 - Linux 的檔案與目錄管



Comments