给想学Markdown的你的一个简单的Markdown语法教程

这篇文章是对我所知道的常用、兼容性较好的Markdown语法的一个简单的总结,文中所有的语法在Typora编辑器和简书上都可以正确显示,如有错漏之处,烦请指正。

什么是Markdown?

我觉得对HTML比较熟悉的同学可能会很容易地回答出这个问题——Markdown其实就是一个轻量级、用来编写文档的更易用的HTML。

当然,对于没有基础的同学,可以暂时这么认为:Markdown是一门标记语言,可以算是简化版的Word,但是你不需要为了设置各种格式而用鼠标点来点去了,一切格式的控制都像HTML一样,用代码就可以完成。

Markdown文件的扩展名是.md,建文件的时候不要建错了。

注意:Markdown的各种符号都是英文符,尤其要注意圆括号也是英文的圆括号。

Markdown编辑器推荐

在开始学习之前,肯定需要一份趁手的工具。

Markdown最好用专门编辑Markdown的编辑器来写。这里推荐几个我比较喜欢的Markdown编辑器,在学习Markdown语法之前可以先了解一下它们:

Typora

说到Markdown编辑器,肯定首推Typora了,用过的人都知道它有多好用,而且还支持写HTML,而且颜值非常高,还支持换主题。我这篇教程就是使用Typora写出来的。

Typora跟绝大多数左边编辑右边预览的Markdown编辑器都不同,是实时全屏预览的——你打完之后,立马就可以看到效果,看起来跟Word一样,却比Word简洁的多。如果不满意,也可以进源代码模式再去改,当然有些格式也是可以直接改的。

Typora还带大纲功能,真的是十分方便,我用过的Markdown编辑器里除了带目录插件的VSCode和语雀之外还没见过有哪个可以实时生成大纲的。

最重要的是:Typora是跨平台的!跨平台!跨平台!跨平台!重要的事情说三遍!带Linux玩的都是好朋友!

Visual Studio Code

没错,大名鼎鼎的VSCode也是可以写Markdown的(好像没有VSCode做不到的事情),而且语法高亮还挺完备的,相关插件也有很多。个人感觉使用体验仅次于Typora。

推荐装一个Markdown Preview Enhanced插件,这样就可以实时预览了,还有个神器Markdown All in One也很好用,但是需要额外记一些快捷键。强烈建议装一个markdownlint做语法规范检查,毕竟Markdown的编码规范还是挺重要的。

使用体验上,除了不是实时全屏预览以外,使用体验跟Typora几乎没什么差别,就是VSCode的使用体验。

最重要的是:VSCode也是跨平台的!跨平台!跨平台!跨平台!重要的事情说三遍!带Linux玩的都是好朋友!

简书

