初次使用markdown自定义排版文章

万事开篇难，昨晚火急火燎的上了一篇【重新出发】后发现，很多排版的问题有待提高。写一篇文章，内容固然重要，但有个能让别人读起来舒服的排版也很重要。

今天花了一些时间好好整理下排版，顺便写下来，就算给自己和那些想要写文章的同学们开个头。

Markdown

Markdown 是一种轻量级标记语言，创始人为约翰·格鲁伯（John Gruber）。它允许人们”使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML(或者HTML)文档”。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。——来自《维基百科》https://zh.wikipedia.org/wiki/Markdown

为什么选择 Markdown

• 它基于纯文本，语法简单，方便修改和共享
• 几乎可以在所有的文本编辑器中编写
• 很容易转换为 HTML 文档或其他格式
• 适合用来编写文档、记录笔记、撰写文章
• 重点是，再也不用关心排版问题

写文章时使用到哪些 Markdown 语法

• 标题。在写作中，我主要使用##H2##、###H3###两个标题，对于大部分人来说够用了；
• 段落。只要在写作时，文字前后必须是空行，这样就自然产生段落
• 引用。在段落或者内容前使用>符号，就可以将内容标记为“引用”
• 列表。无序和有序列表。无序列表项的开始是：-(符号 空格)
  有序列表项的开始是：数字. 空格
• 超链接。

    主要格式为：
    [link text](URL 'title text')
    如：
    [百度](https://www.baidu.com/)

• 图片。语法格式和超链接基本一样，只是在前面多一个!，
  如：

    ![qrcode](http:https://img.haomeiwen.com/i6302/860bc47548ed1b39.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 强调。本公众号目前主要是强调【文末让大家关注词】，如：

    **coding01 期待您关注**

• 代码。主要分为代码块和行内代码两种，代码块前后需要有至少一个空行，并且每行代码前至少需要有一个Tab或者四个空格；行内代码：通过``，插入行内代码。

编辑器

选择用 Markdown 写作，自然需要选择一款上手且好用的编辑器来配合使用。因为本人使用Mac，所以重点在这几种编辑器之中选择：

Mou

Mou 曾经是 OSX 上最受欢迎的 Markdown 编辑器，没有之一了。但现在已停止维护了，我记得当时众筹时，我还花钱了，现在还没发布新版本。

mou.png

Day One 2

Day One 2 是 iOS 和 OSX 平台上屡次获殊荣的日记类APP，凭借其出色的设计，简洁易用的功能特点，并且清新优雅而简约的界面，自然成为记录生活日记的第一选择。Day One多次获得推荐，我也是在App Store限免时入手，成为我记录生活日志的好工具。

但最近发现将 Markdown 转成 HTML后，粘贴到微信公众后台编辑器时，出现排版格式的问题。

Day One 2

MacDown

MacDown is an open source Markdown editor for macOS, released under the MIT License. It is heavily influenced by Chen Luo’s Mou.

MacDown 是一款深受 Mou 影响的免费开源的 Markdown 编辑器。在我写这篇文章时，正是使用 MacDown 编辑的。

MacDown image

其它

目前市面上有很多各式各样的 Markdown 编辑器，如：MarkdownPad, sublime, Atom, IDEA Markdown, Cmd Markdown, Markdown Here, 马克飞象等等。这些编辑器各有各的优点，但要结合到微信公众号文章编辑，就会凸显出各自的不足。因为我们需要将 Markdown 转成 HTML，然后再直接复制粘贴到微信公众号后台编辑器中，可以直接保存使用。其中，最重要的一个特点是：需要能够高度可定制化 HTML 格式和排版，所以最终我选择使用 MacDown 编辑器。

可定制化排版 CSS

MacDown界面主要分成左右两个窗口，左边窗口是编辑窗口，编辑 Markdown 内容，使用【主题】设计编辑样式；右边窗口是预览窗口，可以直接查看转成 HTML 效果，使用【CSS】设计预览样式，这也是决定我们最后导出 HTML 效果。

为了要有好的预览效果，或者说是 HTML 导出效果，这就需要我们可定制化CSS，如上图的使用 DRCode 样式（注：点 Reveal，即可看到该样式的css文件，只要在任何能够编辑css的编辑器打开，修改，再选择【重新载入】，即可实时看到预览效果）。

为了达到自己想要的文章排版效果，我主要参考了一些牛人的文章样式和结合 Markdown 语法，重点重写 CSS 文件。具体 CSS 语法请自行脑补，我也是很不入流的前端学习者，所以目前编写的 CSS 还有待于进一步提升和优化，这也有赖于不断写文章的过程中来完善。

网上有太多的关于使用Markdown 自定义公众号文章排版的文章，但多多少少缺点东西，现将我整理的样式 CSS 初稿和这篇文章的 Mardown 文件放到 github 上，以供大家比对 Markdown 内容，结合 CSS 样式，和最后的预览效果，知其然知其所以然；也欢迎大家批评指正。

https://github.com/fanly/markdown

总结

一篇文章排版是样貌，但内容确是灵魂。所以有了基本的排版后，下一步就可以将更多的注意力放到文章的内容上了。

---

coding01 期待您关注

qrcode