markdown語法測試集合


這篇文章包含markdown語法基本的內容, 目的是放在自己的博客園上, 通過開發者控制台快速選中,
從而自定義自己博客園markdown樣式.當然本文也可以當markdown語法學習之用.

在markdown里強制換行是在末尾添加2個空格+1個回車.
在markdown里可以使用\對特殊符號進行轉義.

1. 標題

語法

# This is an <h1> tag
## This is an <h2> tag
### This is an <h3> tag
#### This is an <h4> tag

實例

This is an h1 tag

This is an h2 tag

This is an h3 tag

This is an h4 tag

2. 強調和斜體

語法

*This text will be italic*
_This will also be italic_

**This text will be bold**
__This will also be bold__

(個人不喜歡2個下划線中間包含的內容被斜體, 會和網址沖突, 我會在自定義博客園樣式中去除這個樣式.)

實例

This text will not be italic
This will also not be italic

This text will be bold
This will also be bold

3. 有序列表和無序列表

語法

* Item 1
* Item 2
* Item 3

1. Item 1
2. Item 2
3. Item 3

實例

  • Item 1
  • Item 2
  • Item 3
  1. Item 1
  2. Item 2
  3. Item 3

4. 圖片

語法

![img-name](img-url)

實例

圖片測試

5. 超鏈接

語法

[link-name](link-url)

實例

阿勝4K

6. 引用

語法

> 引用本意是引用別人的話之類  
> 但我個人喜歡把引用當成"注意"使用  

實例

If you please draw me a sheep!
不想當將軍的士兵, 不是好士兵.

7. 單行代碼

語法

`This is an inline code.`

實例

同樣的單行代碼, 我經常用來顯示特殊名詞

8. 多行代碼

語法

​```javascript
for (var i=0; i<100; i++) {
    console.log("hello world" + i);
}
​```

實例

for (var i=0; i<100; i++) {
    console.log("hello world" + i);
}

也可以通過縮進來顯示代碼, 下面是示例:

console.loe("Hello_World");

本人樣式參考

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Page title</title>
</head>
<body>
	
</body>
</html>

/*
    這是我應用在博客園上的Markdown樣式.
    https://www.cnblogs.com/asheng2016
*/


/* 文章標題樣式(這個不是markdown里的標題) */
#topics .postTitle a {
    color: #169fe6;
}

/* 普通文字樣式 */
#cnblogs_post_body p {
    margin: 18px auto;
    color: #000;
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 16px;
    text-indent: 0;
}

/* 標題樣式 */
#cnblogs_post_body h1 {
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
}

#cnblogs_post_body h2 {
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.5;
    margin: 20px 0;
}

#cnblogs_post_body h3 {
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    margin: 10px 0;
}

#cnblogs_post_body h4 {
    font-family: Consolas, "Microsoft YaHei", monospace;
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
}
/* 標題樣式設置結束 */

/* 去除雙下划線斜體樣式 */
em {
    font-style: normal;
    color: #000;
}

/* 無序列表 */
#cnblogs_post_body ul li {
    font-family: Consolas, "Microsoft YaHei", monospace;
    color: #000;
    font-size: 16px;
    list-style-type: disc;
}

/* 有序列表 */
#cnblogs_post_body ol li {
    font-family: Consolas, "Microsoft YaHei", monospace;
    color: #000;
    font-size: 16px;
    list-style-type: decimal;
}

/* 超鏈接 */
#cnblogs_post_body a:link {
    text-decoration: none;
    color: #002C99;
}

/* 引用背景 */
#topics .postBody blockquote {
    background: #fff3d4;
    border: none;
    border-left: 5px solid #f6b73c;
    margin: 0;
    padding-left: 10px;
}

/* 單行代碼 */
.cnblogs-markdown code {
    font-family: Consolas, "Microsoft YaHei", monospace !important;
    font-size: 16px!important;
    line-height: 20px;
    background-color: #f5f5f5!important;
    border: 1px solid #ccc!important;
    padding: 0 5px!important;
    border-radius: 3px!important;
    line-height: 1.8;
    margin: 1px 5px;
    vertical-align: middle;
    display: inline-block;
}

/* 多行代碼, 引用 */
.cnblogs-markdown .hljs {
    font-family: Consolas, "Microsoft YaHei", monospace !important;
    font-size: 16px!important;
    line-height: 1.5!important;
    padding: 5px!important;
}

參考鏈接

本文的markdown源代碼在這里
https://guides.github.com/features/mastering-markdown/
https://help.github.com/articles/basic-writing-and-formatting-syntax/

自定義博客園Markdown樣式.超簡單!
https://www.cnblogs.com/asheng2016/p/7464296.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM