本文首发于公主号 等我遇见汝,欢迎移步。
公众号自带的编辑器能力有限,为了让公众号的排版更好看,不少人会使用第三方的编辑器,如135、秀米等。
但这些第三方编辑器用的人多了,难免会「撞衫」,不能形成自己的个人风格。
为解决排版可能「撞衫」的问题,我推荐你使用 Markdown 标记语言来编辑内容,辅之一些 Markdown 排版工具,就可以得到与众不同的排版样式。
Markdown 是什么?
Markdown,是一种标记语言,虽然它的定义含有「语言」二字,但它并不属于「编程语言」。
平常在 Word 中编辑文本,当你为文本设置不同的文本样式时,需要在文本和顶部的功能区之间频繁来回点击鼠标。
而使用 Markdown 编辑文本时,通过输入一些标记符号,如两个 # 号对应 Word 的「标题2」样式,文本前后各两个 * 号对应加粗等,编辑的同时也设置好了文本样式。
Markdown 常用的标记语法就那么几个,比较好记,想查看其他标记语法的朋友,可以查看网上的 Markdown 教程。
Markdown 排版工具
当我们用 Markdown 完成了文本的初步编辑后,预览得到的排版效果,还是比较粗糙的。
这时,我们可以将其粘贴到 Markdown 排版工具,通过排版工具内置的样式进行渲染,就能得到好看的文章排版。
可能吧排版器
https://knb.im/mp/
这是科技评论人 @Jnson Ng(阿禅) 开发的 Markdown 排版工具,很久以前,他的文章排版就一直为人称道,不少人总在他的文章下方留言,询问文章是如何排版的。
为此,他曾写过一篇文章《可能吧的文章是如何排版的?》,介绍了他的文章排版流程,需要用到的技能包括:HTML、CSS、Python。
后来,他将这个「硬核」的排版流程,写成了一个人人都可以使用的工具。
得益于他开发的这个工具,让我也能用上「同款」的排版,你正在看的这篇文章,就是用这个工具进行排版的。
这个工具所使用的部分 Markdown 语法,与通用的语法存在一些差别,使用它进行渲染前,需要对部分语法作出调整。
在排版器的首页,有这个工具的使用说明和用到的特殊语法,初次使用的朋友,需要先阅读一下。
Markdown Nice
https://www.mdnice.com/
Md Nice,是一款开源的 Markdown 排版工具,可能是最强的排版工具,集合了多位公众号作者贡献的不同样式。
网站左侧是 Markdown 编辑器,右侧是在手机上的预览效果,切换不同的主题,可瞬间得到不同的排版样式。
如果你对内置的样式还不满意的话,可以点击「查看主题CSS」,打开自定义外观样式的 CSS 面板。
CSS 是用来设置网页 HTML 外观样式的文件,之所以会用到 CSS,是因为这些排版工具的工作原理是:
将 Markdown 文本转换成渲染过后的 HTML ,改变 CSS ,就影响了我们最终看到的效果。
因此,修改默认的外观样式,需要你对 CSS 有基本的了解,这可能是不少朋友在大学计算机课程中学过的知识,只不过长期不用忘光了。
有兴趣了解 CSS 的朋友,可以前往网站「菜鸟教程」学习相关知识。
Markdown-Here 插件
https://www.crx4chrome.com/crx/1258/
前面介绍的两个工具,都需要先将编辑好的 Markdown 文档粘贴到排版器中,完成渲染后再粘贴到公众号编辑后台。
整个过程下来,需要经过两次复制粘贴,但这对追求排版效率的人来说,这个流程还是稍显繁琐。
Markdown-Here,是一个可以直接对 Markdown 文本进行渲染的浏览器插件。
当你把 Markdown 格式的文本粘贴到公众号编辑器后台,点击运行插件,就可以得到渲染过后的文本了,减少排版流程不必要的环节。
插件默认的渲染效果比较丑陋,如果你想得到好看的渲染效果,可打开插件的「选项」页面,修改「基本渲染 CSS」的配置,这还是需要你会 CSS 。
不过,即便我们不会 CSS ,我们可以选择使用别人分享的 CSS 样式,这里推荐 @李笑来 分享的 Markdown-Here CSS 样式:
https://gist.github.com/xiaolai/aa190255b7dde302d10208ae247fc9f2
Markdown 编辑器
前面介绍了 Markdown 及相关的排版工具,接下来为大家介绍三个好用的 Markdown 编辑器。
Visual Studio Code
https://code.visualstudio.com/
Visual Studio Code,是微软推出的开源代码编辑器,主要是面向程序员群体,但少部分人也会把它作为一个 Markdown 编辑器。
VS Code 软件默认的语言是英语,为方便中文用户使用,最好先安装一个汉化插件。
软件左侧边栏有 5 个图标,点击最下方的图标,进入插件管理面板,在搜索栏输入 Chinese(Simplified) Language Pack for Visual Studio Code 搜索。
搜索返回的结果中,第一个就是汉化插件,点击插件,在打开的详情页中,单击 install 按钮进行安装。
汉化插件安装完毕后,软件的语言不会自动变成中文,需要使用快捷键 Ctrl+Shift+P 打开命令面板。
输入关键字 display ,点击返回的搜索结果 Configure Display language,选择 zh-cn,之后重启 VS Code,软件的语言就切换为中文了。
使用快捷键 Ctrl + N,新建一个文档,点击右下角的「纯文本」,在弹出的「语言模式」面板中,选择 Markdown,这样当前的文档就可以使用 Markdown 的语法了。
为了实时预览 Markdown 文档的效果,最好给 VS Code 安装一个 Markdown 预览插件「Markdown Preview Enhanced」。
插件安装方法与前面一致,这里不赘述。安装了预览插件后,在文档空白处右击,选择菜单中的「Preview」。
打开预览窗口后,编辑窗口与预览窗口并排,就能实时预览 Markdown 效果了。
Typora
https://www.typora.io/
Typora,是一个免费的跨平台 Markdown 编辑器,支持 Windows、Mac和Linux 三大平台。
当你使用 Markdown 语法编辑文档时,一边编辑,一边可以实时预览效果,所见即所得,不像 VS Code 通过并排的窗口进行预览。
Typora 整体设计简洁,产品内置了一些贴心好用的功能,如大纲视图和文章目录,方便用户浏览篇幅较长的文章。
点击「视图--大纲视图」,软件左侧会打开大纲视图面板,大纲视图展示了文章的整体框架,点击不同的标题,可以跳转到对应的文章段落。
在文章开头处,输入 [TOC] 并回车,会自动生成文章目录,点击目录中的任意标题,同样可以跳转到相应的段落。
印象笔记
印象笔记,是一个云笔记软件,它可以创建 Markdown 格式的文档,因此也可以作为一个 Markdown 编辑器。
相比前面介绍的两个工具,印象笔记最大的优点在于云同步,你在公司编辑的文档,回到家也能继续编辑,不需要考虑文件传输或同步的问题。
可能会遇到的问题
使用 Markdown 来写文章,稍微有点麻烦的地方在于,图片的使用。
在 Markdown 中,使用的图片都是通过链接的形式添加到文章中的,下图中的图片就是使用 https开头的链接引用到Markdown中的。
图片通过链接进行引用,这就需要我们先将图片上传到服务器中,在网上用于存放图片的服务器,叫做「图床」。
若你觉得图床比较陌生,也可以将图床理解为网络相册,如 QQ 空间相册、微博相册等,我们发布在 QQ 或微博的照片,其实就是存放在了腾讯和新浪的服务器上。
对于发布在公众号的文章,我的建议是,当你按照前面的流程,完成了所有的排版工作后,再上传文章用到的所有图片。
这样一来,图片就放在了微信的服务器上,无需担心使用第三方图床中途挂掉、导致图片显示失败的情况。
写在最后
在短视频崛起的当下,有些人对是否要做公众号,还保持着观望的态度,因为不少人觉得自己错过了所谓的「红利」或「风口」。
如果你一直观望犹豫,不「躬身入局」,那你也只能是一直站在路边鼓掌的人。
本文只是从排版的角度,对可以使用的一些排版工具进行了整理,好的排版,就像好的设计一样,可以为内容加分,如虎添翼。
但做公众号,最根本的,还是要从内容做起,优质的内容,才是一个公众号的「根」和「本」。
这个信息爆炸的时代,优质的内容,依旧是稀缺的,优质的内容,依旧有出头之日。