如何优雅的使用markdown来写博客

如何优雅的使用markdown来写博客

• 重构写作方式

• 学会Markdown基本语法

• 实践Markdown语法，写出优质文章

---

一、认识Markdown

1.1 Markdown简介

Markdown尤其适用于编写说明文档，这得益于其文档在很多技术平台可以通用，此外Markdown也非常适合技术博客，这是因为Markdown可以使得说明部分和代码变得非常清晰易读。

Markdown 是一种==轻量级标记语言==，它允许人们使用易读易写的纯文本格式编写文档。使用Markdown 编写的文档可以轻松地导出为HTML、Word、图像、PDF、Epub 等多种格式的文档。由于Markdown的轻量化、易读易写特性，并对图片、图表以及数学公式都支持，使得许多网站都支持使用Markdown 来撰写文档或者发表文章。例如GitHub、、StackOverflow、有道云笔记等等。

5.jpeg

1.2Markdown编辑器

按照Markdown编辑器的使用环境，我们将其归为以下三类：

• 平台集成工具：各大在线博客、社区平台自带的写作工具，比如CSDN、、博客园等。
• 独立软件：下载到机器上使用的独立产品，可以编辑本地文件，比如Typora、MarkdownText、Haroopad等。
• 插件：它本身是不能独立使用的，必须借助支持此插件的编辑器，使得现有的编辑器具有Markdown的功能，例如VScode、SubText等。

这三类软件分别面向三类Markdown用户，可以根据需求自主选择。

1.3编辑器推荐

1. Typora

2. VScode+插件 all in one

3. onenote+插件oneMark

二、Markdown语法

2.1结构类操作

2.1.1多级标题

标题在Markdown语法中有两种实现方式：

1. 第一种实现方式：

   采用类Atx形式，在行首插入1到6个#,以实现对应的1到6级标题，Markdown最多支持六级标题，例如：

其支持快捷键操作：

• ctrl+1-6实现快速设置对应的1到6级标题
• ctrl+0用于清除标题格式

2. 第二种实现方式

采用类Setext形式，即用底线形式，利用任意数量的=和-实现一级标题和二级标题效果。

[图片上传失败...(image-b9b9ea-1664252858411)]

2.1.2有序列表

在.和文字中间需要有一个空格。此外，可以用\.来取消显示为列表（用反斜杠进行转义）。

有序列表是使用数字+.来表示，语法如下：

1. 打开冰箱

   1. 插电

   2. 开机

   3. 开门

2. 把大象放进去

3. 关闭冰箱

其支持快捷键操作：

• 降级快捷键：Tab
• 升级快捷键：Shift+Tab

显示效果如图：

[图片上传失败...(image-906964-1664252858411)]

2.1.3无序列表

无序列表可以使用*、+、-作为列表标记，其语法格式如下：

- 蔬菜
    - 青菜
    - 菠菜
    - 大白菜
- 水果
  - 苹果
  - 葡萄
  - 桃子
- 肉
    - 猪肉
    - 牛肉

显示效果如图：

[图片上传失败...(image-865ad9-1664252858411)]

快捷键操作：ctrl+shift+]

2.1.4任务列表

To-Do任务列表是一种非常受欢迎的时间管理工具，它适用于工作计划、个人生活、以及家庭学习。Markdown的To-Do List任务列表是由无序列表，复选框，图标几种功能的组合。在无序列表-、+、*后加一个空格再使用中括号[]申明复选框。在中括号中写入x,便可实现选中效果。其标准的语法格式如下：

- [ ] 刷牙
- [ ] 洗脸
- [ ] 钥匙
- [x] 钱包

显示效果如图：

[图片上传失败...(image-125e66-1664252858411)]

在使用的过程中需要注意的是：

1. 复选框只有跟在无序列表后才可以被显示
2. 中括号[]里只能是空格或者x,否则不会被渲染成复选框标签

2.1.5列表的嵌套

2.1.5.1嵌套列表

一个制表符等同于四个空格的效果，在有使用空格缩进的情况下,使用制表符效率比较高，另外在编程过程中空格和制表符不要混合使用，不然出错找原因很麻烦的

