前言
据说简书在诞生之初就支持了Markdown语言。听说这件事后有“排版强迫症”的我以及同事就迅速对这款写作软件产生了好感。此前想要自学使用Markdown排版的时候，一直没有遇到太清晰易懂的教程，所以我们就干脆自己写了一份，以下为全文：
大学的时候用word写论文，那种担心随时会死机的惶恐不安，排版的种种细微之至的殚精竭虑，依然记忆犹新。
后来读研时候开始用到大神Donald Knuth 高德纳发明的Tex(希腊语，请一定读成/tek/，意思是"art" and “craft”)。Knuth大神只是觉得当时的文字编辑系统不好用，所以顺手写了个改变文字编辑理念的编辑语言。就是这么牛逼！
word为代表的文字编辑软件采用的是"所见即所得"(what you see is what you get)，而以Tex为代表的文字编辑语言采用的则是“所想即所得”（what you think is what you get)。 Markdown就是这样一个所想即得所得的神器。
听上去酷炫是吧，酷炫的代价是要花时间去学。放心，Markdown足够简单, 相信我，你值得拥有。
自媒体工作：为什么要用Markdown:
更美观，更吸睛，更想阅读
一些可视化的排版工具如秀米，新榜编辑器等无法达到更美观的视觉效果。问题在于，同样的内容， 使用不同的工具设计排版，好的视觉体验会带给人更强烈的阅读欲望。尤其是文字较多的内容，舒适的间距，整齐的间隔，会帮助读者更容易地进行深度阅读，而不是匆匆扫一眼就关掉。以下是我用秀米和MarkDown分别编辑的公号内容，给大家做一比较：
一劳永逸，快捷方便
一般来讲，一个自媒体的内容排版风格是统一的，不会有太大变化。只要在最开始使用Markdown时，设定好最适合你的源代码和MarkDown Here CSS，在今后的工作中只要替换对应的内容就好了。（文末有我自己设计的一套CSS，大家可以直接复制黏贴套用。）
准备工作
需要准备的是：
- 安装一个Markdown的编辑器，用来编辑文字。
- 在浏览器下安装Markdown Here扩展应用，用来在网页版的编辑页面（如微信公号后台编辑），解释Markdown代码。
Markdown编辑器
市面上Markdown的编辑器有很多，我推荐几个在Mac和Windows下用的比较多的。
- Mac系统：MacDown(这个名字实在不讨喜) 下载。MacDown的使用界面如下图，非常方便，左边写MarkDown代码，右边是解释以后的样子。
安装浏览器扩展应用Markdown Here
点击这里进行安装，完成后会在浏览器右上角显示图标。如果你选择装的是Chrome的Markdown Here需要VPN。 下图蓝色框起来的就是Markdown Here在浏览器上的按键了。
使用
好了终于可以开始干正事了。接下来，我将介绍如何用Markdown完成一篇制作精良的微信文章。
使用流程
-
在Markdown编辑器里完成对内容及排版的编辑
尽量在Markdown编辑器里完成所有编辑，因为在平台的编辑器(比如微信公号后台)再做编辑，很容易出错 -
在Markdown Here的Option中设置好CSS（详见下文）
对大部分自媒体运营者来说CSS设置一次就够了，以后均可套用。对个别内容有定制的排版需求时，对CSS稍作修改即可。 -
浏览器打开平台编辑器（如微信公号后台），复制黏贴代码并转化成实际效果
把Markdown源文件复制到浏览器微信公号编辑区域，点击Markdown Here插件完成转化。
Markdown语法
这里面介绍一下自媒体常用的Markdown语法。Markdown是一种标签式的语言，也就是用标签来表示格式的意思。我在下文列出了一些常用的格式及其源代码，供大家参考。
标题
在文字前面加上‘#’表示标题，每增加一个‘#’，标题的级别降低一级。
一级标题 h1 head
写法是#一级标题 h1 head
二级标题 h2 head
写法是##二级标题 h2 head
三级标题 h3 head
写法是###三级标题 h3 head
正文
普通的正文不需要加任何标签
粗体：
**粗体**斜体:
_斜体_划掉:~~划掉~~-
需要显示原始代码时，把代码放到``符号里面。
如
_斜体_，这段代码并没有被Markdown解释。请注意，这个符号并非单引号，而是tild~键下面这个：
tild button 需要整段显示原始代码，就在这段代码前后各打3个`符号。
块引用
如果一段的内容是引用别人的话，在端的开头加上'>'。
如果一段的内容是引用别人的话，在端的开头加上'>'。
常用间隔符号
自媒体文章常常需要分割线来分隔内容，提高内容的可读性。用3个 - 或者 _ 或者 * 可以实现分隔线的效果。注意使用英文输入法下的下划线和中划线。
列表
列表通过缩进表示不同的级别。
无序列表
- 一级条目
- 二级条目
- 三级条目
- 二级条目
代码如下,**除*号外使用-或+也可：
* 一级条目
* 二级条目
* 三级条目
有序列表
- 一级条目 1
- 二级条目 1
- 三级条目 1
- 三级条目 2
- 二级条目 2
- 二级条目 1
- 一级条目 2
代码如下：
1. 一级条目 1
1. 二级条目 1
1. 三级条目 1
2. 三级条目 2
2. 二级条目 2
2. 一级条目 2
链接
链接分两种。一种是链接到其他网上地址的，还有一种是链接到本文中的某个位置的。
两种的基本格式一样。需要添加链接的文字内容用[方括号]来括起来，后面紧跟着带有网址的圆括号，如果要加上连接的title文字，在网址后面，把 title文字放到双引号里面。
外部跳转
举个栗子：
Markdown
[Markdown](https://github.com/markdown/ "Visit markdown!")
文中跳转
跳转到同一篇文章中的任意指定位置，能够很好的改善阅读体验。
举个栗子:
跳转到前言
跳转到[前言](#前言)
需要同时在跳转的目的地添加HTML中的A标签。如果不懂没有关系，记住就够用了。比如在前言的标题哪里，我是这么添加的：
##前言<a name="前言"></a>
图片
图片是非常常用的元素，快速的使用图片，可以大大的提高效率。我推荐使用自带图床功能的作图软件，也就是能提供图片URL链接的。这样一行代码就可以把图片加入到文章中去。格式为：
其中Alt text是HTML中的alt标签，在图片无法显示的情况下，会显示中括号中的内容。
上面是我开发的字幕拼图软件有啦(广告脸)提供的图片链接直接放到文章中。
如果找不到自带图床的图片编辑软件，可以把图片上传到图床，然后获得图片链接。知乎关于图床的问答。
如果不愿意用图床，在么在最后一步生成微信文章后，用微信自带的插入图片的按键即可。
Markdown Here扩展应用和CSS
如果我需要改变字体、字号、行间距等等该怎么办呢，这个时候就需要改Markdown Here提供的CSS。点击Markdown Here的logo选择Options. 如下图所示：
CSS
如下图，左边第二行的"Primary Styling CSS"方框是我们需要去根据需要修改的地方。右边第二行的"Syntax Highlighting CSS"是选择所需要的代码加亮的地方，选择自己喜欢的主题（theme）即可. 左边第三行的“Preview”提供了即时修改CSS以后的范例显示功能。那么问题来了，怎么修改CSS呢。我这边修改了一版自己觉得比较好用的CSS代码，供大家使用，直接复制黏贴至左侧编辑框即可。
/*和*/之间的部分是注释，表示代码的用途。我把常用的部分做了注释，方便大家使用。想前面说过的一样，对于大部分人CSS一般改一次就够了。如果还有什么不清楚了，可以给留言给我，我可以帮忙改一下。
/*
* NOTE:
* - The use of browser-specific styles (-moz-, -webkit-) should be avoided.
* If used, they may not render correctly for people reading the email in
* a different browser than the one from which the email was sent.
* - The use of state-dependent styles (like a:hover) don't work because they
* don't match at the time the styles are made explicit. (In email, styles
* must be explicitly applied to all elements -- stylesheets get stripped.)
*/
/*
* NOTE by XXS:
* The changes are made as follows:
* 增加了比较美观的中文字体
* 文章的左右Margin设置为0.8em
* 文章的采用左右对齐
* Tips by XSS:
* 需要使用不同的标题样式，比如有的用实线，有的用虚线的，可以定义不同的标题样式
*/
/* This is the overall wrapper, it should be treated as the `body` section. */
.markdown-here-wrapper{
font-size: 15px; //字号
line-height: 100%; //行间距
letter-spacing: 0.02em; //字符间距
margin-right: 0.06em; //左侧边距
margin-left: 0.06em; //右侧边距
font-family:PingFang SC Regular', 'PingFang SC', 微软雅黑, "Helvetica Neue",Helvetica, Arial, Verdana, Sans-serif, !important; //字体
text-align:justify;//字左右对齐
}
/*下面是将加粗字体设置想要的格式，这里只设置了颜色
*一般来说加粗表示强调，可以采用字的原来颜色或者公号的某一色调，字颜色尽量不要超过2种
* 色号可以参考 http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/
*/
strong, b{
color: #000000;
}
/*下面是将斜体设置为想要的格式，这里只设置了颜色
*/
em, i {
color: #000000;
}
/* To add site specific rules, you can use the `data-md-url` attribute that we
add to the wrapper element. Note that rules like this are used depending
on the URL you're *sending* from, not the URL where the recipient views it.
*/
/* .markdown-here-wrapper[data-md-url*="mail.yahoo."] ul { color: red; } */
pre, code {
font-size: 12px;
font-family: Consolas, Inconsolata, Courier, monospace;
}
code {
margin: 0 0.15em;
padding: 0 0.3em;
white-space: pre-wrap;
border: 1px solid #EAEAEA;
background-color: #F8F8F8;
border-radius: 3px;
display: inline; /* added to fix Yahoo block display of inline code */
}
pre {
font-size: 1em;
line-height: 1.2em;
}
pre code {
white-space: pre;
overflow: auto; /* fixes issue #70: Firefox/Thunderbird: Code blocks with horizontal scroll would have bad background colour */
border-radius: 3px;
border: 1px solid #CCC;
padding: 0.5em 0.7em;
display: block !important; /* added to counteract the Yahoo-specific `code` rule; without this, code blocks in Blogger are broken */
}
/* In edit mode, Wordpress uses a `* { font: ...;} rule+style that makes highlighted
code look non-monospace. This rule will override it. */
.markdown-here-wrapper[data-md-url*="wordpress."] code span {
font: inherit;
}
/* Wordpress adds a grey background to `pre` elements that doesn't go well with
our syntax highlighting. */
.markdown-here-wrapper[data-md-url*="wordpress."] pre {
background-color: transparent;
}
/* This spacing has been tweaked to closely match Gmail+Chrome "paragraph" (two line breaks) spacing.
Note that we only use a top margin and not a bottom margin -- this prevents the
"blank line" look at the top of the email (issue #243).
*/
/*段落上下内边距10px*/
p {
/* !important is needed here because Hotmail/Outlook.com uses !important to
kill the margin in <p>. We need this to win. */
margin: 0 0.3em 0em 0.3em !important;
padding: 10px 0;
text-align: justify;
}
/*设置table, pre, dl, 块引用，无序列表，有序列表的外边距(margin)，上下为1.2em, 左右为0em.
*关于margin, padding, 和border的解释参考 http://www.studyofnet.com/news/35.html
*/
table, pre, dl, blockquote, q, ul, ol {
margin: 1.2em 0;
text-align: justify;
}
/*设置无序列表和有序列表的左侧padding，也就是离正文的缩进量*/
ul, ol {
padding-left: 0.5em;
margin: 0.5 1em !important;
}
/*设置列表的margin, 上下0.5em, 左右0em /
li {
margin: 0.5em 0.8em;
}
/* Space paragraphs in a list the same as the list itself. */
/*设置列表里面段落的margin, 上下0.5em, 左右0em*/
li p {
/* Needs !important to override rule above. */
margin: 0.5em 0.5em !important;
text-align: justify;
}
/*把子列表设置的更小一点, 可根据需要修改*/
ul ul, ul ol, ol ul, ol ol {
margin: 0px 0em;
padding: 0px 0em;
}
/*
*设置列表条目的样式
*有序列表的样式可供选择的有decimal, decimal-learding-zero, lower-roman, upper-roman, lower-alpha, upper-alpha,
*lower-greek, lower-latin, upper-latin, hebrew 等
*无序列表的样式可供选择的有 disc, circle, square，none等
*具体意思可以参考： http://www.w3school.com.cn/cssref/pr_list-style-type.asp
*/
/*有序列表条目样式设置为数字*/
ol {
list-style-type: decimal;
}
/*无序列表条目样式设置为实心圆*/
ul {
list-style-type: disc;
}
/*有序列表子条目样式设置为实心圆*/
ol ol, ul ol {
list-style-type: upper-roman;
}
/*无序列表子条目样式设置为空心圆*/
ol ul, ul ul {
list-style-type: circle;
}
/* 有序列表子子条目的样式，当前用的是小写罗马字母，可供选择的同上*/
ul ul ol, ul ol ol, ol ul ol, ol ol ol {
list-style-type: lower-roman;
}
/*区块列表格式*/
dl {
padding: 0;
}
dl dt {
font-size: 12px;
font-weight: bold;
font-style: italic;
}
dl dd {
margin: 0 0 1em;
padding: 0 1em;
}
/*块引用格式*/
blockquote, q {
/*border-left: 4px solid #FFCC33;
border: 2px solid #FFCC33;*/
/*上下padding 0, 左右padding 1em */
font-size: 11pt;
padding: 0 1em;
color: #777;
quotes: none;
/*quotes:"\201C""\201D""\2018""\2019";*/
}
blockquote::before, blockquote::after, q::before, q::after {
content: none;
}
/*h1, h2, h3, h4, h5, h6 标题通用格式： 靠左*/
h1, h2, h3, h4, h5, h6 {
/* margin: 0 0em 0em 0em !important;*/
margin: 0 0.5em 0em 0.5em !important;
padding: 0;
font-weight:bold;
text-align: left;
}
/*h1 标题专用格式*/
h1 {
font-size: 20px !important;
/*margin:10px 0em 20px 0.5em !important;*/
padding: 4px 0 0px 0 !important;
border-bottom: 6px solid #ffeb3b;
}
/*h2 标题专用格式*/
h2 {
font-size:18px !important;
padding: 8px 0 2px 0 !important;
/*margin: 18px 0.5em 6px 0.5em !important;*/
}
/*h3标题专用格式*/
h3 {
font-size: 16px;
padding: 2px 0 1px 0 !important;
/*margin: 16px 0.9em 4px 0.9em !important;*/
}
/*h4标题专用格式*/
h4 {
font-size: 14px;
padding: 1px 0 0px 0 !important;
/* margin: 14px 1 em 2px 0 em !important;*/
}
/*h5标题专用格式*/
h5 {
font-size: 14px;
}
/*h6标题专用格式*/
h6 {
font-size: 14px;
color: #777;
}
/*表格格式*/
table {
padding: 0;
border-collapse: collapse;
border-spacing: 0;
font-size: 1em;
font: inherit;
border: 0;
}
tbody {
margin: 0;
padding: 0;
border: 0;
}
table tr {
border: 0;
border-top: 1px solid #CCC;
background-color: white;
margin: 0;
padding: 0;
}
table tr:nth-child(2n) {
background-color: #F8F8F8;
}
table tr th, table tr td {
font-size: 1em;
border: 1px solid #CCC;
margin: 0;
padding: 0.5em 1em;
}
table tr th {
font-weight: bold;
background-color: #F0F0F0;
}
。
生成
好了，到了迎接胜利的时刻了，我用微信后台编辑器做例子。把在MacDown写好的源代码复制黏贴到微信编辑器。再点击右上角的Markdown Here logo，微信文章就生成了。如下图所示：
有任何相关疑问或建议欢迎留言交流！
