Markdown是一种类似于HTML又兼容HTML标签的标记语言。通常用作记录学习笔记和api文档,它在程序员中的工作中用途广泛,如果你现在还不会,赶紧学起来吧,学完了再去鄙视其他不会写markdown的程序员(反正我就是这么干的- - )。
经常上GitHub的程序员应该知道,在GitHub上浏览别人的代码仓库时,代码仓库下面会显示一些文本内容,项目根目录下有个README.md文件,这个文件主要是作为代码仓库的功能介绍和文件结构。
比如spring项目的代码仓库介绍如下:
Markdown为什么适合做学习基本和文档呢?除了TXT文件之外,我们最常用的文档格式如微软的word文档,但是word文档要排版,而且在Windows系统之外兼容性不好,其他的如PDF文档我们喜欢打开浏览,但是有几个愿意自己动手制作PDF文件呢?太复杂了对吧。HTML文件应该是最适合做文档的,浏览起来很方便。但是它同样跟PDF文件一样,制作成本太高,我们制作一个HTML文件,需要熟悉CSS样式,除了样式需要精心调整之外,可能还需要适配不同浏览器和操作系统。
Markdown相比Word/PDF/HTML文件最方便的地方是它让我们不用专注于样式代码,它会帮我们自动处理文本内容的排版问题。
这里我采用微软公司的vscode来编辑markdown文件,用其他工具的同学请自动忽略。
vscode安装markdown插件
在插件搜索框输入Markdown Preview Enhanced,点击install,安装完成重启vscode。
当然你也可以按照Markdown All in One,这个插件下载最多可能功能更强大,不过我就不折腾了,你们喜欢可以随便玩哈。
上面提到markdown类似于HTML标签语言,所以我们先来熟悉一下markdown的标签与语法。
首先,我们新建一个文件保存为md格式,先命名为test.md文件。然后点击vscode右上角的图标就可以打开md文件预览功能。如下图:
接着进入正题,开始编辑文件内容,慢慢熟悉语法规则:
1.标题
在HTML文件中,如果要显示不同层次的标题可以采用h1, h2,h3...等等标签来实现,在markdown中我们可以采用#
来表示标题,一级标题用#
,二级标题用##
,三级标题用###
...再往后面大家都那么聪明肯定懂了吧。
标题的使用方法
在md文件中编辑内容如下:
# Markdown快速入门(文档标题)
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
效果如下:
Markdown快速入门(文档标题)
二级标题
三级标题
四级标题
五级标题
我们上面安装的插件还提供了很多功能,比如在浏览器打开或者保存为图片PDF文件等等,同学们可以自行研究。
2.列表
无序列表
用+,-, *来表示列表选项。
注意用空格来间隔,不然没有效果。
用-来表示
- cpp
- java
- javascript
显示效果:
- cpp
- java
- javascript
也可以用+来表示:
+ cpp
+ java
+ javascript
- cpp
- java
- javascript
也可以用*来表示:
* cpp
* java
* javascript
- cpp
- java
- javascript
有序列表
用数字编号开头,请注意这里必须用.
加空格连接。
1. cpp
2. java
3. javascript
效果如下:
- cpp
- java
- javascript
3.文本样式
显示粗体文字
**这一段是粗体字**
显示效果如下:
这一段是粗体字
显示斜体文字
*这一段是斜体字*
显示效果如下:
这一段是斜体字
4.引用
我们在写文档时可能引用其他人的语句,或者突出一段文本内容。
比如在上一节里我们书写标题时,需要主要到以下要点:
#
,##
,###
表示不同的标题层次,如果需要显示预期的效果,我们需要在#
后面加上空格,多几个空格不要紧,至少要一个。
以上的文字样式叫做引用,在markdown里面用>
来表示,当然>
后面有个空格字符,需要注意。
文件中编辑内容如下:
# Markdown快速入门(文档标题)
## 如何引用一段文本内容
鲁迅先生有句话大家应该都记得:
> 这世上本没有路,走的人多了也就有了路。
预览效果如下:
这世上本没有路,走的人多了也就有了路。
注意:
>
是可以嵌套的,有兴趣可以自己嵌套玩。
5.插入代码块
假设大家都是程序员,写博客干巴巴地讲理论肯定没意思,肯定要贴代码才行,怎么显示一段代码呢?了解HTML的同学肯定知道在HTML中引用代码使用<code>这里贴代码</code>
来显示一段代码。在markdown中如何贴代码呢?
采用```引用代码(不是引号也不是逗号,而是键盘上ESC和Table中间的那个键)
具体用法是在一段代码的前面和后面插入```符号,比如想在markdown中显示以下一段javascript代码:
console.log('hello world')
支持关键字高亮
以上的效果很简陋,如果我们希望根据代码对各自的关键字进行高亮显示,该如何做呢?
方法就是在```符号之后加上语言类别关键字,如果是js代码加上javascript, 如果是Python代码加上python,如果是java代码加上java,如果是C/C++代码加上cpp,根据不同语法显示不同关键字的效果如下图:
6.插入图片
有时看技术博客,都是一坨坨的代码和文字看着也很累的,这时候我们需要放几张图片缓解一下
- 在线加载网络图片
这种方式能显示比如http/https站点的图片,加载图片的速度依赖于当前的网络环境。
加载网络图片的语法如下:
![名称](网络图片地址)
比如以上的的图片链接地址是https://upload-images.jianshu.io/upload_images/20553365-e4649e27e312cee1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240,那么我们再markdown中如何显示这种图片呢?
- 显示本地图片
我们都希望图片加载的速度能快一点,或者有时候会放一些简单的图片放在本地目录,这时候图片的加载速度肯定快许多。
加载本地图片的语法如下:
![名称](本地图片路径)
- 如果你当前md文件的同目录下有个image.png图片,那么显示这种图片应该这么写:
![image.png](image.png)
也可以是
![image.png](./image.png)
./
表示当前路径的意思。
- 如果你当前md文件的上级目录叫做images,image.png图片放在那个目录,那么应该是以下这种写法:
![image.png](../images/image.png)
7.插入网站链接
有时候我们需要在markdown中贴上一些网站的链接,这样会显得自己很专业是吧。
比如在文档中我们就这样写:
想了解这方面的更多信息,请自行百度。
大家都知道百度是个网站,希望点击百度两个字可以直接打开网站,这时候我们怎么把链接地址关联上去呢?
插入网站链接的用法如下
[显示的文字](链接地址)
要想实现上面的功能很简单,编辑md文件内容如下:
想了解这方面的更多信息,请自行[百度](www.baidu.com)。
简单吧?
8.显示表格
markdown中支持用table标签来显示表格,不过通常情况下我们可以采用更加简洁的表达方式来显示表格。
显示简单表格
输入以下内容:
| 第一列 | 第二列| 第三列 |
| ------ | ------ | ------ |
| 第一列1 | 第二列2 | 第三列3 |
|第一列2 | 第二列2 | 第三列3 |
第一列 | 第二列 | 第三列 |
---|---|---|
第一列1 | 第二列2 | 第三列3 |
第一列2 | 第二列2 | 第三列3 |
表格对齐方式
在第二行中冒号的位置来表示对齐方式,比如左对齐为:---,右对齐---:,居中对齐则是:---:
- 文本左对齐方式:
| 第一列 | 第二列| 第三列 |
| :------ | :------ | :------ |
| 第一列1 | 第二列2 | 第三列3 |
|第一列2 | 第二列2 | 第三列3 |
第一列 | 第二列 | 第三列 |
---|---|---|
第一列1 | 第二列2 | 第三列3 |
第一列2 | 第二列2 | 第三列3 |
- 文本右对齐方式:
| 第一列 | 第二列| 第三列 |
| ------: | ------: | ------: |
| 第一列1 | 第二列2 | 第三列3 |
|第一列2 | 第二列2 | 第三列3 |
第一列 | 第二列 | 第三列 |
---|---|---|
第一列1 | 第二列2 | 第三列3 |
第一列2 | 第二列2 | 第三列3 |
- 文本居中方式:
| 第一列 | 第二列| 第三列 |
| :------: | :------: | :------: |
| 第一列1 | 第二列2 | 第三列3 |
|第一列2 | 第二列2 | 第三列3 |
第一列 | 第二列 | 第三列 |
---|---|---|
第一列1 | 第二列2 | 第三列3 |
第一列2 | 第二列2 | 第三列3 |
如果需要更加丰富的表格,建议使用table来表示
9.支持HTML标签
前面我们提到,markdown本身支持HTML标签的,如果需要采用复杂的样式,可以使用HTML标签来实现,比如复杂表格用table能实现更加丰富的样式。
我们看看简单的HTML标签在markdown中的应用。