乐趣区

关于markdown:快速入门上手Markdown

jiezi

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

当然，在咱们记录一些技术文档或者写技术博客的时候，也常常会头疼，如何写一篇技术文档，可能同时以好看的格局公布到多个博客平台呢？

Markdown就能够解决咱们疾速书写和多个平台适配的痛点，他能够用一些简略的标记符，来格式化你的文档，并且保障不同平台对立的格局

当然，因为各个平台的 Markdown 解析器 的配置不同，解析后的一些款式，比方字体粗细，超链接色彩，代码块色彩之类的，可能会稍有不同

能够说，Markdown就是为简略而生

什么是 Markdown？

  1. Markdown是一种轻量级标记语言，它容许人们应用易读易写的纯文本格式编写文档
  2. 他是由 John Gruber 在 2004 年创造创立
  3. 由 Markdown 编写的文档能够导出 HTML、Word、图像、PDF、Epub 等多种格局的文档
  4. Markdown编写的文档后缀为 .md 或.markdown`
  5. 留神!!!Markdown反对局部 Html 的语法，局部展现简单的内容能够用 Html 代码来写

Markdown 编辑器的抉择

因为我集体是从 js 开始接触代码世界，所以我抉择的第一个编辑器是 Hbuilder（留神官网曾经不提供更新版本下载），
不过目前它曾经降级版本到 HbuilderX，这不是一个专门的 Markdown 编辑器，
然而他的外部集成了插件具备间接编写 Markdown 的性能，就我集体而言我感觉非常适合写 Markdown 文档，不仅不耽搁写代码，
而且它的 Markdown 文本标注 的色彩十分合乎我的审美。当然萝卜青菜各有所爱，还有以下一些 Markdown 编译器 大家都能够试试

  1. 各大博客网站的编写都是反对 Markdown 语法的，所以能够间接在网站上写，如：github，csdn，开源中国，掘金，思否之类的平台

  2. 专门的 Markdown 编辑器，如：

    Mou
    MarkdownPad
    Typora
    Atom
    Haroopad
    SublimeText
    Cmd Markdown
    Byword
    CuteMarkEd
    Dillinger
    EpicEditor
    MarkdownEditor
    MarkPad
    Marxico

  3. 最初，大部分的编译器都是能够装置 Markdown 编译器 插件的，所以基本上能够间接在写代码的同时用 Markdown 写写技术文章哦

我罕用的一些语法

留神!!!这里是我本人平时写文档和技术博客罕用的一些 Markdown 标记，标注为我本人写文档应用的地位，不是这个标记的官网定义

# 大题目  
### 段落题目  
#### 非凡 tip（会加粗成为目录中的题目，慎用，我是因为橘黄色才用这个作 tip）1. 有序列表  
+ 无序列表  
> 援用（须要垂直间断应用）* 文字 * 歪斜
** 文字 ** 加粗
*** 文字 *** 加粗歪斜
[内部链接题目](内部链接地址 "题目") 内部链接，题目就是相似脚注，鼠标悬浮后显示的文字  
` 单行代码 ` 行内代码块   
```*2 多行代码块（留神这里是两排 ```，两头写代码即可）[锚链接题目](# 锚链接 id) +  <span id="# 锚链接 id"></span>  组合应用能够实现锚链接，在以后文章内跳转到指定地位

Markdown 语法大全

  1. 题目
  2. 段落
  3. 列表
  4. 援用
  5. 代码
  6. 链接
  7. 图片
  8. 表格
  9. 其余

<span id=”jumpId-title”></span>

题目

  1. 次要是用来写整个文档的目录构造的，须要留神的是各级题目的字体大小对应h1-h6
  2. 能够用下划线突出一下题目，不过我自己不喜爱这么标记，依据字符数量不同，标记线的长度不同
# 一级题目
## 二级题目
### 三级题目
#### 四级题目
##### 五级题目
###### 六级题目
---- 标记线

<span id=”jumpId-p”></span>

段落

  1. 在文字的开端增加两个空格或者下一行空一行，都能够实现 换行
  2. 应用 * 或者 _ 组合来实现加粗或者歪斜
* 斜体文本 *
_斜体文本_
** 粗体文本 **
__粗体文本__
*** 粗斜体文本 ***
___粗斜体文本___
  1. 应用上面这些符号都能够建设分割线，依据符号数量不同分割线长度不同
***
* * *
*****
- - -
----------
  1. 在文字的前后加上 ~ 或者 ~~ 能够实现删除线
~ 须要标注删除线的文字~
~~ 须要标注删除线的文字~~
  1. 让文字领有脚注，就是鼠标悬浮之后显示的文字
[^ 须要注明的文字]: 悬浮后显示的文字

<span id=”jumpId-list”></span>

列表

  1. 有序列表，间接用 1. 2. 3. 按程序标注上来即可，留神是数字加.
1. 第一项
2. 第二项
3. 第三项
  1. 无序列表，应用 * 或者 + 或者 - 按程序标注上来即可
* 第一项
* 第二项
* 第三项

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

- 第一项
- 第二项
- 第三项
  1. 嵌套列表，列表嵌套只需在子列表中的选项后面增加四个空格即可。留神列表下也能够应用 > 来援用相干内容，留神援用换行须要在开端加两个空格哦
1. 第一项：* 第一项嵌套的第一个元素  
    * 第一项嵌套的第二个元素  
2. 第二项：+ 第二项嵌套的第一个元素  
    + 第二项嵌套的第二个元素  
3. 第三项
    - 第三项嵌套的第一个元素  
    - 第三项嵌套的第二个元素  
4. 援用内容
    > 援用一（留神如果要换行就加两个空格，默认是不换行，会主动把上面援用内容拼接过去）> 援用二

<span id=”jumpId-use”></span>

援用

  1. 在段落结尾增加>，而后和段落之间要空一个空格。默认不换行，换行须要在开端增加两个空格。反对嵌套
> 援用一  
> 援用二  
> 援用三  

> 最外层
> > 第一层嵌套
> > > 第二层嵌套
  1. 区块中应用列表和列表中应用区块参考上一节开端
> 区块中应用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项

* 列表中应用区块
* 第一项
    > 援用一  
    > 援用二  
* 第二项

<span id=”jumpId-code”></span>

代码

  1. 如果是段落上的一个函数或片段的代码能够用反引号把它包起来（`）(貌似没法用两个反引号把一个反引号写成代码片段？HbuilderX 亲测不反对)
