Markdown是一种可以使用普通文本编辑器编写的标记语言&＃xff0c;通过类似HTML的标记语法&＃xff0c;它可以使普通文本内容具有一定的格式。Markdown的语法简洁明了、学习容易&＃xff0c;而且功能比纯文本更强&＃xff0c;因此有很多人用它写博客。

1、MarkDown简介

Markdown 是一种轻量级的「标记语言」&＃xff0c;它的优点很多&＃xff0c;目前也被越来越多的写作爱好者&＃xff0c;撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑&＃xff0c;Markdown 的语法十分简单。常用的标记符号也不超过十个&＃xff0c;这种相对于更为复杂的 HTML 标记语言来说&＃xff0c;Markdown 可谓是十分轻量的&＃xff0c;学习成本也不需要太多&＃xff0c;且一旦熟悉这种语法规则&＃xff0c;会有一劳永逸的效果。

用markdown编写完后&＃xff0c;我们可以导出到html发布到网站或者导出pdf保存到本地&＃xff0c;十分的方便。最重要的是markdown源文件是纯文本文件&＃xff0c;也就是意味着可以跨平台&＃xff0c;使用 Markdown 的优点如下&＃xff1a;

• 专注你的文字内容而不是排版样式&＃xff0c;安心写作。
• 轻松的导出 HTML、PDF 和本身的 .md 文件。
• 纯文本内容&＃xff0c;兼容所有的文本编辑器与字处理软件。
• 随时修改你的文章版本&＃xff0c;不必像字处理软件生成若干文件版本导致混乱。
• 可读、直观、学习成本低。

推荐一款MarkDown在线编辑器&＃xff0c;CmdMarkDown&＃xff0c;网址为&＃xff1a;https://www.zybuluo.com/mdeditor &＃xff0c;大家可以先在这里学习基本语法。

2.MarkDown基本语法

(1) 标题

标题是每篇文章都需要也是最常用的格式&＃xff0c;在 Markdown 中&＃xff0c;如果一段文字被定义为标题&＃xff0c;只要在这段文字前加 # 号即可。

# 一级标题 //对应html标签

## 二级标题 //对应html标签

### 三级标题 //对应html标签

以此类推&＃xff0c;总共六级标题&＃xff0c;建议在井号后加一个空格&＃xff0c;这是最标准的 Markdown 语法。这里要注意的是#和后面的内容之间要有空格隔开。

(2)粗体和斜体

Markdown 的粗体和斜体也非常简单&＃xff0c;用两个 * 包含一段文本就是粗体的语法&＃xff0c;用一个 * 包含一段文本就是斜体的语法。

*Markdow* //斜体

**Markdow** //粗体

(3)分割线

分割线也比较简单&＃xff0c;markdown语法为&＃xff1a;

---

或者

***

(4)列表

这里的列表指的就是我们html中常用的有序列表和无序列表&＃xff0c;及

和
.这里不再给出截图&＃xff0c;大家可以自己动手实践。

其语法如下&＃xff1a;

无序列表&＃xff1a;

* 1 或者 - 1 或者 &＃43; 1

* 2 或者 - 2 或者 &＃43; 2

* 3 或者 - 3 或者 &＃43; 3

这里要注意的是有使用就都是用号&＃xff0c;使用 &＃39;-&＃39; 就都用 &＃39;-&＃39; 号&＃xff0c;混合使用会出错的。还有就是* 和内容之间要加一个空格。

有序列表比较简单&＃xff0c;写法如下&＃xff1a;

1. Item1

2. Item2

3. Item3

当然&＃xff0c;这里前面的序号可以随便写&＃xff0c;总之后面会得到与之相同的输出。

(5)引用

如果你需要引用一小段别处的句子&＃xff0c;那么就要用引用的格式。引用的语法就是在文字前面加 > ,如&＃xff1a;

> 这里是引用

输出如下&＃xff1a;

这里是引用

当然&＃xff0c;不同的markdown编辑器输出的显示略有不同.

(6)超链接

超链接的写法比较特殊&＃xff0c;但是也很好记忆&＃xff0c;如我们加一个百度的超链接&＃xff0c;markdown语法如下&＃xff1a;

[百度](http://www.baidu.com)

效果如下&＃xff1a;

百度

当我们导出到html中时&＃xff0c;就会得到一个标签的输出。

如果我们要加入一张图片&＃xff0c;其语法如下&＃xff1a;


跟文字链接相比&＃xff0c;也就是前面多了一个感叹号&＃xff01;。

(7)表格

markdown的表格我感觉写起来并不是那么简便&＃xff0c;我们先来看一下表格的写法&＃xff1a;

| Tables | Are | Cool |

| ------------- |:-------------:| -----:|

| col 3 is | right-aligned | $1600 |

| col 2 is | centered | $12 |

| zebra stripes | are neat | $1 |

显示结果如下&＃xff1a;

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

这里值得注意的是第二行&＃xff0c;|:------------:|,这里两边加冒号就是居中&＃xff0c;如果只有一边加冒号就是哪边对齐&＃xff0c;如Cool那一列就是右对齐。默认左对齐。

(8)代码框

程序员写东西&＃xff0c;难免会插入一些代码&＃xff0c;在 Markdown下实现也非常简单&＃xff0c;只需要用两个&＃96;&＃96;&＃96; 把中间的代码包裹起来&＃xff0c; 效果如下&＃xff1a;

public Class{public static void main(String[] args){...}
}


注意这里的&＃96;不是单引号&＃xff0c;而是键盘左边那个~上的&＃96;。

二、打造自己的MarkDown编辑器

上面说了那么多&＃xff0c;都是markdown的基本语法&＃xff0c;下面我们开始说怎么让自己的网站后台支持markdown&＃xff0c;首先&＃xff0c;我们必须要明白一点的是&＃xff0c;之所以在网站中可以使用markdown是因为markdown可以导出html&＃xff0c;所以我们做的就是把markdown转换成html就ok了。

关于markdown转换成html&＃xff0c;网上已经有开源的js库了&＃xff0c;我们没有必要再去重复造轮子&＃xff0c;这里我们使用开源项目showdown.js&＃xff1a;

GitHub地址为&＃xff1a;https://github.com/showdownjs/showdown

这个插件使用方法十分简单&＃xff0c;使用方法如下&＃xff1a;

var Showdown &＃61; require(&＃39;showdown&＃39;);
var converter &＃61; new Showdown.converter();converter.makeHtml(&＃39;#hello markdown!&＃39;);//

hello makrdown!




最后一行代码&＃xff0c;makeHtml()这个方法会返回导出的html代码&＃xff0c;然后我们将其显示出来就可以了。

下面我们下载showdownjs&＃xff0c;放到本地&＃xff0c;写一个demo来测试一下&＃xff0c;我们新建一个html文件&＃xff0c;添加js引用&＃xff0c;代码如下&＃xff1a;










然后&＃xff0c;我们添加一个用来输入markdown内容&＃xff0c;再添加一个div来显示markdown的输出结果。然后&＃xff0c;编写Javascript代码&＃xff0c;取出用户输入的内容&＃xff0c;然后把导出的html代码显示在div中&＃xff0c;整体页面代码如下&＃xff1a;















这里我们给添加onkeyup事件&＃xff0c;这样就可以实时的看到编辑结果了。页面运行效果如下&＃xff1a;

这里加了一些css样式对显示结果进行渲染&＃xff0c;这样看起来会好看一些&＃xff0c;大家可以根据输出的html标签&＃xff0c;然后自己添加css样式进行渲染。

有一点遗憾的是&＃xff0c;貌似这个showdownjs不支持table。