了解我的人应该都知道我在简书上写了多少东西。客观来说,作为在线的编辑器,虽然没有语法高亮,但是简书还是挺不错的,容错能力很强(比如标题的#号后面不打空格、段内换行不打空格这种不规范的写法都能正确识别),实时预览也做得很不错。很多时候有些比较短的文章我不想在本地开Typora写,就直接在简书上写了,还是挺舒服的。

最主要的还是简书自带图床,不用为把图片保存在哪里而发愁。

另外,简书的广告比CSDN少多了,界面也是我喜欢的风格,这也是我推荐它而不是CSDN的原因。

简书也支持富文本。

当然,简书也是跨平台的!毕竟Web应用从来都不会受平台限制,只要有浏览器就能访问。

Md2All

官网:http://md.aclickall.com/

这个东西比较冷门,本来的作用是将Markdown格式转换为富文本,但是单纯用来编辑Markdown也是挺不错的,如果你对CSS比较熟悉的话,你还可以把它生成的富文本变得非常漂亮。

不支持云同步,写完之后记得保存到本地。

最大的缺点就是不带语法高亮了。坦白来说,写Markdown没语法高亮是真的难受。

印象笔记/为知笔记

说到有云同步功能的,除了本来就是Web应用、自带云同步的简书就是这两个了吧。这两个作为笔记类的软件,也是很出名的。

虽然印象笔记是最近才有的Markdown功能,但是语法高亮还是挺不错的,比为知笔记舒服一些,也可以实时预览,我发在简书上那篇Maven学习笔记就是用印象笔记写的。为知笔记不是很推荐,没高亮也没实时预览。

但是印象笔记那个Markdown。。。也是有够难受的,支持很有限,而且……真的太丑了,比不上Typora不说,毕竟人家太无敌了,但是连VSCode甚至Markdown Pad都比不上,就有点说不过去了……

总之这俩不建议用,想要云同步的话直接用简书就行了,还顺便开通了个个人博客。当然你也可以“曲线救国”,用坚果云、iCloud、OneDrive做云同步。比较邪门的玩法还可以在GitHub上建一个仓库存你的笔记(论GitHub的~~错误~~正确用法)。

想看正经推荐的到这里就可以往下翻去看教程了,以下几个都是不正经推荐。

Markdown Pad

Windows独享。

我18年入门Markdown的时候使用的第一个编辑器,可以说是麻雀虽小五脏俱全吧,比较简陋,但是功能还是比较完善的。

一个很大的亮点就是自带图床了,对图片很友好,毕竟Markdown最大的短板应该就是图片了。

可以试试,但是不推荐日常使用。

Xcode

macOS独享。

~~这是你没见过的船新玩法。~~

一开始我以为这么玩的都是大佬,但是macOS默认打开Markdown文件的方式居然真的是Xcode,真是无力吐槽了。。。

不过客观上来讲,除了没实时预览,Xcode写Markdown感觉还是挺不错的,毕竟语法高亮比较完备,颜值也是真的高。虽然本身是个跟Visual Studio一样的超重量级的IDE,但是平常使用的话还是感觉不大到。

~~真的会有人日常用这玩意写Markdown吗……~~

Vim

macOS/Linux独享,Windows有移植版本不过巨难用。

~~这是你没见过的船新玩法*2。~~

嗯,不用多说,玩Vim的都是大佬。

反正我玩不动,各种命令和快捷键都快记疯了,也就写代码的时候开个Vim模拟器玩玩了。

但是有一说一,Vim带语法高亮,确实可以写Markdown。

标题

Markdown一共支持六级标题,与HTML的<h1><h6>作用相同。

写法:是第几级标题就在前面写几个##后面打一个空格,然后再跟上标题内容。

一级标题还有一种比较冷门的写法,就是在标题行的下一行打-,几个都可以。Typora需要进入源代码模式才能打出。因为实在太麻烦了,所以这种写法不建议大家用,用刚才说的#就可以了。

不打空格的话大多数编辑器识别不了,但也有能识别的,比如简书和Markdown Pad,Typora老版本好像也可以。但是出于标准、规范而言,大家还是应该打一个空格。

注意:标题前后都应该有一个空行。

例如:

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

效果:

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

注意:有的编辑器只支持四级标题(例如语雀),所以建议大家最好不要使用超过四级标题。

注意2:严格意义上,一篇Markdown只可以有一个一级标题,但是看了许多人的Markdown,遵守这个规定的人实在是不多啊~~~(反正我也不遵守)~~

正文

Markdown的正文与HTML的<p>标签类似。但是在Markdown里不用任何标识符,直接写就是一个段落。

注意:严格意义上讲,Markdown直接打一个回车并不是换行。它的换行方式有两种:

换段落

两个段落之间空出一行,就相当于另起一段。

Markdown:

this is a paragraph

this is another paragraph

相当于HTML:

<p>
  this is a paragraph
</p>
<p>
  this is another paragraph
</p>

效果:

this is a paragraph

this is another paragraph

注意:有的Markdown编辑器按回车默认换段落,例如Typora,有的就不会,例如简书(一个回车默认识别为段内换行)。

注意2:Markdown里打多少个回车都只识别为一个,所以打一个就够了。

换行

段落内换行的方式是一行后接两个(有的编辑器好像需要四个)空格,再接一个回车。

这两个空格加一个回车的作用相当于HTML的<br>标签。

但是有的编辑器,只打一个回车也能被识别为段内换行,比如Typora(需要在源代码模式下)和简书。

例如:

this is a line  
this is another line

相当于HTML:

<p>
  this is a line<br>this is another line
</p>

效果:

this is a line
this is another line

注意:

目前绝大多数的编辑器都支持把单独一个回车视为段内换行,例如简书和Typora(需要进入源代码模式)。不过大家还是应该在需要段内换行的时候在行的末尾打至少两个空格。

引用

Markdown的引用是非常简单的,只要在引用行的开头打一个>,再跟一个空格,这一行就变成引用了。

相当于HTML的<blockquote>标签。

例如:

> 这是一段引用

相当于HTML:

<blockquote>这是一段引用</blockquote>

效果:

这是一段引用

列表

注意:按照规范,列表与段落、标题之间应该空一行。

注意2:列表项之间不需要多空一行,也不需要在列表项的末尾打空格换行。列表项的每一项是自动独立成一行的。

有序列表

有序列表的写法很简单,跟Word一样,就是数字加上一个英文的.,再接一个空格。

相当于HTML的<ol>+<li>

例如:

1. first
2. second

相当于HTML:

<ol>
  <li>first</li>
  <li>second</li>
</ol>

效果:

  1. first
  2. second

无序列表

Markdown的无序列表打法不止一种,这里只介绍最常用的两种:-后跟一个空格或者+后跟一个空格。两者可以混用,我一般用+加一个空格的打法。

相当于HTML的<ul>+<li>

例如:

- 123
+ 123

相当于HTML:

<ul>
  <li>123</li>
  <li>123</li>
</ul>

效果:

  • 123
  • 123

任务列表

任务列表的打法相对复杂些,是- [ ]后跟一个空格。注意在Typora等实时预览的编辑器里,打出的顺序是:

  1. 先打出-[](方括号中间和减号后面无空格),然后后面打一个空格
  2. 方括号中间加一个空格
  3. 减号与左方括号之间加一个空格

打钩的任务列表的方括号中间是一个x,就是小写的x,没有空格。

相当于HTML<form>里的<input type="checkbox">,打钩的就是有checked属性的。

例如:

- [ ] 未完成
- [x] 已完成

相当于HTML:

<form>
  <input type="checkbox" id="checkbox">
  <label for="checkbox">未完成</label>
  <br>
  <input type="checkbox" id="checkbox_checked" checked>
  <label for="checkbox_checked">已完成</label>
</form>

效果:

  • [ ] 未完成
  • [x] 已完成

注意:有的编辑器在打有序列表和无序列表时不跟空格也可以识别,比如简书和Markdown Pad,但是绝大多数都是无法识别的,所以建议大家按照标准,在数字和符号后面跟一个空格。

加粗

非常简单,用**包裹要加粗的内容就可以了。

相当于HTML的<strong>

例如:

在Java中,被标识为final的类**不能被继承**。

相当于HTML:

在Java中,被标识为final的类<srong>不能被继承</strong>。

效果:

在Java中,被标识为final的类不能被继承

斜体

与加粗打法很像,只不过斜体是打一个*而加粗是两个。

相当于HTML的<i>

例如:

*我是斜的*

相当于HTML:

<i>我是斜的</i>

效果:

我是斜的

删除线

删除线的打法也非常简单,使用两个~包裹要画删除线的部分就可以了。

相当于HTML的<strike>

例如:

~~看完这篇文章说不定你就可以入门HTML了~~

相当于HTML:

<strike>看完这篇文章说不定你就可以入门HTML了</strike>

效果:

~~看完这篇文章说不定你就可以入门HTML了~~

行内代码/专有名词

这个名字是我自己起的,因为我实在不知道它叫啥。。。

这个东西一般用来标记专有名词,或者一些简单的代码。

打法很简单,就是用两个`(就是Esc键下面,跟~在一起的那个,在英文下直接按就可以打出这个了。这个符号的名字其实叫“反引号”)把要标记的部分包裹起来就行了。

相当于HTML的<code>

例如:

`Java`是世界上最好的语言

相当于HTML:

<code>Java</code>是世界上最好的语言

效果:

Java是世界上最好的语言

代码块

代码块也有两种打法,各有各的优缺点。

注意:代码块前后都要与段落之间有一个空行。

第一种

第一种打法是三个`(就是刚才打行内代码时用到的那个,三个~也是可以的)加上你代码的语言名称,然后在代码结束的地方再打三个。这也是我最常用的打法。

相当于HTML的<pre>

例如:

​```Java
package site.wendev.hello;

public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("Hello, World!");
	}
}
​```

相当于HTML:

<pre>
package site.wendev.hello;

public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("Hello, World!");
	}
}
</pre>