1. 无序列表嵌套无序列表：

   子项目需要按TAB键已实现缩进四个空格，再根据无序列表的语法即可达到嵌套的效果，其标准写法如下所示：

   - This is the first list item
       - lndented item
       - lndented item
       - lndented item
   -  Here is the second list item
   -  And here is the third list item
   

   显示效果如下：

   [图片上传失败...(image-89f27e-1664252858411)]

2. 有序列表嵌套有序列表

   有序列表嵌套有序列表可参见2.1.2有序列表

3. 有序列表嵌套无序列表

   有序列表和无序列表可以相互嵌套，其标准语法如下：

   1. First item
   2. Second item
   3. Third item
       - lndented item
       - lndented item
   4. Fourth item
   

    显示效果如下:
   

4. 无序列表嵌套有序列表

   有序列表和无序列表可以交错使用,其标准语法如下:

   - lndented item
   - lndented item
   - lndented item
       1. first item
       2. second item
       3. third item
   - lndented item
   

   显示效果如下：

   [图片上传失败...(image-ab4430-1664252858411)]

2.1.5.2嵌套段落

当我们需要保留列表连续性，同时又想在列表中添加另外一种元素时，这个时候需要将该元素缩进四个空格或一个制表符，例如：

- This is the first list item
- Here is the second list item
    I need to add another paragraph below the second list item
- And here is the third list item

显示效果如下：

[图片上传失败...(image-af1dfd-1664252858411)]

2.1.5.3嵌套代码块

代码块通常采用四个空格或者一个制表符进行缩进，一旦它们被放进列表时，需要将他们缩进八个空格或者两个制表符。由于代码块语法本身占据四个空格，故，只需要先再分行时按Tab缩进四个空格，再正常使用代码块语法即可，其标准语法如下：

1. Open the file
2. Find the following code block on Line 8:
    #include 
    int main(void)
    {
        printf("Hello,WOrld!")
        return 0;
    }
3. Don't forget Combined with ';'

显示效果：

[图片上传失败...(image-14c4e8-1664252858411)]

2.1.5.4嵌套图片

