Markdown 是一种轻量级的标记语言,它的文本可以转换为 HTML ,加上 CSS 的样式控制,能够很方便快捷进行文章排版。Markdown 解决了一文多处投放(微信公众号+博客)以及排版的问题。
CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素,样式通常存储在样式表中,外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中。
我们发布在网络各处的文章,最终都会被转换为 HTML 进行展示,因此,当不需要复杂排版时,Markdown + CSS 完全可以满足我们的排版需求,比如本文。
理论陈述完毕,在介绍具体操作流程之前,我们再来介绍几个接下来会用到的小工具。(注:这些工具所提供的功能都可以用其他工具替代,这里提到它们,单纯因为,我测试的时候用的这几个。)
Markdown Here 是个浏览器插件(Chrome/Firefox/Safari),可以将浏览器中编辑器里的 Markdown 文本转换成渲染过后的 HTML,它的另一个特点是允许用户自定义渲染 HTML 的 CSS 。
Markdown 编辑器有千千万,在线的也有很多。如果对自己的 Markdown 语法够自信,不需要预览,其实用记事本写完存成(.md)文件也可以的。
Github 是一家公司,主要提供基于 git 的版本托管服务。目前并可能未来长期是本星球上最流行的开源托管服务提供商,程序员们的不具名简历集散地(通过询问一只程序猿在 Github 上的代码贡献量来评价ta是一个什么样的程序猿)。另外,Github 本身支持 Markdown 的在线编辑。
工具介绍完毕,进入实践。
试过若干 Markdown 编辑器,在线的,离线的,还差一点儿就想去尝试李笑来推荐的 Atom (这两个属于程序编辑器,Markdown编辑只是辅助功能)。在群里看到网友推荐 MWeb 之前,我一直都在使用 Macdown ,一款基于开源项目 Mou 的 Markdown 编辑器。现在,我在用 MWeb ,一款 运行在 OS X 以及 iOS 上的编辑器软件,支持 Github Flavored Markdown 语法(意味着它支持LaTex)。两款软件都支持自定义 CSS ,除了没有写作模版之外,其他的功能都灰常好用,并且这些好用的功能还免费。而我选择其中一个的原因,迟些时候,会在另一篇关于Wordpress写作的文章中提到。
对于辛勤耕耘在 Windows 上的同学,抛开 Github 的在线编辑器,MarkdownPad 是我目前能找到的还算能凑合用的编辑器。但是这款编辑器的自定义 CSS 功能是收费的,因此,我写下了方案三。
关于 Markdown 基础语法以及其他可用的编辑器,可以去看看这篇文章。4月15日我也许会重开一次关于 Markdown 写作的微课,平台暂定千聊,课程免费,欢迎带着问题来提问。(附上课程邀请卡)
关于 Markdown 你可能想知道的
邀请卡
关于中文排版,我直接拷贝了李笑来教程的原话,重点只有三个:
至于选择哪一种字体,其实并不是关键,因为对字体来说,最重要的其实是“通用” —— 即便是你设置好了你喜欢的字体,先不说那是不是你自己的偏好,更重要的是,若是读者的设备上没有那个字体,那你就等于是白折腾了……
鉴于微信中「微软雅黑」是通用字体,看着蛮顺眼,所以,我直接选了它。中文字体若是不设置行间距和字间距的话,在手机上读起来很费劲,另外很多人跟我反映大一点的字体尺寸,以上这些,除了字体,李笑来都做了。我在他的基础上进行了一些小修改。
李笑来版本:
我的版本:
注:.markdown-here-wrapper是插件 Markdown Here 的自定义标签,如果你使用的不是方案一,那么需要将其替换为 HTML 标签 body。
经过乔先生漫长的吐槽以及挑刺,我最终有两个配色方案,一个是基于李笑来配色方案的修改版(本文采用的配色),一个是没采用 Markdown + CSS 排版之前一直使用的粉色系模板的配色方案。如果你已经有自己固定的配色方案,把它照搬过来就是;如果还没有,要么上网找一个,要么自己配一个。附上 Google Material Design 的 Color Scheme:
我的加粗与倾斜样式配色如下:
在自定义 CSS 里的设置不起作用的话,试试在后面补上!important,就好像这样:
其他,请去 W3School 速成一下,附上网址:
英文好的同学也可以去 codecademy 上个 10 小时的课Learn HTML & CSS: Part I,培训 HTML 与 CSS 基础:
也许会有人因为 GFW 的原因没有办法安装 Markdown Here,如果你还不会爬墙,可以试试最基础的 Latern ,同样是一个 Chrome 插件。另一个选择是,采用方案二或者方案三,这样会额外生成一个 HTML 文件(微信公众号关闭了对 HTML 纯文本的支持,如果有大神能够告诉怎么避免生成 HTML 文件那就最好了,前端我不太懂)。
Chrome 的插件数据是跟帐户同步的,也就是说,只要你能够在 Chrome 上保持 Google 帐户在线,那么不管你换多少台电脑,都不用重新配置 Markdown Here。如果你的 Markdown Here 不好使,尝试更新 Chrome 到最新版本。