Markdown快速入门

Markdown是一种类似于HTML又兼容HTML标签的标记语言。通常用作记录学习笔记和api文档,它在程序员中的工作中用途广泛,如果你现在还不会,赶紧学起来吧,学完了再去鄙视其他不会写markdown的程序员(反正我就是这么干的- - )。

经常上GitHub的程序员应该知道,在GitHub上浏览别人的代码仓库时,代码仓库下面会显示一些文本内容,项目根目录下有个README.md文件,这个文件主要是作为代码仓库的功能介绍和文件结构。

比如spring项目的代码仓库介绍如下:

image

Markdown为什么适合做学习基本和文档呢?除了TXT文件之外,我们最常用的文档格式如微软的word文档,但是word文档要排版,而且在Windows系统之外兼容性不好,其他的如PDF文档我们喜欢打开浏览,但是有几个愿意自己动手制作PDF文件呢?太复杂了对吧。HTML文件应该是最适合做文档的,浏览起来很方便。但是它同样跟PDF文件一样,制作成本太高,我们制作一个HTML文件,需要熟悉CSS样式,除了样式需要精心调整之外,可能还需要适配不同浏览器和操作系统。

Markdown相比Word/PDF/HTML文件最方便的地方是它让我们不用专注于样式代码,它会帮我们自动处理文本内容的排版问题。

这里我采用微软公司的vscode来编辑markdown文件,用其他工具的同学请自动忽略。

vscode安装markdown插件

在插件搜索框输入Markdown Preview Enhanced,点击install,安装完成重启vscode。

image

当然你也可以按照Markdown All in One,这个插件下载最多可能功能更强大,不过我就不折腾了,你们喜欢可以随便玩哈。

上面提到markdown类似于HTML标签语言,所以我们先来熟悉一下markdown的标签与语法。

首先,我们新建一个文件保存为md格式,先命名为test.md文件。然后点击vscode右上角的图标就可以打开md文件预览功能。如下图:

image0.png

接着进入正题,开始编辑文件内容,慢慢熟悉语法规则:

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

效果如下:

  1. cpp
  2. java
  3. 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,根据不同语法显示不同关键字的效果如下图:

image6.png

6.插入图片

有时看技术博客,都是一坨坨的代码和文字看着也很累的,这时候我们需要放几张图片缓解一下

美女李沁
  • 在线加载网络图片
    这种方式能显示比如http/https站点的图片,加载图片的速度依赖于当前的网络环境。

加载网络图片的语法如下:

![名称](网络图片地址)

比如以上的的图片链接地址是https://upload-images.jianshu.io/upload_images/20553365-e4649e27e312cee1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240,那么我们再markdown中如何显示这种图片呢?

image7.png
  • 显示本地图片
    我们都希望图片加载的速度能快一点,或者有时候会放一些简单的图片放在本地目录,这时候图片的加载速度肯定快许多。

加载本地图片的语法如下:

![名称](本地图片路径)

  • 如果你当前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)。
image8.png

简单吧?

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中的应用。

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