文章排版方式的探索

我在微信公众号里也写了几篇文章了，不过排版还是比较原始，就是写一段空一行，偶尔用一点加粗效果而已。至于字体大小、行间距、段间距就没有去花时间去研究和调整了。

这个时候我想到我的印象笔记中以前收藏了一些关于排版的文章，这个时候不是正好可以拿出来研究一番吗？

复习收藏的文章

在我电脑上的“印象笔记”app中搜索“排版”，就出现了好几篇有“排版”关键字的文章，首先复习的当然是李笑来老师的文章。

在这篇文章的基础上我又复习其他几篇文章，然后开始自己的实践探索

排版神器Markdown Here

Markdown Here是一款浏览器插件，我在Firefox浏览器和谷歌的chrome浏览器中都是能搜索并安装的。因为chrome的插件商店需要科学上网，所以我以Firefox浏览器为例说一下插件的安装

在Firefox浏览器的右上角点击三个横杠的按钮，选择附件组件

选择“获取附加组件”，然后下拉到最下面点击“看看更多附加组件”按钮

搜索并选择“Markdown Here”进行安装就可以了。因为我已经安装过了，所以现在没有安装这个按钮了。

markdown最基础的语法

可能有些读者不了解markdown的语法，会觉得有难度，其实markdown就是用一些特殊的标记就能完成排版的方法，最基础的用法大约只有4种。

“#”号标记，代表大标题，本节的标题的写法就是这样：“## markdown最基础的语法”

“>”表示引用，举个例子：“> 这就是引用的语法效果”，渲染后如下：

这就是引用的效果

加粗和斜体的效果，举个例子：

“**这是加粗的效果**”，渲染后：这是加粗的效果

“*这是斜体的效果*”，渲染后：这是斜体的效果

列表：有序列表和无序列表

有序列表：用“1. ”等数字表示的是有序列表，效果就是当前的“1. 2. 3. 4. ”等所表示的效果

无序列表：用“- ”或者“* ”或者“+ ”开头，markdown的写法是“- 无序列表就是用……开头”

好吧，我的markdown语法教程太水了，我去网上搜一个教程来吧。这个教程我个人觉得讲解的挺详细的，如果大家觉得写的不清楚，可以自行在网上搜索“markdown 语法”等关键词进行搜索即可。多对比几份教程，就能找到适合自己的。

结合李笑来老师的CSS样式体验Markdown Here的神奇

学习了markdown的语法，有没有觉得markdown自带的样式还是有点难看，这个时候就要用到李笑来老师的CSS样式去修改Markdown Here自带的样式了。

李笑来老师的教程原文中也有CSS样式的地址，这里我再次贴出来吧。打开这个链接可能需要科学上网，如果不能科学上网可以去百度搜索，不过我没有验证这些资料是否可以正确设置。

网址如下：

https://gist.github.com/xiaolai/aa190255b7dde302d10208ae247fc9f2

网址的二维码如下：

有了李笑来老师的CSS文件，就可以着手修改Markdown Here的样式了，总共就两步：

1.打开Markdown Here的设置页面，点击“首选项”按钮

2.将上面的二维码中的markdownhere.css样式文件中的所有的代码复制到下图的第一个文本框中，覆盖掉原来的代码，就大功告成了。

设置完了以后，你在网页中用markdown语法进行写作，写完以后点击浏览器右上角的Markdown Here的图标，或者鼠标右键选择“Markdown转换”，你所写的文字就变成李笑来老师公众号中的文章的排版风格了。试一下你就会觉得很神奇了，因为从此你只需要专心写文章，再也不需要操心排版的问题了。

结合印象笔记一键排版

排版的问题解决了，还有两个小问题：

文章中的文字都是我好不容易码出来的，我得找个地方妥善的保管它们。

如果保管文字的地方还能进行方便的排版就更好了。

因为我的收藏的文章都保存在“印象笔记”中，所以保存文字自然还是首选“印象笔记”软件。但是印象笔记不支持markdown语句，我在印象笔记中写完了也没有办法预览，需要复制到公众号的网页编辑器中用Markdown Here进行预览。

经过一番纠结，我突然想到了印象笔记的网页版——印象笔记的电脑版已经很好用了，以至于我都忘记了还有网页版这么回事。

因为印象笔记的文字都是保存在云端的，哪里都可以看到，那么可以在电脑上编辑，也可以在网页上进行编辑。等我编辑完了，直接在网页端用Markdown Here进行转换，如果遇到觉得不好的地方，直接在网页端进行修改，不就可以了吗？

尝试了一下，现在我编辑文章的流程就简单多了。

1.在印象笔记的电脑端用markdown进行文章的写作，包括插入图片，添加链接等操作

2.差不多写完了，在印象笔记的网页端用Markdown Here进行预览，进行细节的修改

3.复制到微信公众号，发布

这样一来，发布的版本就是我的印象笔记中保存的版本，不会造成文章在印象笔记和公众号中细节上的不一致，也不需要再在微信公众号的编辑器中进行二次编辑了，省时省力。

小结

这次文章排版方式的探索收获还是挺大的。

1.先是参考了多篇文章中的排版方案，最后发现还是李笑来老师的方案比较一劳永逸——第一次的设置确实需要花一些时间，但是设置完了以后就再也不用为排版的事情操心了。

2.实践是最重要的程序。以前我就读过李笑来老师的关于排版的文章，但是因为当时没有写作的需求，仅仅把文章收藏后放到一边了。实践起来才发现还是有不少需要结合自身改进的地方。

3.结合自己进行修改。我是印象笔记的重度用户，所以我需要结合印象笔记进行文章的写作和排版，但是印象笔记的排版能力比微信公众号编辑器还弱。所以我通过思考和尝试最终确定了印象笔记电脑版和网页版+Markdown Here排版神器+李笑来老师的CSS样式文件这三个武器的组合。

最终的效果嘛，我自己还是很满意的。不知大家看了效果有没有冲动想尝试一番呢。