Markdown基本语法及生成目录结构的方法

  • A+
所属分类:Web前端
摘要

Markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。

Markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。

一、标题

在想要设置为标题的文字前面加#来表示
一个#是一级标题,二个#是二级标题,以此类推。支持六级标题。

注:标准语法一般在#后跟个空格再写文字。

示例:

# 这是一级标题 ## 这是二级标题 ### 这是三级标题 #### 这是四级标题 ##### 这是五级标题 ###### 这是六级标题

效果:

Markdown基本语法及生成目录结构的方法

二、字体

加粗

要加粗的文字左右分别用两个*号包起来

斜体

要倾斜的文字左右分别用一个*号包起来

斜体加粗

要倾斜和加粗的文字左右分别用三个*号包起来

删除线

要加删除线的文字左右分别用两个~~号包起来

示例:

**这是加粗的文字** *这是倾斜的文字*` ***这是斜体加粗的文字*** ~~这是加删除线的文字~~

效果:

Markdown基本语法及生成目录结构的方法

三、引用

在引用的文字前加>即可。引用也可以嵌套,如加两个>>三个>>>

示例:

> 这是引用的内容1 >> 这是引用的内容2 >>> 这是引用的内容3

效果:

Markdown基本语法及生成目录结构的方法

四、分割线

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

示例:

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

效果:

Markdown基本语法及生成目录结构的方法

五、图片

语法:

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

示例:

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

效果:

Markdown基本语法及生成目录结构的方法

六、超链接

语法:

[超链接名](超链接地址 "超链接title")

示例:

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

效果:

Markdown基本语法及生成目录结构的方法

七、列表

1.无序列表

语法:

- 列表内容 + 列表内容 * 列表内容  注意:- + * 跟内容之间都要有一个空格

示例:

- 列表内容 + 列表内容 * 列表内容

效果:

Markdown基本语法及生成目录结构的方法

2.有序列表

语法:

1. 列表内容 2. 列表内容 3. 列表内容  注意:序号跟内容之间要有空格

示例:

1. 列表内容 2. 列表内容 3. 列表内容

效果:

Markdown基本语法及生成目录结构的方法

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

效果:

Markdown基本语法及生成目录结构的方法

八、表格

语法:

表头|表头|表头 ---|:--:|---: 内容|内容|内容 内容|内容|内容  第二行分割表头和内容。 - 有一个就行,为了对齐,多加了几个 文字默认居左 -两边加:表示文字居中 -右边加:表示文字居右 注:原生的语法两边都要用 | 包起来。此处省略

示例:

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

效果:

Markdown基本语法及生成目录结构的方法

九、代码

语法:

单行代码:代码之间分别用一个反引号包起来

代码块:代码之间分别用三个反引号包起来,且两边的反引号单独占一行

示例:

`console.log('单行代码块')` ``` function fun(){   console.log('多行代码块'); } fun(); ```

效果:

Markdown基本语法及生成目录结构的方法

十、流程图

语法:

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基本语法及生成目录结构的方法

十一、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