你和新媒体排版高手的差距只有一个Markdown

2017-12-25 本文已影响13575人芮贝卡

前言

据说简书在诞生之初就支持了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时，设定好最适合你的源代码和MarkDown Here CSS，在今后的工作中只要替换对应的内容就好了。（文末有我自己设计的一套CSS，大家可以直接复制黏贴套用。）

准备工作

需要准备的是：

安装一个Markdown的编辑器，用来编辑文字。
在浏览器下安装Markdown Here扩展应用，用来在网页版的编辑页面（如微信公号后台编辑），解释Markdown代码。

Markdown编辑器

市面上Markdown的编辑器有很多，我推荐几个在Mac和Windows下用的比较多的。

Mac系统：MacDown(这个名字实在不讨喜) 下载。MacDown的使用界面如下图，非常方便，左边写MarkDown代码，右边是解释以后的样子。

MacDown界面

Mac系统：Mou 下载。
Windows:Typora下载。

安装浏览器扩展应用Markdown Here

点击这里进行安装，完成后会在浏览器右上角显示图标。如果你选择装的是Chrome的Markdown Here需要VPN。下图蓝色框起来的就是Markdown Here在浏览器上的按键了。

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
  1. 三级条目 1
  2. 三级条目 2
2. 二级条目 2
一级条目 2
代码如下：

1. 一级条目 1 
    1. 二级条目 1 
        1. 三级条目 1 
        2. 三级条目 2 
    2. 二级条目 2 
2. 一级条目 2

链接

链接分两种。一种是链接到其他网上地址的，还有一种是链接到本文中的某个位置的。

两种的基本格式一样。需要添加链接的文字内容用[方括号]来括起来，后面紧跟着带有网址的圆括号，如果要加上连接的title文字，在网址后面，把 title文字放到双引号里面。

外部跳转

举个栗子：
Markdown
[Markdown](https://github.com/markdown/ "Visit markdown!")

title

文中跳转

跳转到同一篇文章中的任意指定位置，能够很好的改善阅读体验。
举个栗子:
跳转到前言
跳转到[前言](#前言)
需要同时在跳转的目的地添加HTML中的A标签。如果不懂没有关系，记住就够用了。比如在前言的标题哪里，我是这么添加的：
##前言<a name="前言"></a>

图片

图片是非常常用的元素，快速的使用图片，可以大大的提高效率。我推荐使用自带图床功能的作图软件，也就是能提供图片URL链接的。这样一行代码就可以把图片加入到文章中去。格式为：
![Alt text](图片URL "可选图片名")其中Alt text是HTML中的alt标签，在图片无法显示的情况下，会显示中括号中的内容。

图片来自《我的团长》

![图片来自《我的团长》](https://image.yoo.la/concat/yoola_1505139315668_dbb3ae893cb444b386914c3dd5e01d14_blade.jpg/works_share "我的团长")

上面是我开发的字幕拼图软件有啦(广告脸)提供的图片链接直接放到文章中。

如果找不到自带图床的图片编辑软件，可以把图片上传到图床，然后获得图片链接。知乎关于图床的问答。

如果不愿意用图床，在么在最后一步生成微信文章后，用微信自带的插入图片的按键即可。

Markdown Here扩展应用和CSS

如果我需要改变字体、字号、行间距等等该怎么办呢，这个时候就需要改Markdown Here提供的CSS。点击Markdown Here的logo选择Options. 如下图所示：

Markdown Here选择options

CSS

如下图，左边第二行的"Primary Styling CSS"方框是我们需要去根据需要修改的地方。右边第二行的"Syntax Highlighting CSS"是选择所需要的代码加亮的地方，选择自己喜欢的主题（theme）即可. 左边第三行的“Preview”提供了即时修改CSS以后的范例显示功能。那么问题来了，怎么修改CSS呢。我这边修改了一版自己觉得比较好用的CSS代码，供大家使用，直接复制黏贴至左侧编辑框即可。
/*和*/之间的部分是注释，表示代码的用途。我把常用的部分做了注释，方便大家使用。想前面说过的一样，对于大部分人CSS一般改一次就够了。如果还有什么不清楚了，可以给留言给我，我可以帮忙改一下。

修改Primary Styling 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，微信文章就生成了。如下图所示：

WeChat editor

有任何相关疑问或建议欢迎留言交流！