[开发工具] 快速入门上手Markdown

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 开发工具 -> 快速入门上手Markdown -> 正文阅读

[开发工具]快速入门上手Markdown

第一次接触Markdown是写代码初期看很多大佬的github，他们的项目一定会有一份文件叫Readme.md的文件
他们由一些简单美观的符号和汉字字母组成，编译之后成为一篇简单直观的文档
深入了解之后我才知道，原来还有这样一种神奇的标记语言，可以写出这么好看的文档

当然，在我们记录一些技术文档或者写技术博客的时候，也经常会头疼，如何写一篇技术文档，能够同时以美观的格式发布到多个博客平台呢？

Markdown就可以解决我们快速书写和多个平台适配的痛点，他可以用一些简单的标记符，来格式化你的文档，并且保证不同平台统一的格式

当然，由于各个平台的Markdown解析器的配置不同，解析后的一些样式，比如字体粗细，超链接颜色，代码块颜色之类的，可能会稍有不同

可以说，Markdown就是为简单而生

什么是Markdown？

Markdown是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档
他是由John Gruber在2004年发明创建
由Markdown编写的文档可以导出HTML 、Word、图像、PDF、Epub等多种格式的文档
Markdown编写的文档后缀为.md或.markdown`
注意!!!Markdown支持部分Html的语法，部分展示复杂的内容可以用Html代码来写

Markdown编辑器的选择

因为我个人是从js开始接触代码世界，所以我选择的第一个编辑器是Hbuilder（注意官网已经不提供更新版本下载），
不过目前它已经升级版本到HbuilderX，这不是一个专门的Markdown编辑器，
但是他的内部集成了插件具有直接编写Markdown的功能，就我个人而言我觉得非常适合写Markdown文档，不仅不耽误写代码，
而且它的Markdown文本标注的颜色非常符合我的审美。当然萝卜青菜各有所爱，还有以下一些Markdown编译器大家都可以试试

各大博客网站的编写都是支持Markdown语法的，所以可以直接在网站上写，如：github，csdn，开源中国，掘金，思否之类的平台
专门的Markdown编辑器，如：

Mou
MarkdownPad
Typora
Atom
Haroopad
SublimeText
Cmd Markdown
Byword
CuteMarkEd
Dillinger
EpicEditor
MarkdownEditor
MarkPad
Marxico
最后，大部分的编译器都是可以安装Markdown编译器插件的，所以基本上可以直接在写代码的同时用Markdown写写技术文章哦

我常用的一些语法

***注意!!!***这里是我自己平时写文档和技术博客常用的一些Markdown标记，标注为我自己写文档使用的位置，不是这个标记的官方定义

# 大标题  
### 段落标题  
#### 特殊tip（会加粗成为目录中的标题，慎用，我是因为橘黄色才用这个作tip）
1. 有序列表  
+ 无序列表  
> 引用（需要垂直连续使用）
*文字* 倾斜
**文字** 加粗
***文字*** 加粗倾斜
[外部链接标题](外部链接地址 "标题") 外部链接，标题就是类似脚注，鼠标悬浮后显示的文字  
`单行代码` 行内代码块   
```*2 多行代码块（注意这里是两排```，中间写代码即可）
[锚链接标题](#锚链接id) +  <span id="#锚链接id"></span>  组合使用可以完成锚链接，在当前文章内跳转到指定位置

标题

主要是用来写整个文档的目录结构的，需要注意的是各级标题的字体大小对应h1-h6
可以用下划线突出一下标题，不过我本人不喜欢这么标记，根据字符数量不同，标记线的长度不同

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
---- 标记线

段落

在文字的末尾添加两个空格或者下一行空一行，都可以实现***换行***
使用*或者_组合来实现加粗或者倾斜

*斜体文本*
_斜体文本_
**粗体文本**
__粗体文本__
***粗斜体文本***
___粗斜体文本___

使用下面这些符号都可以建立分割线，根据符号数量不同分割线长度不同

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

在文字的前后加上~或者~~可以实现删除线

~需要标注删除线的文字~
~~需要标注删除线的文字~~

让文字拥有脚注，就是鼠标悬浮之后显示的文字

[^需要注明的文字]: 悬浮后显示的文字

列表

有序列表，直接用1. 2. 3.按顺序标注下去即可，注意是数字加.

1. 第一项
2. 第二项
3. 第三项

无序列表，使用*或者+或者-按顺序标注下去即可

* 第一项
* 第二项
* 第三项

+ 第一项
+ 第二项
+ 第三项

- 第一项
- 第二项
- 第三项

嵌套列表，列表嵌套只需在子列表中的选项前面添加四个空格即可。注意列表下也可以使用>来引用相关内容，注意引用换行需要在末尾加两个空格哦

1. 第一项：
    * 第一项嵌套的第一个元素  
    * 第一项嵌套的第二个元素  
2. 第二项：
    + 第二项嵌套的第一个元素  
    + 第二项嵌套的第二个元素  
3. 第三项
	- 第三项嵌套的第一个元素  
	- 第三项嵌套的第二个元素  
4. 引用内容
	> 引用一（注意如果要换行就加两个空格，默认是不换行，会自动把下面引用内容拼接过来）
	> 引用二

引用

在段落开头添加>，然后和段落之间要空一个空格。默认不换行，换行需要在末尾添加两个空格。支持嵌套

> 引用一  
> 引用二  
> 引用三  

> 最外层
> > 第一层嵌套
> > > 第二层嵌套

区块中使用列表和列表中使用区块参考上一节末尾

> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项

* 列表中使用区块
* 第一项
    > 引用一  
    > 引用二  
* 第二项

代码

如果是段落上的一个函数或片段的代码可以用反引号把它包起来（`）(貌似没法用两个反引号把一个反引号写成代码片段？HbuilderX亲测不支持)