效果:

package site.wendev.hello;

public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("Hello, World!");
	}
}

注意:有的Markdown编辑器会自动补全结束的三个`,比如Typora,但绝大多数都不会,需要你自己把它打上。

第二种

这一种比较小众,打起来也比较麻烦,不过我刚入门的时候用的是这一种打法。

这种打法就是代码块所在的行前面先打四个空格,再打代码。Typora需要进入源代码模式才能打出来,相对来说Markdown Pad打这种会方便些。

例如:

    #include <iostream>
    using namespace std;

    int main() {
      cout << "Hello, World!" << endl;
      
      return 0;
    }

同样相当于HTML的<pre>标签。

效果:

#include <iostream>
using namespace std;

int main() {
  cout << "Hello, World!" << endl;
  
  return 0;
}

因为这种打法太麻烦了,也不便于代码的批量复制粘贴,所以不建议大家使用。

超链接

超链接以及接下来要说的图片可能对刚学的同学来说有点难理解,但是不用担心,对照着HTML来是很简单的。

超链接的打法是[](),其中方括号内为超链接的文字,圆括号内是超链接的地址。

注意这个方括号和圆括号都是英文的。

相当于HTML的<a>标签,圆括号里的是<a>标签的href属性,方括号里的是<a>标签的内容。

例如:

[我的简书](https://www.jianshu.com/u/dc63550214af)

相当于HTML:

<a href="https://www.jianshu.com/u/dc63550214af">我的简书</a>

效果:

我的简书

图片

图片就是超链接前加上一个英文的!。方括号内为图片的图注,圆括号内为图片的网络地址或者本地地址。

相当于HTML的<img>标签,圆括号里的是src属性,方括号里的是alt属性。

例如:

![我的首页效果图](https://upload-images.jianshu.io/upload_images/15800372-81b1c3f89eb4b9c2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

相当于HTML:

<img src="https://upload-images.jianshu.io/upload_images/15800372-81b1c3f89eb4b9c2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="我的首页效果图">

效果:

我的首页效果图

表格

表格是最复杂的,也是最劝退新人的,所以我们放在最后来讲。不过没关系,掌握了以后你也可以很轻松地打出来。

表格相当于HTML的<table>

因为表格的组成比较复杂,我们分块来讲。

表格的打法有很多种,这里介绍我最常用的一种。

注意:表格也要跟正文之间空出一行。

表头

表头的打法是:

thead|thead|thead
-----|-----|-----

相当于HTML的<thead>

上面的打法相当于HTML的:

<thead>
	<tr>
    <td>thead</td>
    <td>thead</td>
    <td>thead</td>
  </tr>
</thead>

表头的第一行是表头的内容,相互之间用|分隔开,|的个数是表格的列数减1。

然后紧接着一行是-|的组合,就是将第一行表头的内容换成-,几个都可以,这一行是表头与表格内容的分界线。

表格内容

表格内容的打法与表头一样,都是:

tbody|tbody|tbody
tbody|tbody|tbody

两列之间用一个|分隔开,行之间没有分隔符,也不用多打空格来换行。

相当于HTML的<tbody>

上面的写法相当于HTML的:

	<tbody>
  	<tr>
    	<td>tbody</td>
    	<td>tbody</td>
    	<td>tbody</td>
    </tr>
    <tr>
    	<td>tbody</td>
    	<td>tbody</td>
    	<td>tbody</td>
    </tr>
  </tbody>

综上所述,整个表格的打法为:

thead|thead|thead
-----|-----|-----
tbody|tbody|tbody
tbody|tbody|tbody

相当于HTML的:

<table>
  <thead>
		<tr>
    	<td>thead</td>
    	<td>thead</td>
    	<td>thead</td>
  	</tr>
	</thead>
  <tbody>
  	<tr>
    	<td>tbody</td>
    	<td>tbody</td>
    	<td>tbody</td>
    </tr>
  </tbody>
</table>

效果:

thead thead thead
tbody tbody tbody
tbody tbody tbody

注意:

似乎有些Markdown编辑器不认表格,也不知道是怎么回事。。。

评论

江文 wendev1024@icloud.com 2020-01-24 19:20 回复
CommonMark-Java居然不认删除线吗,晕。不要在意这些细节了。

发表评论