`code()` 函数
  1. 代码区块能够应用 4 个空格 或者一个制表符 Tab键）即可。也能够应用两个（`）包裹一段代码，这样更为醒目，
    我常常应用，并且你能够指定代码的语言，也能够不指定
// 这里用括号包裹避免误认为代码块  
(```)javascript
$(document).ready(function () {alert('RUNOOB');
});
(```)

<span id=”jumpId-link”></span>

链接

  1. 一般链接，间接按下方格局书写，有残缺格局和简介格局
// 残缺格局，能够重命名，另外可选外加题目，题目能够不写，题目相似脚注，悬浮显示文字  
[链接名称](链接地址 "链接题目")

// 简洁格局
< 链接题目 >
  1. 高级链接，咱们能够通过变量来设置一个链接，变量赋值在文档开端进行
这个链接用 1 作为网址变量 [Google][1]
这个链接用 abc123 作为网址变量 [Baidu][abc123]
这个链接用 runoob 作为网址变量 [Runoob][runoob]
而后在文档的结尾为变量赋值（网址）[1]: http://www.google.com/
  [abc123]: http://www.baidu.com/
  : http://www.rb.com/

<span id=”jumpId-picture”></span>

图片

  1. 根本语法，间接依照下方格局书写
![alt 属性文本](图片地址或图片网址)
![alt 属性文本](图片地址或图片网址 "可选题目")
  1. 高级语法，像网址那样应用变量
这个链接用 a 作为网址变量 [RB][a].
而后在文档的结尾为变量赋值（图片地址或图片网址）[a]: 图片地址或图片网址
  1. 没有方法指定图片的高度与宽度，如果你需要的话，你能够应用一般的 <img> 标签
<img src="http://static.rb.com/images/rb-logo.png" width="50%">

<span id=”jumpId-table”></span>

表格

  1. 制作表格应用 | 来分隔不同的单元格，应用 - 来分隔表头和其余行
|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

  1. 咱们能够设置表格的对齐形式

    • -: 设置内容和标题栏居右对齐
    • :- 设置内容和标题栏居左对齐
    • :-: 设置内容和标题栏居居中对齐
| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |
  1. 简单表格，如须要合并表头之类的，能够间接应用 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>

<span id=”jumpId-other”></span>

其余

  1. 反对 Html 代码

    例如：Html转义字符在行首增加空格来实现，&ensp;代表半角空格，&emsp;代表全角空格
    例如：借助 <br/> 来在表格中实现换行

  2. 用 \ 包裹来本义
  3. 局部高级 Markdown 编辑器反对应用 $$ 包裹来应用数学公式
  4. 局部高级 Markdown 编辑器反对流程图的编译和展现

参考文档一 ———— 菜鸟教程 Markdown 教程
参考文档二 ———— 几款支流好用的 markdown 编辑器介绍
参考文档三 ———— 对于 Markdown 的一些奇技淫巧

我是 fx67ll.com，如果您发现本文有什么谬误，欢送在评论区探讨斧正，感谢您的浏览！
如果您喜爱这篇文章，欢送拜访我的 本文 github 仓库地址，为我点一颗 Star，Thanks~ :)
转发请注明参考文章地址，非常感谢！！！

退出移动版