1. Open the file
2. Find the following picture:
    ![](https://louis-typora.oss-cn-nanjing.aliyuncs.com/img_for_typora/12.jpg)
3. Close the file   

显示效果如图：

[图片上传失败...(image-f8f9c2-1664252858411)]

2.1.5.5嵌套引用块

引用块语法会在下面给出详细介绍，尽管其本身语法足够简单

- This is the first list item
-  Here is the second list item
    > A blockquote would look great below the second list item
-  And here is the third list item

显示效果如下：

[图片上传失败...(image-202e16-1664252858411)]

2.1.6表格

在Markdown中，使用|来分割不同列单元格,使用三个或多个连字符-来创建每列的标题，其中可以通过在标题行中的连字符的左侧，右侧或两侧添加冒号（:），将列中的文本对齐到左侧，右侧或中心：

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

显示效果：

Syntax	Description	Test Text
Header	Title	Here's this
Paragraph	Text	And more

使用连字符和管道创建表会导致创建一个表格会比较复杂。为了加快该过程，建议使用快捷键进行快捷操作，其快捷键：ctrl+T

2.3代码类操作

2.3.1行内代码

反引号`需要在英文状态下键盘数字1的最左边

在Markdown中，行内代码使用反引号包裹，其标准语法如下：

`java`是一门面向对象编程语言，不仅吸收了`C++`语言的各种优点，还摒弃了`C++`里让人难以理解的多继承、指针等概念，因此`Java`语言具有功能强大和简单易用两大特征。

显示效果如图所示：

[图片上传失败...(image-a7a5b0-1664252858411)]

快捷键操作：ctrl+``Shift+\

2.3.2代码块

代码块创建方式可以三个连续的```也可以用三个连续的~~~其标准语法如下：

``` c
#include 
    int main(void)
    {
        printf("Hello,WOrld!")
        return 0;
    }

显示效果如下：

[图片上传失败...(image-67e13f-1664252858411)]

快捷键：Ctrl+Shift+K

倘若需要在代码块内显示行号，以Typora为例，在文件→偏好设置→Markdown→勾选【显示行号】→再重启Typora即可。

2.4元素类操作

2.4.1字体

2.4.1.1字体样式

Markdown本身并不支持修改字体、大小、颜色、高亮和底色，但是由于Markdown是基于HTML实现的，所以我们可以借助HTML实现文字样式设置。

1. 字体和大小

   用于规定文字的尺寸大小，取值从1到7，浏览器默认值为3:

   我是黑体字
   我是微软雅黑
   我是fantasy
   我是微软雅黑
   我是黑体字
   我是黑体字
   

    显示效果：
   
    我是黑体字
   
    我是微软雅黑
   
    我是fantasy
   
    我是微软雅黑
   
    我是黑体字
   
    我是黑体字
   

   颜色名和对应的十六进制颜色值可查颜色列表。

2. 黄色高亮

• 使用HTML

  语法：我是需要高亮强调的内容

  显示效果：我是需要高亮强调的内容

• 利用Typora提供的扩展语法

  语法：==需要高亮的内容==

  显示效果：==需要高亮强调的内容==

3. 背景色

   我们借助table、tr、td等表格标签的bgcolor属性来实现文字底色，其语法如下：

   背景色的设置是按照十六进制颜色值：#0099ff
   
   背景色的设置是按照颜色名：LightSteelBlue
   

   显示效果：

   背景色的设置是按照十六进制颜色值：#0099ff

   
   

   背景色的设置是按照颜色名：LightSteelBlue

2.4.1.2斜体

在Markdown中，如果要用斜体显示文本，在单词或者短语前后各添加一个星号*或者下划线_。其标准语法如下：

*我是需要斜体的内容*
_我是需要斜体的内容_

显示效果如下：

我是需要斜体的内容
我是需要斜体的内容

快捷键：Ctrl+I

2.4.1.3粗体

粗体和斜体同样都是被用于强调重要性，语法也类似：

**我是需要加粗强调的内容**
__我是需要加粗强调的内容__

显示效果：

我是需要加粗强调的内容
我是需要加粗强调的内容

快捷键：Ctrl+B

2.4.1.4下划线

下划线是是属于HTML语法中的，但是由于Markdown支持html语法，所以我们在使用的过程可以通过标签包围的方式，实现下划线的效果，标准语法如下：

这是需要下划线标记的内容

显示效果：这是需要下划线标记的内容

快捷键：Ctrl+U

2.4.1.5删除线

在使用删除线语法时我们通常把要删除的内容写出，再在文字和结尾加上~~，其语法如下：

~~我是需要被删除的内容~~

显示效果：我是需要被删除的内容

快捷键：Alt+Shift+5

2.4.1.6上标和下标

Markdown原生语法并不支持上标和下标，但是Typora内置了上标和下标的扩展语法，使得我们可以较为轻松的使用它。

• 第一种实现方式（扩展语法）：

  水：H~2~0           面积：m^2^
  双氧水：H~2~0~2~     体积：m^3^

显示效果：

水	H20
双氧水	H202
面积	m2
体积	m3

• 第二种实现方式（HTML标签）：

  水：H20
  面积：m2
  双氧水：H202
  体积：m3
  

  显示效果：

  水：H₂0 面积：m²
  双氧水：H₂0₂ 体积：m³

• 第三种实现方式（公式块）：

    $$
      下标：a_1 , 上标：b^2
    $$
  

  显示效果：
  

2.4.1.7表情符号

通常有两种方法将表情符号添加到Markdown文件中，分别是直接从Emojipedia 等来源复制表情符号并将其粘贴到文档中，或者键入表情符号短代码来插入表情符号。值得注意的是，并非所有的Markdown应用程序支持。下面给出一些常用的表情符号用法：

人物：:smile: :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile:  :cry: :triumph: :heart_eyes: :relaxed: :sunglasses: :weary: :smiling_imp:
自然：:sunny: :umbrella: :snowflake: :cyclone: :pig: :frog: :dog: :chicken:
物体：：gift_heart：：alarm_clock：:bulb: :pill: :bear: :calender:
符号：:one: :arrow_up: :arrow_left: :accept: :underage:

显示效果：

人物：:smile: :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile: :cry: :triumph: :heart_eyes: :relaxed: :sunglasses: :weary::smiling_imp:

自然：:sunny: :umbrella: :snowflake: :cyclone: :pig: :frog: :dog: :chicken:

物体：：gift_heart：：alarm_clock：:bulb: :pill: :bear: :calender:
符号：:one: :arrow_up: :arrow_left: :accept: :underage:

更多更全的表情符号段代码可参见Markdown表情大全

2.4.2图片

Markdown文件不支持内嵌图片，所有图片都是以外部链接的方式插入，其本质是引用而非包含图片本身。因为Markdown文件和图片之间是相对较弱的引用关系，一旦文档中引用的那个图片本身存放在本地或者网络上的位置发生了变化，或者引用的那个图片不存在了，那么Markdown文档就无法正确显示，这也是我们在使用Markdown的过程中一大痛点。

在Markdown中插入图片的最基础的语法：

[图片上传失败...(image-5bd35b-1664252858411)]

快捷键：Ctrl+Shift+I

• Alternative text：图片的Alternative文本，即替代文本，用来描述图片的关键词，可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文字。

• link：可以是图片的本地地址、网址。其中本地地址包括绝对地址和相对地址。

• "optional title"：鼠标悬置于图片上会出现的标题文字，可以选择不写。

举例说明一下，例如[图片上传失败...(image-c484c1-1664252858411)]，鼠标再图片上悬停就会显示文字“蜡笔小新”

如果图片不可以正常显示，就显示替代文字“电脑壁纸”

Markdown通常由三种方式插入图片，下面分别介绍这三种方式：

1. 插入本地图片

• 相对路径：本地图片的相对路径是指图片相对于正在编写的Markdown文件的一个相对位置关系：可以是需要引用的图片在当前Markdown文件的上一层目录，也可以是需要引用的图片在当前Markdown文件的下一层目录，但是我们为了避免写错，也方便理解，统一让图片和MD文件处以同一目录下。通过Typora进行设置，可以在Markdown文件所在的目录下自动生成.assets文件夹，此时只需将图片保存在此文件夹下即可。

  Typora设置：文件 —> 偏好设置 —> 选择【复制图片到./$(filename).assets文件夹】 —> 勾选【优先使用相对路径】—> 重启Typora

  [图片上传失败...(image-22d255-1664252858411)]

  经过设置后，每次新建一个MD文件时，会在MD文件所在文件夹目录中自动创建一个同名的.assets文件复制的图片会自动保存到其中。

  [图片上传失败...(image-c67e7c-1664252858411)]

• 绝对路径：

  文件的「绝对路径地址」是以盘符（Windows系统）或者/号（MacOS或Linux）作为开头的路径地址，选中图片按住shift键右击，点击复制为路径的选项即可获取图片的「绝对路径地址」。

  [图片上传失败...(image-f4e4d8-1664252858411)]

2. 插入网络图片

   Markdown中「引用」本地图片的话，本地图片的存放在硬盘上的位置不能发生变化，同时如果要将Markdown文档分享给别人时，也要一并将图片打包发送，且必须使用相对路径。这使得我们写的文件分享起来操作繁琐，要避免这种情况的话，我们可以采用插入网络图片的方式。获取网络图片地址通常有两种形式，一种是在互联网中找到想要的图片并复制其图片地址，另外一种是使用图床，将想要的图片下载并存放到自己本地的硬盘上，再将其上传至图床，然后获取图片的网络地址。

   示例：[图片上传失败...(image-66f53a-1664252858411)]

   [图片上传失败...(image-b2deae-1664252858411)]

   「图床」就是用来存放图片的网络上的一台服务器，一般「图床」都会提供方便的上传图片、查看图片、删除图片等管理图片的功能。

3. 把图片存入Markdown文件

   用base64转码工具把图片转成一段字符串，然后把字符串填到基础格式中链接的那个位置。

   • base64：顾名思义，就是包括小写字母a-z、大写字母A-Z、数字0-9、符号"+"、"/"一共64个字符的字符集，（另加一个“=”，实际是65个字符，至于为什么还会有一个“="，这个后面再说）。任何符号都可以转换成这个字符集中的字符，这个转换过程就叫做base64编码。

   • base64编码：将图片转换成二进制序列，然后按每6个二进制位为一组，分成若干组，如果不足6位，则低位补0。每6位组成一个新的字节，高位补00，构成一个新的二进制序列，最后根据base64索引表中的值找到对应的字符。

   • 由于将图片编码后会产生大量字符，故基础用法和高级语法不做展示，详情可参考Markdown插入图片的完美解决方法 - (jianshu.com)

     [图片上传失败...(image-696e1d-1664252858411)]

2.4.3超链接

超链接是超级链接的简称。只要单击超链接就可以自动跳转到超链接所链接的目标地址，所以在创建超链接之前，必须首先确定链接的载体和链接的目标地址，按照连接路径的不同，超链接一般分为以下三种类型：内部链接、锚点链接和外部链接。。

在Typora中只有外部链接和锚点链接有意义，下面着重这两种形式进行说明。

2.4.3.1外部链接

所谓外部链接，是当我们单击之后可以跳转到指定的网站目标地址。Markdown 超链接的基本语法如下：

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

按照链接的载体，我们通常又将超链接分成以下三种常用形式：

• 文本链接

  示例：欢迎来到我的[博客](https://codeworker007.github.io/ “Louis Blog”)

  需要注意的是，链接title是当鼠标悬停在链接上时会出现的文字，这个title是可选的，它放在圆括号中链接地址后面，跟链接地址要有空格分隔。

• 图片链接

  此外我们还可以对图片进行超链接，实现点击图片即可跳转，只需要用到HTML的和标签即可：

  有的Markdown编辑器还支持更简单的操作，至少Typora是支持的，只需要将链接代码套在图片代码外边即可：

   [![](图片地址)](超链接地址)
  

  示例：[[图片上传失败...(image-15cb92-1664252858411)]](Louis&Holly - 这是一起为未来努力奋斗的痕迹 (codeworker007.github.io))

• 网址链接

  我们也可以使用尖括号使得URL或者Email地址变成可点击的链接。像这样：

  
  <
  

  显示效果如下：

  https://codeworker007.github.io/

当一个超链接在文章中反复出现时，可以使用全局声明的形式，减少文章编写的工作量，也使得文章可读性大大增强。全局声明超链接的用法如下：

####全局声明超链接

欢迎来到我的[博客][Blog]，我的[博客][Blog]就是我的世界！

[Blog]:https://codeworker007.github.io/

其中[博客][Blog]是全局声明超链接的第一部分
而[Blog]:https://codeworker007.github.io/则是第二部分

显示效果：

欢迎来到我的博客，我的博客就是我的世界！

可以将链接的第二部分放在Markdown文档中的任何位置。通常我们会选择将它们放在出现的段落之后或者文档的末尾

快捷键操作：Ctrl+K

在Typora中，链接跳转需要按住Ctrl再鼠标单击即可

2.4.3.2锚点链接

所谓锚点链接是指通过点击锚点可以跳转到该锚点所指定的位置，可以帮助读者快速定位，方便浏览和阅读。

创建锚点链接十分简单，具体实现方法如下：

• 定义位置标记

  先定义想让锚点去指定的位置标记（即这行代码：

  )，其中“jump”是自定义的位置名称，可以随意修改。

• 设置锚点链接

  将定义好的位置标记放到要跳转到的地方。 然后把锚点链接（即#jump）放在需要放置的地方，当点击这个锚点链接时就会跳到位置标记所在的位置。

具体语法示例如下：

定义位置标记：### 三、快捷键汇总

设置锚点链接：参考[快捷键汇总](#jump)

示例效果：参考快捷键汇总

2.4.4引用

引用通常放在文章的开头，即从一开始抛出某个观点，后面再用大篇幅去做详细的解读。块引用有很好的聚焦功能，但是整篇文章中我们需要注意引用的占比，尽量不要使用太多，否则会分散读者的注意力。其基本语法如下：

> "时间就像海绵里的水，只要愿挤，总还是有的。"---鲁迅

显示效果如下：

"时间就像海绵里的水，只要愿挤，总还是有的。"---鲁迅

引用同样是可以嵌套的，在一个引用中，可以包含新一层的引用，只需要行首块多加一个大于号>，其用法如下：

### 引用的嵌套

需要注意的是，大于号后面需要一个空格

> 这是一个块引用
>
> > 这是一个二层块引用
>
> 返回到第一层

当然我们也可以直接使用多层块引用

> > > > > > > 直接的七层块引用

显示效果如下：

这是一个块引用

这是一个二层块引用

返回到第一层

当然我们也可以直接使用多层块引用

直接的七层块引用

快捷键：Ctrl+Shift+Q

2.4.5水平分割线

分隔线是用一条明显的横线，来划分文章的上下两个部分，从而使排版变得美观，保持页面的平衡，引导读者的注意力。常见用在标题与正文间的分隔和不同内容间的分隔。

1. 在 Markdown 文件中，连续的三个星号 *、减号 -、下划线 _」都会被渲染成分割线，其基础用法如下：

   ### 下面是三类分割线
   
   
   使用「星号」作为分割线
   
   ***
   
   使用「减号」作为分割线
   
   ---
   
   使用「下划线」作为分割线
   ___
   
   

   显示效果：

   使用「星号」作为分割线

   ---

   使用「减号」作为分割线

   ---

   使用「下划线」作为分割线

   ---

2. 修改分割线的样式

   • 修改分割线的粗细
   • 修改分割线的颜色
   • 修改分割线的类型

三、快捷键汇总

功能	macOS快捷键	Windows快捷键	Windows备注
多级列表	Cmd + 1~6	Ctrl + 1~6
有序列表	Cmd + Opt + 0	Ctrl + Shift + [
无序列表	Cmd + Opt + U	Ctrl + Shift + ]
任务列表	Cmd + Opt + X	无	- [ ]
增加列表缩进	Tab	Tab
减少列表缩进	Shift + Tab	Shift + Tab
表格插入行	Cmd + Return	无	鼠标右键操作
表格删除行	Cmd + Shift + Delete	无	鼠标右键操作
行内代码	Cmd + Shift + 反引号	Ctrl + Shift + 反引号
代码块	Cmd + Opt + C	Ctrl + Shift + K
插入图片	Ctrl + Cmd + I	Ctrl + Shift + I
插入超链接	Cmd + K	Ctrl + K
水平分割线	Cmd + Shift + -	无	---
引用	Cmd + Shift + Q	Ctrl + Shift + Q
粗体	Cmd + B	Ctrl + B
斜体	Cmd + I	Ctrl + I
高亮	Cmd + Shift + H	无	==高亮内容==
大纲视图	Ctrl + Cmd + 1	Ctrl + Shift + 1
源代码模式	Cmd + /	Ctrl + /
专注模式	F8	F8
打字机模式	F9	F9

四、最后的话

经过一番波折，肝了几天，终于写完了！

第一版敲完的时候，我已经困得不行了，我迷迷糊糊爬到电脑桌仍然没忘记要保存文件，然后放心的爬回去继续睡

第二天果不其然，出问题了，大概率由于系统更新原因把我固态整坏了，无法开机，在我最终祭出重装系统这个大杀器的时候，由于固态出问题电脑识别不到固态硬盘，我只能把系统放在机械硬盘，当我意识到这个问题的严重性时，一切都晚了！！！

所有数据都没了，游戏、软件、配置环境都没了，彻底清空了，后续恢复也没恢复出来任何对我有价值的文件，更重要的是肝了几天这个教程也没了，彻底心态崩了！

摆烂了几天，最后还是和自己和解，又肝了几天，才有了现在的版本，这次给了我一个最大的教训那就是：

千万千万不要乱更新电脑系统！！！！！

数据一定一定要备份备份备份！！！！！