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