快速入门上手Markdown

第一次接触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个空格或者一个制表符 <kbd>Tab</kbd>键)即可。也可以使用两个(```)包裹一段代码,这样更为醒目,
    我经常使用,并且你可以指定代码的语言,也可以不指定
// 这里用括号包裹防止误认为代码块  
(```)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/
  [rb]: http://www.rb.com/

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

图片

  1. 基本语法,直接按照下方格式书写
[图片上传失败...(image-440225-1634889949303)]
[图片上传失败...(image-c0d9a0-1634889949303)]
  1. 高级语法,像网址那样使用变量
这个链接用 a 作为网址变量 [RB][a].
然后在文档的结尾为变量赋值(图片地址或图片网址)

  [a]: 图片地址或图片网址
  1. 没有办法指定图片的高度与宽度,如果你需要的话,你可以使用普通的<img>标签
<img src="" 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~ :)
转发请注明参考文章地址,非常感谢!!!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,142评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,298评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,068评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,081评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,099评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,071评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,990评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,832评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,274评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,488评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,649评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,378评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,979评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,625评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,643评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,545评论 2 352

推荐阅读更多精彩内容