255
222
【互联网写作秘籍】Markdown与自媒体写作排版指南
2020-06-29 17:42:13
25点赞
134收藏
12评论
互联网时代人人都可以做自媒体，会拍 VLOG 的可以当个视频 UP 主，会码字的可以运营个公共号。我是从 19 年 6 月开始慢慢在网上分享一些科技数码相关的产品开箱体验、DIY、指南之类的文章。从最开始的用 Word 先在本地写文字，复制粘贴到各个平台后再编辑格式分别上传图片，内容写完后没个把小时搞不定格式，到现在内容写完后几分钟就能多平台快速发表，形成了自己的一套高效写作投稿流程。乘着假期有空闲，我把经验分享出来，帮助新手小白在写作时少走一点弯路，不要让繁琐的格式工作浇灭了写作的热情，希望大家多阅读、多写作、多分享。
前四章是 Markdown 语法介绍，第五章是写作排版的一些规范，有相关基础的小伙伴可以直接跳转到第六章查看我的写作投稿流程。
张大妈的编辑器不能自动识别 Markdown 的一二级标题，也就无法在左侧点击目录快速跳转了，我用 Xmind 做了一个大纲图，方便查看。
一、纯文本、富文本与 Markdown
1.1 纯文本
Windows 系统自带的记事本（notepad）软件是一款无格式文本编辑器，里面的内容是纯文本，没有任何格式，也常用来给 Word 或者网页上复制的内容去格式。你将 .txt 文件发送给任何人任何系统几乎都可以直接打开查看（有时需要注意下编码格式）。
1.2 富文本
纯文本文件不方便阅读，也不支持插入图片。于是有了富文本格式，比如最常见的 .doc 格式的 Word 文档，用户只需动动鼠标就可以进行文本、段落、图片等样式的设定，所见即所得，你把格式调整成什么样子立刻能看到显示效果，图片也是直接嵌入到文档中。不过在分享 .doc 文档时常常由于双方的 Word 版本不同或者各种奇奇怪怪的原因，有时排好版的内容会发生格式混乱，所以在打印 Word 文档时往往要保存为 .pdf 格式。
1.3 HTML 语言与 CSS
富文本格式的文档大部分时候只适合在本地阅读，你用 Word 排好版的内容样式没法直接在网页上正确显示出来。于是出现了用来描述网页的 HTML 语言。HTML 使用尖括号包围的关键词，比如 <html> </html>作为标签来描述网页中的所有内容，包括以超链接形式存在的图片、视频等。HTML 本身就是个文本文件，可以用记事本打开。HTML 语言占用空间小，方便网络传播，且与平台无关，你在任何浏览器上打开同一个网页基本都是一样的，这也是万维网（WWW）盛行的重要原因。
单纯使用 HTML 语言来标记文本工作量大，无法统一修改样式，于是出现了层叠样式表 CSS，通常保存在外部的 .css 文件中，我们只需要编辑 CSS 文档就可以改变所有页面的布局和外观，极大的提高了工作效率。但在网络环境不太好的情况下，网页有时未能加载样式造成页面只显示内容，格式混乱。
1.4 Markdown 语言
Markdown 是一种用来写作的轻量级「标记语言」，类似于 HTML，和 CSS 没关系。它用简洁的语法代替排版，而不像一般的文字处理软件 Word 有大量的段落、字体等格式设置。它使用户专心于码字，用「标记」语法，来代替常见的排版格式，从内容到格式，甚至插图，键盘就可以通通搞定。你只需要按规定的语法来写作，编辑器会自动帮你渲染好样式。
Markdown 流行起来就是因为它语法简单，几分钟就能了解它的全部语法。相对于 HTML 各种复杂的标签，Markdown 对写作者更加友好。相对于平时用的 Word 的各种密密麻麻的按钮（你肯定见过好多 Word 培训的书），用 Markdown 写作更快，更简单，而且很容易在互联网上分享。
初学者推荐先尝试下 Cmd Markdown ，这是个网页版的 Markdown 编辑器，左侧是内容编辑区，右侧是实时的渲染效果。Markdown 语法很简单，几分钟就能全部看完。当你对 Markdown 语法有一定的了解打算开始写作了，我推荐使用 Typora，极致简洁的界面、所见即所得的实时预览功能让你专注于写作而不用在意格式，是我用过最舒服的 Markdown 编辑器。
二、常用样式
对上述基础内容有所了解后，接下来介绍 Markdown 的基本语法和辅助用的 HTML 标签（比如 Markdown 语法不支持设定字号与颜色，可以用<font>标签实现），帮你快速入门 Markdown 写作，丰富文章的表现力。
2.1 标题
在想要设置成标题的文字前加 “#+空格” 来表示，Markdown 支持六级标题，规则是几级标题就加几个#：
对于一级和二级标题，会采用下划线方式，同时会在 Markdown 中自动生成 1/2/3 级目录。
2.2 文本
颜色与大小：
<font color=#green size=3>字体大小为3，颜色为绿色，也可用Hex值指定颜色</font>下划线：
<u>下划线</u>删除线：
~~删除线~~或者<del>删除线</del>，优先使用前者加粗：
**加粗**倾斜：
*倾斜*超链接：
[超链接要显示的文字](地址 "超链接title(可省略)")，比如 百度：[百度](www.baidu.com)
大部分情况下使用纯 Markdown 语法即可完成图文排版，在不同的编辑器中显示效果也不会差太多。这里的 HTML 标签是对 Markdown 语法的一种补充，不一定都能正常显示，跟具体的编辑器有关。
2.3 格式
单行或者部分代码：在代码前后加上`（英文输入法状态下输入 shift + 键盘上 esc 键下面、数字 1 键左边的那个键），可以避免代码内容被编辑器错误渲染。
多行代码：在代码段落段前段后分别加上```，则两个```之间包含的内容不会被编辑器错误渲染，显示为代码块。
无序列表：
输入 - 之后输入空格
有序列表：
输入数字 + “ . ” 之后输入空格引用：
输入 > 之后输入空格
<center>居中</center>：
分割线：三个及以上的 - 或者*
2.4 图片
插入图片的格式为：，其中 text 用来描述图片的关键词，可以不写。url 是图片链接，可以是图片的本地地址或者是网址。”optional title”：鼠标悬置于图片上会出现的标题文字，可以不写。
如果要插入网络上的一张图片，形式为：，对于本地图片，直接拖入 Typora 编辑器中即可自动生成格式。
Markdown 语法最让新手头疼的一个地方就是插入图片，本地写作时，Typora 中直接拖入或者粘贴剪切板里的图片到当前文档中可以设置成使用相对路径，且复制图片保存到到当前路径文件夹内。这样就不用担心因为移动文档路径而导致图片无法正常显示。
Typora 中插入图片相关设置建议如上图所示，在「格式-图像-插入本地图片」里面设置为复制图片到当前文件夹并使用相对路径。这样每次截图或者将任意地方的图片拖动到 Typora 编辑器内，会自动将该图片复制到当前 .md 文档目录下的 file_pic 文件夹内，不会因为移动文件夹目录而造成图片链接失效。
2.5 图床
Markdown 与 Word 处理图像最大的不同就是在 Word 中图片是嵌入到文档中的，给其他人分享文档直接把 .doc 文件发给他就行了。而在 Markdown 中图像是链接的形式，如果你只是把 .md 文档发送给他人，对方是无法显示图片内容的，所以在写 Markdown 文档时需要提前新建一个文件夹，并如上一节中所述正确设置全局图像处理方式，分享时需要将整个文件夹一起分享，或者在本地将 .md 文档导出为 PDF。
Markdown 这种图像处理方式看似繁琐，在网上传播却是大大的优势，作者可以将图片上传到互联网服务器上生成 URL 链接，再把链接添加到 .md 文档中，这样就避免了在不同的平台发表文章需要分别上传图片附件的重复性劳动，这种存储图片的服务器就是图床。
常见的图床有千牛、sm.ms、PicGo 等等，以免费免登录的 sm.ms 为例，将本地图片拖入浏览器中点击 Upload 就会生成该图片的图床链接 https://i.loli.net/2020/01/11/BmVo4GFperTgadD.jpg ，然后将该链接以 Markdown 的语法形式插入文档中即可。
图床虽然解决了 Markdown 网络图片传播的问题，但是有一些缺点：
图片上传到图床生成超链接再插入文档步骤繁琐，不如直接拖入来的方便。
大部分图床网站都有容量限制，有的服务需要付费使用。
对各家网站来说，读取图床上的图片需要一定时间，没有读取自家的服务器快。
有的网站会限制外链，或者当图床链接过期或图床服务器挂了之后，图片链接会失效，比如下面张大妈的这篇文章中的图片全挂了，右键图片查看地址，可以看到该图片存储在简书的服务器上。
互联网上每一张图片都是存储各家公司的服务器上，右键该图片就能查询所在地址，只不过这些服务器不对我们开放无法作为图床。我自己的写作过程中一般也不用图床，因为我找到了更高效的图片处理方法，具体见第五章节。
三、Markdown Here 插件
前面介绍了 Markdown 语法的基础知识，这些语句还需要经过渲染才能呈现出最终我们看到的排版样式。本地写作可以用 Markdown 编辑器来渲染，比如 Typora。对于网页上的写作，则需要使用 Markdown Here 浏览器插件（下载链接见文末，直接把 .crx 文件拖入 Chromium 内核的浏览器里即可），它可以将浏览器中博客、论坛、邮件等支持富文本的编辑器里的 Markdown 文本转换成渲染过后的 HTML。也就是说这些网页编辑器本身是不支持用 Markdown 写作的，通过 Markdown Here 插件将 Markdown 文本直接渲染成网页通用的 HTML 格式，来曲线使用 Markdown。
3.1 使用方法
以什么值得买和少数派平台为例，这两家都自带了简单的编辑功能，比如标题、加粗、斜体、引用、序号、超链接等。也正是因为简单，这两个站内的文章看起来很舒服，没有花里胡哨的形式，让读者专注于内容。
将 Markdown 源文档复制到编辑区时，是不会自动渲染的；将渲染后的样式复制到编辑区时，又会被去除格式。（在微信公共号之类的编辑器里是可以粘贴渲染后的样式的。）这时候就需要用到 Markdown Here 浏览器插件来进行渲染了。
在编辑区里用 Markdown 语法编写好内容后，点击浏览器插件栏的 Markdown Here 图标就可以将你用 Markdown 编写的内容转换为 HTML 内容。
注意如果使用 Markdown Here 渲染的话就不要再用自带的编辑器编辑格式了，两者混用容易造成格式混乱。也就是说简单点就全部用自带的编辑器编辑内容，要想表现形式更加丰富一点就全部使用 Markdown 语法 + Markdown Here 插件来排版。
3.2 自定义 CSS 样式
Markdown Here 支持设置自定义 CSS，在 Markdown Here 的设置页面中可以自定义设置你喜欢的渲染样式。就是可以自定义“你说的黑是什么黑，你说的行高有多高”，类似于换个皮肤。像 Typora 编辑器里面的「主题」选项，其实就是调用一些 CSS 文件，让你选择不同的渲染风格。
大家知道李笑来可能是通过他有关币圈割韭菜的录音，其实他本人是最早一批使用并推广 Markdown 语法的，李笑来的个人 CSS 样式，是被大家所推崇的一款样式，对中文比较友好，他的公共号文章排版看起来简单优雅。这是他 Markdown Here 教程 。
上面链接里有李笑来的 CSS 代码，直接复制粘贴到 Markdown Here 选项的基本渲染 CSS 里面就行了（语法高亮 CSS 内置了 VS、Xcode 等成熟主题可以直接选用），CSS 代码很简单，看下他的教程就能大概理解，可以根据自己的需求个性化修改，生成专属于你的样式。
当然了除了他的，网上也有很多其他好看的 CSS 样式可以参考使用，比如 这些，如果对我目前使用的样式感兴趣可以去我的公共号 “ Hanson-Tech ” 后台回复 “CSS” 获取本文使用的我的个人 CSS 样式，文档中也包含了对所有 CSS 代码的解释说明，方便自行修改。
四、排版规范
为了让文章获得更好的阅读体验，建议遵循一些排版规范写作，我参考的就是 《少数派写作排版指南》，大概摘抄一些常见的规范贴上来。这些规范并非强制规定，但是一篇语句通顺、排版美观的文章可以提升读者的阅读体验，增强文字的可读性。
4.1 空格
① 行文时，请在中文与英文、中文与数字、英文与数字之间增加空格。例如：
推荐：苹果公司在 2015 年 9 月 9 日发布了 iPhone 6s。
不推荐：苹果公司在2015年9月9日发布了iPhone 6s。
② 一段文字中有超链接的部分，在超链接的前后使用空格。例如：
③ 每段文字的开头不需要空两格。
4.2 标点符号
① 中文引号请使用直角引号「」，而不是弯引号 “”。
② 省略号请使用 …… 标准用法，正确输入方法是 shift + 6。不要使用三个句号。。。，也不要使用三个英文句点 …。
③ 不要重复使用标点符号，尤其是在表达强烈情感的时候。例如：
推荐：这个提议真棒！我喜欢。
不推荐：这个提议真棒！！！我喜欢~~~~
4.3 中文和西文符号
① 一般情况下，一个中文句子中出现了英文部分，仍然使用中文标点，即全角符号。例如：
正确：我常用的电子设备是 Kindle、iPad Pro、iPhone。
错误：我常用的电子设备是 Kindle, iPad Pro, iPhone.
② 如果引用一段完整的英文句子，或是出现在专有名词中的标点，则不需要更改标点符号。例如：
正确：乔布斯说「Stay hungry, Stay foolish.」
错误：乔布斯说「Stay hungry，Stay foolish。」
4.4 专有名词
请正确书写常用英文名词的大小写和空格。例如：
正确：iOS 10、macOS、App Store、Android
错误：ios10、MacOS、AppStore、android
4.5 克制地使用样式工具
样式工具的使用可以增加文章的可读性，但是过度使用则会造成排版混乱，因此建议大家正确、克制地使用样式工具。
例如，需要着重显示的部分请使用「加粗」功能，不要使用「斜体」，更不要使用「加粗 + 斜体」的组合。
五、我的写作投稿流程
我身边的同学没有专业做自媒体的，问了几个偶尔写写公共号的小伙伴，发现他们的写作投稿流程还是蛮传统的，大都是先在 Word 中编辑完内容再去各大平台的编辑器里复制、粘贴、上传、调整格式，我之前也是这样做的，经过大半年来的「摸爬滚打」，摸索出一套高效的写作投稿流程，分享出来，欢迎探讨。里面用到的软件我在之前的文章里面有推荐和介绍过，搭配使用可以极大的提高写作效率。
下面以本文的写作排版投稿为例，介绍下全套流程。
Step 1. Typora 本地写作
首先在本地新建一个写作文件夹，用来存储文档和图片，我一般都是保存在 OneDrive 里，保存在网盘的好处是方便你在家里、办公室等各个地方无缝接力写作。
打开 Typora 新建一个 Markdown 文件后就可以写作了。如果是首次使用 Typora，先按照第二章第 4 节所说设置下图片保存格式为相对路径，新建文档后也一定要先保存下，这样拖入 Typora 的图片才会自动复制到当前文件夹里。
写作之前可以用 Xmind 整理下思路，然后在 Typora 中用「#」语法起好大标题和小标题，框架搭好后然后就可以往各章节填内容。其实不需要记住多少 Markdown 语法，在菜单栏-格式或者右键都有常见样式的快速设置方法。
对于最最常见的图片插入操作，单张图片我用 Snipaste 截图，多张图片我先粘贴到 Microsoft Whiteboard（Win+W 唤醒）里拼完图再粘贴到 Typora 里。
内容写作完成后，Typora 左侧会自动生成大纲，点击左下角的按钮可以至切换源代码模式。
在.md 文档路径下内会自动生成一个你设置好的文件夹来保存文档里所有出现过的图片。
Step 2. 导出 PDF 并按顺序命名图片
使用菜单-文件-导出命令导出一份 PDF 文件，PDF 文档里会嵌入图片，方便分享。也是对 .md 文档做个备份，防止因路径改变、图片误删除等各种原因可能造成的排版问题。
最重要的是使用 PDF 编辑器可以按顺序导出文档中所有的图片。因为 .md 文档写作的时候并不是线性的，自动生成的文件夹里的图片命名是无规则的，且有些文档中已删除的图片依然存在，这样后续上传到网络后一张张挑选添加会很麻烦。使用福昕高级 PDF 编辑器（普通版不行）的 菜单-转换-导出全部图像 命令可以导出并按顺序命名 PDF 中的图片，并且可以调整图像大小。
导出图像设置如下，都选最大值，这样保存的图片质量最高。
这时候就得到了按序命名的有效图片文件夹 PDF_pic（不支持 GIF 图片），接下来就可以上传到网络上了。
Step 3. 网络发布_简化版
如果你只有具体某个网站的发表需求的话，就用原网站的编辑器好了，比如说什么值得买，编辑器和图片上传功能都已经比较好用，不过跟大多数平台一样，会在图片右下角加上水印。
如果有多个平台的发表需求，比如发完张大妈再发个公众号，传统的办法就得图片上传两次，内容排版两遍。这时候就需要一个第三方的网络编辑器，我用过众多网络编辑器，最后选择了 新榜编辑器，看上的就是它支持图库管理，且图片以缩略图的形式显示在左边，文本编辑器在中间，插入图片非常方便。
先介绍简化版的发表方法，不使用 Markdown 语法。 将 PDF_pic 文件夹里的图片上传，然后直接将 Typora 里的内容全选复制粘贴到新榜编辑器里（会同时粘贴过来 Markdown 样式），在原来图片的位置会出现「·」符号，再将左侧图库的图片依次拖入文中就完成排版了。
最后全选新榜编辑器里的内容复制到张大妈里，图片会自动上传到张大妈的服务器里，不用担心外链的问题，文字段落格式会去除，剩下要做的就是设置下 H1、H2 标题，加粗等简单操作就能发布了。
如果要发布到微信公众号，可以利用新榜编辑器左侧的「常用」和「模板」进行标题、图文等格式的美化，整完后同样全选复制到公众号的编辑器里就完成了（公众号编辑器支持样式的复制粘贴）。
Step 4. 网络发布_Markdown版
如果你想统一全平台的文章排版风格，不希望在微信公众号花里胡哨的格式上浪费时间，就要用到 Markdown 语法。Typora 切换到源代码模式，复制全部内容粘贴到新榜编辑器，删除图片代码，点击左侧图片插入到对应位置。
将所有内容复制到张大妈的编辑器内，点击右上角的 Markdown Here 插件，duang~ 瞬间变成了 Markdown 的排版样式。在公众号、少数派等写作平台上可以使用同样的方法发表样式一模一样的文章。
如果你对现有的渲染样式不满意，可以参考第四章第 2 节里面所说修改 CSS 样式。再重复一句，采用 Markdown Here 插件渲染内容就不要再使用自带的编辑器更改格式了。张大妈平台有个小小的问题，渲染完成后每张图片下方都有「设为头图」字样，需要手动一个个删除，希望小编看到反馈下？
六、总结
本文主要是写给有互联网写作需求的新手看的，对于只在本地写写总结报告的同学意义不大，当成 Markdown 的科普文看看，乖乖用好 Word 就行，我自己也是在开始写公众号之后才大量使用 Markdown 语法的。
文章吸引读者的最重要是内容，而不是花里胡哨的形式，各大平台自带的的编辑器已经能够满足绝大部分的写作排版需求，本文只是作为科普以及补充，美观的排版锦上添花，大家不要滥用样式。
如果你只是偶尔要在网络上发表一篇文字，可以不用费心学 Markdown，本地 Word 图文排好版后用上节 Step3 中的简化版流程把新榜编辑器作为一个图片上传的中转站。
如果你有长期的的网络写作需求，我建议一定要学一学 Markdown，极大提高写作效率，让你越来越爱上写作这件事本身。一招 Markdown 在手，吃遍所有网络编辑器。
以上就是我对于 Markdown 的理解以及自己的写作投稿流程，作为一个刚「出道」快一年的新手作者，写的不对之处还请指正，也欢迎各位作者评论区提提意见，分享下自己的经验~
本文使用 Markdown 写作排版。
玩出个名堂
校验提示文案
Lunatic
校验提示文案
玩出个名堂
校验提示文案
Agon1
校验提示文案
不试咋知道
校验提示文案
JEJY
校验提示文案
端木先生R
校验提示文案
折了个腾
校验提示文案
怂系青年
校验提示文案
薛定谔的圆盒子
校验提示文案
薛定谔的圆盒子
校验提示文案
怂系青年
校验提示文案
折了个腾
校验提示文案
端木先生R
校验提示文案
JEJY
校验提示文案
不试咋知道
校验提示文案
Agon1
校验提示文案
玩出个名堂
校验提示文案
玩出个名堂
校验提示文案
Lunatic
校验提示文案