基于 Markdown 的文本工作流与写作哲学

Posted by 空谷 on 2017-10-20

对我个人而言,我有非常多的信息发布平台,微信公众号、个人博客、知乎等等。每个地方都有自己编辑方法,但是我又不是专业的文章工作者,如何来最大程度地做到一次写作,多处分发,并且在这个过程中尽量减少人的操作呢?

传统模式下的痛点

我们先看看直觉下的写作流程的几个核心问题。基于富文本编辑器(如Word、Pages 等)的写作过程存在以下问题:

  • 浪费力气在排版上:使用传统的富文本编辑器时,我们常常会花费大量力气去排版,试图让文档变得漂亮一些。但是单纯从创作上来说,是粗体还是斜体,是宋体还是黑体,有那么重要吗?
  • 版式的无法多次复用:这个问题其实是上一个问题的延续。大多数情况下,写作的目的是为了发布。如果说能在写作时就把版式排完,然后能够一键全部发到各个平台上,那第一个问题的确不是问题。但是事实上是怎么样呢?例如插图、链接、字体字号等等,有多少可以不做任何修改,直接无痛粘贴到任何一个平台?微信公众号、知乎、知乎专栏、简书、博客…这么多场景需要去发布文章,难道我要每次都重新编辑一次吗?
  • 难以版本跟踪:从 V1.0 到 V20.0 的无数版本,作为一个肉体根本不清楚到底如何去命名这些版本文件。

正是以上一些问题,导致在传统模式下的写作流程效率极其低下。也正是如此,才有了本文的主角:Markdown。

Markdown 完全解析

什么是 Markdown?

Markdown是非常棒以及流行的写作语法,「易读易写」,极其容易上手。Markdown诞生于互联网时代,更是由深谙互联网文本之道的John Gruber等人设计。因为Ruby与github圈的极客们的热捧,以及来自 github、Stackoverflow 等的大力支持。从一开始,就建立一个完整的生态链。

官方简介

以下内容引自Markdown 语法说明,可以作为 Markdown 设计理念的说明。

设计哲学

Markdown 的设计初衷是实现「易读易写」。
可读性,无论如何,都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布,并且看起来不会像是由许多标签或是格式指令所构成。

关于 Markdown 的使用便不再过多叙述,网络上有相当丰富的资源可以查阅。

设计初衷

「易读易写」是个什么概念?传统的富文本编辑器不方便读写吗?这里的对比对象不是 Word 这样的富文本编辑器,而是 HTML 。

在 Markdown 之前并没有一种优良的适用于网络书写的语言,从上图中可以看到左边的 Markdown 文本远比右边的 HTML 文档更加易读。
在这里再引入Markdown 作者的原话,强调一下 Markdown 的初衷。

Markdown 语法的目标是:成为一种适用于网络的 书写 语言。
Markdown 不是想要取代 HTML,甚至也没有要和它相近,它的语法种类很少,只对应 HTML 标记的一小部分。Markdown 的构想不是要使得 HTML 文档更容易书写。在我看来, HTML 已经很容易写了。Markdown 的理念是,能让文档更容易读、写和随意改。HTML 是一种发布的格式,Markdown 是一种 书写 的格式。就这样,Markdown 的格式语法只涵盖纯文本可以涵盖的范围。

当了解了这一点之后,可能大家还会有疑惑,既然富文本这种直觉式的写作模式已经十分易读易写了,为什么还要用 Markdown 呢?

为什么是 Markdown?

Markdown 是 HTML 的子集。所以在说明为什么选择 Markdown 之前,我们还需要来认识一下 HTML 的优势。认识到 HTML 相较于 Word这些文本编辑器的优势之后,我们便可以认识到为什么 Markdown 能够成为写作的主流语法。

HTML 与 CSS 的优势

我们先来回顾一下 HTML 的定义。

HTML(超文本标记语言——HyperText Markup Language)是构成Web世界的基石。它描述并定义了一个网页的内容其他除HTML以外的技术则通常用来描述一个网页的表现/展示效果(CSS)或功能(JavaScript)

可以看到,HTML 强调的是「定义网页的内容」,而剩下的工作交由其他技术实现。


基于一套基本的内容骨架可以生成各种样式的网站效果,这种方式的核心思想就是:内容与样式的分离
在进行内容确定的时候我不用关心这个内容到时候是长什么样的,只需要把内容明确好就行。而在进行样式设计的时候,就不需要考虑内容的事情,只要把对应的样式调整地好看就可以。

但是, HTML 也存在一些问题,这个问题就是:太多的标记词汇,不易阅读,不易修改,不是一个书写的语言

所以 Markdown 因运而生了。

再回过头来看下 John Gruber 的话,你就能够理解为什么他会这么说了。

Markdown 不是想要取代 HTML,甚至也没有要和它相近,它的语法种类很少,只对应 HTML 标记的一小部分。Markdown 的构想不是要使得 HTML 文档更容易书写。在我看来, HTML 已经很容易写了。Markdown 的理念是,能让文档更容易读、写和随意改。HTML 是一种发布的格式,Markdown 是一种 书写 的格式。就这样,Markdown 的格式语法只涵盖纯文本可以涵盖的范围。