`code()` 函数

代码区块可以使用4个空格或者一个制表符 Tab键）即可。也可以使用两个（```）包裹一段代码，这样更为醒目，
我经常使用，并且你可以指定代码的语言，也可以不指定

// 这里用括号包裹防止误认为代码块  
(```)javascript
$(document).ready(function () {
    alert('RUNOOB');
});
(```)

链接

普通链接，直接按下方格式书写，有完整格式和简介格式

// 完整格式，可以重命名，另外可选外加标题，标题可以不写，标题类似脚注，悬浮显示文字  
[链接名称](链接地址 "链接标题")

// 简洁格式
<链接标题>

高级链接，我们可以通过变量来设置一个链接，变量赋值在文档末尾进行

这个链接用 1 作为网址变量 [Google][1]
这个链接用 abc123 作为网址变量 [Baidu][abc123]
这个链接用 runoob 作为网址变量 [Runoob][runoob]
然后在文档的结尾为变量赋值（网址）

  [1]: http://www.google.com/
  [abc123]: http://www.baidu.com/
  [rb]: http://www.rb.com/

图片

基本语法，直接按照下方格式书写

![alt 属性文本](图片地址或图片网址)
![alt 属性文本](图片地址或图片网址 "可选标题")

高级语法，像网址那样使用变量

这个链接用 a 作为网址变量 [RB][a].
然后在文档的结尾为变量赋值（图片地址或图片网址）

  [a]: 图片地址或图片网址

没有办法指定图片的高度与宽度，如果你需要的话，你可以使用普通的<img>标签

<img src="http://static.rb.com/images/rb-logo.png" width="50%">

表格

制作表格使用|来分隔不同的单元格，使用-来分隔表头和其他行

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

我们可以设置表格的对齐方式
- -: 设置内容和标题栏居右对齐
- :- 设置内容和标题栏居左对齐
- :-: 设置内容和标题栏居居中对齐

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

复杂表格，如需要合并表头之类的，可以直接使用Html中提供的表格

<table>
	<tr>
        <th colspan="3">js-pratice</th>
    </tr>
	<tr>
	    <th>一级目录</th>
	    <th>二级目录</th>
	    <th>描述</th>  
	</tr >
	<tr >
	    <td rowspan="3">Array</td>
	    <td>Basic</td>
	    <td>数组基本操作</td>
	</tr>
	<tr>
	    <td>Repeat</td>
	    <td>数组去重操作</td>
	</tr>
	<tr>
	    <td>Sort</td>
	    <td>数组排序操作</td>
	</tr>
	<tr>
	    <td >Date</td>
	    <td>Date</td>
	    <td>日期对象操作</td>
	</tr>
	<tr>
	    <td >Inherit</td>
	    <td >Inherit</td>
	    <td >继承对象操作</td>
	</tr>
	<tr>
	    <td >Promise</td>
	    <td >Promise</td>
	    <td >Promise对象操作</td>
	</tr>
</table>

其他

支持Html代码

例如：Html转义字符在行首添加空格来实现，&ensp;代表半角空格，&emsp;代表全角空格
例如：借助<br/>来在表格中实现换行
用\包裹来转义
部分高级Markdown编辑器支持使用$$包裹来使用数学公式
部分高级Markdown编辑器支持流程图的编译和展示