1. 程式人生 > 實用技巧 >Markdown基本語法及生成目錄結構的方法

Markdown基本語法及生成目錄結構的方法

Markdown是一種純文字格式的標記語言。通過簡單的標記語法,它可以使普通文字內容具有一定的格式。

一、標題

在想要設定為標題的文字前面加#來表示
一個#是一級標題,二個#是二級標題,以此類推。支援六級標題。

注:標準語法一般在#後跟個空格再寫文字。

示例:

# 這是一級標題
## 這是二級標題
### 這是三級標題
#### 這是四級標題
##### 這是五級標題
###### 這是六級標題

效果:

二、字型

加粗

要加粗的文字左右分別用兩個*號包起來

斜體

要傾斜的文字左右分別用一個*號包起來

斜體加粗

要傾斜和加粗的文字左右分別用三個*號包起來

刪除線

要加刪除線的文字左右分別用兩個~~號包起來

示例:

**這是加粗的文字**
*這是傾斜的文字*`
***這是斜體加粗的文字***
~~這是加刪除線的文字~~

效果:

三、引用

在引用的文字前加>即可。引用也可以巢狀,如加兩個>>三個>>>

示例:

> 這是引用的內容1
>> 這是引用的內容2
>>> 這是引用的內容3

效果:

四、分割線

三個或者三個以上的 - 或者 * 都可以。

示例:

---
----
***
*****

效果:

五、圖片

語法:

![圖片alt](圖片地址 "圖片title")

示例:

![百度](https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png "baidu")

效果:

六、超連結

語法:

[超連結名](超連結地址 "超連結title")

示例:

[百度](http://www.baidu.com "百度")

效果:

七、列表

1.無序列表

語法:

- 列表內容
+ 列表內容
* 列表內容

注意:- + * 跟內容之間都要有一個空格

示例:

- 列表內容
+ 列表內容
* 列表內容

效果:

2.有序列表

語法:

1. 列表內容
2. 列表內容
3. 列表內容

注意:序號跟內容之間要有空格

示例:

1. 列表內容
2. 列表內容
3. 列表內容

效果:

3.列表巢狀

語法:

* 列表1
   * 列表1.1
   * 列表1.2
   * 列表1.3
* 列表2
   * 列表2.1
   * 列表2.2
   * 列表2.3

上一級和下一級之間敲三個空格即可

示例:

* 列表1
   * 列表1.1
   * 列表1.2
   * 列表1.3
* 列表2
   * 列表2.1
   * 列表2.2
   * 列表2.3

效果:

八、表格

語法:

表頭|表頭|表頭
---|:--:|---:
內容|內容|內容
內容|內容|內容

第二行分割表頭和內容。
- 有一個就行,為了對齊,多加了幾個
文字預設居左
-兩邊加:表示文字居中
-右邊加:表示文字居右
注:原生的語法兩邊都要用 | 包起來。此處省略

示例:

|姓名|年齡|排行|
|--|:--:|--:|
甲|25|3
丙|27|1
乙|26|2

效果:

九、程式碼

語法:

單行程式碼:程式碼之間分別用一個反引號包起來

程式碼塊:程式碼之間分別用三個反引號包起來,且兩邊的反引號單獨佔一行

示例:

`console.log('單行程式碼塊')`
```
function fun(){
  console.log('多行程式碼塊');
}
fun();
```

效果:

十、流程圖

語法:

tag=>type: content:>url

tag就是元素名字,type是這個元素的型別,有6中型別,分別為:

  • start # 開始

  • end # 結束

  • operation # 操作

  • subroutine # 子程式

  • condition # 條件

  • inputoutput # 輸入或產出

url是一個連線,與框框中的文字相繫結,content就是在框框中要寫的內容,注意type後的冒號與文字之間一定要有個空格。

連線元素的語法:

用->來連線兩個元素,需要注意的是condition型別,因為他有yes和no兩個分支,所以要寫成

cond(yes)->e 
cond(no)->op

示例:

```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
```

效果:

十一、markdown生成目錄結構的方法:

示例:

```
project
│   README.md
│   file001.txt    
│
└───folder1
│   │   file011.txt
│   │   file012.txt
│   │
│   └───subfolder1
│       │   file111.txt
│       │   file112.txt
│       │   ...
│   
└───folder2
    │   file021.txt
    │   file022.txt
```

我們經常會看到上面這種【目錄&檔案結構】在頁面上非常整齊地輸出,下面來說一下怎麼這種生成目錄結構。

使用一個Node模組來自動完成這個任務:mddir

1.安裝mddir包

npm install mddir --save

2.開啟終端或命令提示符,並cd進入mddir /src資料夾

3.執行 node mddir "../../../"

示例:

```
$ cd ~/Documents/demo-project
$ pwd
Users/username/Documents/demo-project
$ npm install mddir --save
$ cd node_modules/mddir/src
$ pwd
Users/username/Documents/node_modules/mddir/src
$ ls
mddir.js
$ node mddir "../../../"
// Exports 'directoryList.md' in mddir/src folder
```

如果沒有指定路徑,mddir將預設為mddir/src資料夾之上上的三個資料夾(假設mddir安裝在:project/node_modules/mddir/src中)。

目前忽略node_modules和.git資料夾。

示例生成的markdown檔案結構'directoryList.md'

    |-- .bowerrc
    |-- .jshintrc
    |-- .jshintrc2
    |-- Gruntfile.js
    |-- README.md
    |-- bower.json
    |-- karma.conf.js
    |-- package.json
    |-- app
        |-- app.js
        |-- db.js
        |-- directoryList.md
        |-- index.html
        |-- mddir.js
        |-- routing.js
        |-- server.js
        |-- _api
            |-- api.groups.js
            |-- api.posts.js
            |-- api.users.js
            |-- api.widgets.js
        |-- _components
            |-- directives
                |-- directives.module.js
                |-- vendor
                    |-- directive.draganddrop.js
            |-- helpers
                |-- helpers.module.js
                |-- proprietary
                    |-- factory.actionDispatcher.js
            |-- services
                |-- services.cardTemplates.js
                |-- services.cards.js
                |-- services.groups.js
                |-- services.posts.js
                |-- services.users.js
                |-- services.widgets.js
        |-- _mocks
            |-- mocks.groups.js
            |-- mocks.posts.js
            |-- mocks.users.js
            |-- mocks.widgets.js

參考連結:

https://www.jianshu.com/p/191d1e21f7ed

https://www.jianshu.com/p/02a5a1bf1096

https://vimsky.com/article/3606.html