基于 md 的写作流程

创作流程

文字部分

用 MWeb 、Typora 、MarkEditor 等Markdown 写作软件进行文字写作。

图片部分

实际上Markdown 对于图片的支持并不是十分友好,但是无论是 Mac 下还是 Windows 下都有对应的优良解决方案。

图床概念

图床一般是指储存图片的服务器,有国内和国外之分。国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为单线空间、多线空间和cdn加速三种。
意义:专门用来存放图片,同时允许你把图片对外连接的网上空间,不少图床都是免费的。

关于图床的具体介绍,可以看一下以下链接:

Mac 图床工具 iPic

iPic 提供了多种上传方式,最简单的方式是自动上传。在自动上传模式下,只需要复制图片,它就会自动帮你完成上传并且直接把生成的链接放在剪贴板中,应用支持直接生成 Markdown 格式的图片链接,你只需要在文档中按下粘贴键就可以了,非常方便。
如果不开启自动上传,所有复制的图片都会进入等待队列中,你可以在应用中选择需要上传的图片,避免出现误传的情况。除此之外应用还提供了拖拽上传模式,选中多张需要上传的图片后拖拽到状态栏的应用图标上,应用汇根据顺序上传图片,之后把链接批量复制到剪贴板内。
iPic 还集成在了 Finder「服务」中,你也可以通过右键菜单或者快捷键(默认 command+u)在上传图片。


复制上传

手动上传

拖拽上传

Win 图床工具 MPic

mark

功能和 iPic 基本一致。
网址:MPic-图床神器

图床工具与 MD 写作工具的协同

例如 Typora 就有基于 iPic 的的自动上传功能。

关于它的具体使用方法可以参考: iPic + Typora,方便快捷地在 Markdown 中插图

MWeb 的自动上传功能

关于 Mweb 的使用介绍可以参看这篇文章: Markdown + 文档管理 + 静态网页生成,集大成的 Markdown 应用:MWeb

预览样式效果

绝大部分 Markdown 工具均能够选择不同的样式,或者自定义样式(需学会一点 CSS 的语法)。

发布流程

在之前也说了,发布是整个写作的一个重要目的,而 Markdown 的优势也会在这里体现出来。

主流通用的媒体平台

Markdown Here

Markdown here 能够应对绝大多数主流的平台的情况。

Markdown Here 是个浏览器插件(Chrome/Firefox/Safari),可以将浏览器中编辑器里的 Markdown 文本转换成渲染过后的 HTML。又由于它能自定义 CSS,于是,对我这种平时大量使用 Markdown 格式写作的人来说实在是一大福音 —— 可惜我刚刚才知道还有这么个浏览器插件…… 要不是有人在新生大学的 APP 里提起这事儿,我还不知道啥时候能知道呢。
(可以说这个软件因为 李笑来的 Markdown 排版微信公众号的教程 火了)


可以在 Markdown Here 的这个地方修改你的 CSS 样式,然后一次配置,全网通用。

譬如像知乎、简书等都能够自动提取文章外链的图片,上传到自家的图床中,保证图片来源不会过时。

例外的微信公众平台

但是在主流之外还有个奇葩的但是不可忽视的存在:微信公众号。

2015年07月31日,微信团队发出通知,表示:为了加快图文内容的浏览速度,公众平台新增了图文消息内容中的图片上传接口。开发者可以通过该接口上传所需要的图片来获得图片链接,再把图片链接放到图文内容中。同时,为了加强平台安全性,从8月15日起,系统将自动过滤图文内容中的外链图片,但8月15日之前的图文内容不会受到影响。

不过所幸的是,MarkEditor 提供了这个问题的解决方案,可以用一键复制的方式解决这个问题。

单个用途的文档分享

有时候我们需要把一篇文章单独分享出去的时候,放在博客不大合适,导出 word 也并不方便(尤其是需要长期更新的内容),那么就需要第三方的文档发布平台。例如作业部落的 Cmd Markdown 、有道云笔记、有道云协作都可以实现类似的功能。

演讲展示、内部分享

基于分享这个需求衍生而来的,展示、分享这些场景,我们是不是也可以用 Markdown 来实现?绝大多数情况下我们做 PPT 只不过是套个模板,然后往上添加文字。那么是不是也可以用 Markdown 的形式先梳理完成整个思路,汇总成文字,然后通过简单的一些操作直接转换成幻灯片呢?

我在一起内部分享中使用了 DeckSet 这个转换软件,功能可以实现,但是使用体验极度糟糕,无法自定义任何样式,只能基于已有的模板来。功能非常简陋。
同时目前市面上有至少20种基于 JavaScript 的实现的 MD 转换幻灯片的方案,但是普遍都是只是存在于码农界。
所以在这个场景下,是不是可以开发出一个极具竞争力的幻灯片软件?
具体实现的操作方式可以参考 Xcode 中的界面与代码联动的操作。通过拖拽这种方式来替换内容,然后基本样式可以一键替换。那么这将极大地节省做 PPT 的时间。

学术论文的 Markdown 写作可行性?

Markdown写作浅谈 一文中有提到:

科技写作与文艺写作的不同主要有:

  • 公式与图表:相信各位写过科学论文的,都会为数学公式与各类图表的输出头疼不已;
  • 格式转换:pdf是通用的,但是有时偏偏需要LaTeX原始格式或者Word原始格式;
  • 参考文献:投稿给不同刊物,往往参考文献要根据对方的格式来调整。
    解决这些难题,LaTeX是国际科学界,尤其是偏数理类的学科的主流方案之一。但是实际上 LaTeX 有诸多使用上的不便。
    直到有一天,极其熟悉LaTeX,也熟悉Markdown的yihui同学,意识到了,LaTeX它可以作为最终格式生成。但是,我们中间的写作过程,完全可以用Markdown这么简单明了的语法来写,我们真正需要的,就是一堆数学公式、图表与参考文献而已
    于是,在他的新作R包knitr中,果断提供了Markdown支持。并说服R社区主流编辑器厂家,开源软件RStudio 提供 Markdown支持,从而使得Rmd这种新格式开始流行。我们有幸看到这个重要格式的诞生,国人的贡献如此重要。

因为没有进行过这种实验,所以暂不清楚是否可行。所以就抛出来和大家探讨,有兴趣的可以做一些尝试。

内容与样式的理解

最后再来提一提自己对于这块内容的理解。我个人对于内容与样式的感知是经历了三个历程。

三个阶段的提升

第一阶段:内容与样式完全耦合

HTML的富文本编辑器,如印象笔记、Word、ppt、Pages等等正常用法。

特征:字体大小随意修改,字体格式随意修改,不考虑样式修改的可控性。

第二阶段:内容与样式部分解耦


开始使用 Keynote、Pages的段落样式功能, Ps、Ai、Id 中的段落样式功能来控制常用的样式。

特征:样式自定义为主要需求(排版),用于控制批量的样式内容。自由度更高。

第三阶段:内容与样式完全解耦

就是目前我正在使用的完全基于 MD 的流程。

信息传递的认知

写作,或者说信息传达,必然是有作者的「意图」的。在创作中我们应该聚焦于我们想要传达的东西,而我们使用的工具应该要能把这种「意图」以最简约的形式「记录」下来。比如需要写作过程中我觉得这个地方需要强调。工具做的事情应该是在这个地方标记,让人能够知道那个位置需要被强调。
等到整篇文章完成之后,会留下许许多多「需要被强调的地方」,那么这个时候统一进行样式处理,比如设置成「加大一号字体,字重增加一号,修改成蓝色」,因为所有「需要被强调」的标记类型一致,那么修改也是批量化处理,在表达「意图」层面也是能够传递同样的信息意义。
在提升中,我意识到了文章的内容应该被划分为三个部分:内容格式样式
内容是作者需要传达的信息,格式是作者构建信息的「意图」,样式是作者希望信息被接受时的外观。
在我反思以前的信息处理流程中,我发现无论是第一阶段还是第二阶段,都把「格式」这个部分忽略掉了,我们无法直观的看到信息的「格式」,以至于在理解和操作层面或多或少都会感到麻烦。

基于「格式」而生的 Markdown

在前面探讨过 Markdown 的特性之后,我们可以发现 markdown 天生具有「格式」可视化的功能。通过观察一份 Markdown 格式的纯文本就能够清楚地看到作者构建信息的「意图」。这对于整个工作流来说是不可或缺的。

通过 内容 -> 格式 -> 样式 的流程,创作的自由性将得到极大的发挥。我们只需要专注信息本身,关注信息的属性类型,并用最简单的标记将其标记好即可。
通过一份预先设定好的样式模板,便可以一键获得最终的发布文章的样式,并且由于最终排版效果完全基于 HTML 和 CSS 生成,这些排版效果均可以一键分发到各个信息平台而不需要中间的任何修改。
我想这才是一个互联网写作流程的终极状态。以最小单位的控制方式来获得最终的复杂结果。

最后,以之前在 杨志平 的博客中看到的一段话作为文章结尾,可以说这段话非常能够表达我的感受。

肉体不是认知的外在,而是认知的本身;语言不是思想的外衣,而是思想本身;文体不是文章外衣,而是文章本身。同样,工具不是思想的外在,而是思想本身。 人们从来喜欢高估自己的意志力,却总是低估工具或环境对心智模式的影响。 ——如何21天写一本书(2)

参考资料

  1. 如何21天写一本书(2)
  2. Markdown 语法说明
  3. Daring Fireball
  4. Markdown写作浅谈
  5. Pandoc User’s Guide
  6. Markdown生态链整理
  7. iPic + Typora,方便快捷地在 Markdown 中插图
  8. Workflow分享 - 在 iOS 设备上使用微博图床
  9. ​国内有什么方便的图床?
  10. MPIC 图床工具
  11. Markdown Here 教程(这次是及格版)
  12. Markdown编辑微信公众号的完美攻略
  13. 一个码字工作者的正确书写发文姿势—— 用MWeb+Markdown Here+七牛 轻松实现多平台发布
  14. Markdown + 文档管理 + 静态网页生成,集大成的 Markdown 应用:MWeb