我之前写过一篇关于公众号排版的文章，内容偏介绍工具和方法，对于新手不具有动手指导意义。

这篇更具实操性，只要跟着做就可以实现一键排版。

先说原理：使用markdown标记语言写文章，通过CSS样式表将文章样式格式化，使用chrome+markdown here插件完成一键排版。

工具

首先说下我使用的工具：

1、chrome浏览器，有各种好用的插件。

使用chrome在公众号网页后台编辑文章，直接将markdown格式文章贴入编辑区，点击markdown here插件，即可完成一键排版。

2、markdown here插件，可以通过CSS样式表完成markdown格式文章的一键排版。

https://markdown-here.com/get.html

这是下载地址，可能需要“梯子”~

安装好以后，打开markdown here选项，在红框区域编辑样式，可以实现文章样式的调整。

为了方便大家快速上手，在本公众号后台回复“样式表”，可获取我这篇文章的排版样式。

下载CSS文件后，将内容填至图片中红框位置即可使用。

3、iPic图床工具。

安装该工具后，只需在电脑上复制、剪切图片，在iPic上就可以自动上传云端图床。

点击上传的图片，可自动复制图片地址，直接插入文章即可使用，就像下面这样：

![](https://tva1.sinaimg.cn/large/006y8mN6gy1g6vavewibjj319s0l60zl.jpg)

当你习惯这种图片使用方式，一定会爱不释手。

iPic是mac端软件，可直接在App Store下载。

如果是windows系统可以使用Fu，在这里下载：

https://github.com/klesh/fu/releases

4、markdown编辑工具，并非必须，使用记事本、word文档编写都行。

我使用的是Atom，一种高级编程工具，可以安装多种markdown标记插件，使用方便。

移动端可以考虑使用锤子便签（免费），或者Day one（收费），都支持markdown标记。

移动端写文章还有个神器 - 语音输入法，安卓手机可用科大讯飞语音输入法。

苹果直接使用自带输入法，点击右下角的小麦克风可直接语音输入。

这项技能一旦开启，真的会停不下来，我已经让六岁的儿子用语音输入法记日记了~

简单的markdown元素

无需专门练习，只需要记住以下几个符号就够了。

1、标题，#。

常写word文导航，对标题一定不陌生，markdown使用#符号表示标题。

代码：

# 一级标题
## 二级标题

效果：

一级标题

二级标题

我的文章里基本使用的都是二级标题。

2、加粗，**文字**

移动阅读时代，大家都是整屏整屏的翻，将内容加黑高亮显示，可提高阅读体验，方便用户。

代码：

移动阅读**关键点高亮显示**很重要。

效果：

移动阅读关键点高亮显示很重要。

3、引用，>

有时，我们会引用一些名言金句，为了突出显示，可以采取引用的方式。

像这样：

>这是最好的时代，也是最坏的时代。

效果：

这是最好的时代，也是最坏的时代。

4、列表，-

请单和任务项最喜欢使用列表。

代码：

- 工具
- markdown语言
- 模仿样式

效果：

• 工具
• markdown语言
• 模仿样式

5、分隔线，---

如何快速的画一条线？你只需要3个中横线。

代码：

---
这是条线

效果：

---

这是条线

排版样式

采用本文介绍的方法，作者只需要专注写文章就好。

排版交给CSS样式表。

工具里介绍的markdown here可以使用预设的CSS样式，一键对文章排版。

具体做法是：

• 1、安装chrome浏览器和markdown here插件。
• 2、打开markdown here选项，修改“基本渲染CSS”。
• 3、在公众号文章编辑页面，贴入markdown格式文章，点击chrome浏览器上的markdown here插件图标，完成排版。

三步完成公众号排版。

介绍几个关键环节：

1、文章样式CSS文件

这是整个排版样式的核心，所有样式的调整均通过修改CSS代码完成。

不会CSS不打紧，我也是从抄别人的开始的。

后台回复：“样式表”，可以把我的先拿去用。

这里要感谢李笑来老师，我是从他那里抄的基础版CSS样式，然后再自己修改。

2、文章整体风格

通过修改CSS文件中的具体参数，修改文章风格。

.markdown-here-wrapper {
  font-size: 16px; 字体大小
  line-height: 1.8em;  行间距
  letter-spacing: 0.05em;  字间距
  padding: 0 8px;  文章的页边距
  color: #888888;!important;  整体文字颜色
}
这段代码是全局设置。

一开始很难自己修改出符合自己审美的风格。

我是通过抄好看的文章风格开始的。

这里要感谢姜胡说的大胡子老师，我的这个CSS样式便是抄了他的文章风格。

很有艺术范。

传送门在这：大胡子的排版神技

3、如何抄样式

前两个技法都提到了抄，这里就详细介绍下如何打磨自己的CSS样式表。

核心思路就是，先模仿、再练习，之为学习。

这里还是要用到我们的最佳拍档chrome浏览器。

首先，找到一篇自己喜欢的公众号文章，使用chrome浏览器打开。

我们将使用开发者工具把文章的样式挖出来，在更多工具打开它。

点击左上角鼠标形按钮，然后选择要查看样式的区域。

我这里以查看文字颜色为例。

点击文字区域，可以看到使用的颜色为#888888。

看下面的红色区域，就是这段文字的CSS样式，将里面的参数抄到自己的样式表即可。

4、简单CSS样式修改

对图片自动加圆角、叫阴影：

img {
  text-align: center !important;  居中
  border-radius: 9px;  圆角
  box-shadow: #AAAAAA 0em 0em 1em 0px;  阴影
  visibility: visible !important;
  width: 677px !important;  固定宽度
  height: auto !important;  高度自动
}

对粗体、斜体的字体颜色进行调整：

strong, b{
  color: #010101;
}

em, i {
  color: #010101;
}

对标题样式进行调整：

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;  行间距
  padding: 0 8px;  页边距
  font-style: bold !important; 标题加粗
  color: #1e1c1c !important; 标题颜色
  text-align: left !important; 居左对齐
  margin-top: 1.5em 5px !important; 段前距离
  margin-bottom: 1.5em 3px !important; 段后距离
}

一键排版

前面将的都是准备工作，花一两个小时便可基本掌握。

实际排版其实很简单，也就3秒钟。

• 1、使用chrome登录公众号。
• 2、将markdown格式编写的文章粘贴到公众号后台。
• 3、点击浏览器上的markdown here图标，完成排版。

最后，可以发送到手机预览下效果。

如果有一些细节想调整，又暂时不会改CSS代码，没有关系。

同时在chrome上安装一个“壹伴助手”来用，可以对细节进行微调。

甚至可以抄壹伴的样式~

以上方法，如果熟练使用，可节省大量排版时间，起步也很简单，直接用我的就可以了！

后台回复：“样式表”，获取我的CSS样式表，以及本篇文章的markdown源代码。

多少学点网页知识，有用！ — 大胡子

---

上篇排版文：
10秒钟搞定公众号文章排版

D87~