我之前写过一篇关于公众号排版的文章，内容偏介绍工具和方法，对于新手不具有动手指导意义。
这篇更具实操性，只要跟着做就可以实现一键排版。
先说原理：使用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上就可以自动上传云端图床。
点击上传的图片，可自动复制图片地址，直接插入文章即可使用，就像下面这样：
当你习惯这种图片使用方式，一定会爱不释手。
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~
网友评论