0. 什么是Markdown和Markdown Here
Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。它的目的是希望大家使用“易于阅读、易于撰写的纯文字格式,并选择性的转换成有效的XHTML(或是HTML)。
Markdown Here是一个浏览器插件(Chrome/Firefox/Safari),可以将浏览器中编辑器里的 Markdown 文本转换成渲染过后的 HTML。
1. 为什么使用Markdown和Markdown Here
为什么要使用Markdown和Markdown Here,原因其实很简单:
- 学会Markdown以后,写作几乎不用考虑排版,节省的排版时间可以做更多有意义的事。
- 使用Markdown的文章缺点是不能给文章添加颜色和居中,文章的排版会稍显单调,而Markdown Here正是为解决Markdown的这个问题而生。
2. 使用Markdown Here的正确姿势
怎么用Markdown及Markdown的语法网上有很多文章介绍,这里就不赘述了。主要介绍怎么用Markdown Here,因为作为一个不懂编程的小白第一次使用还是有一点点难度的。现有网上关于介绍Markdown Here的文章(文后参考资料)都没有做详细说明,所以要想快速使用还得折腾一下。下面我来做详细说明,快速使用Markdown Here,让你的文章排版更漂亮。
2.1 安装Markdown Here插件
直接到Markdown Here官网下载,安装步骤省略。
2.2 打开Markdown Here插件
这里我只介绍Markdown Here在Chrome和Firefox两个浏览器的打开方式。
第一次安装完插件后自动打开Markdown Here,但是浏览器关闭后再打开Markdown Here,就多一个步骤。
- 在Chrome浏览器上,选择右上角Markdown Here的图标,点击选项就打开了Markdown Here。
- 在Firefox浏览器上,右上角Markdown Here的图标不能点击,点击这一栏最右侧图标“三”--->>>附加组件--->>>扩展,找到Markdown Here插件,点击选项就打开了Markdown Here。
说实话,第一次打开Markdown Here我是一脸懵逼的,完全不知道怎么用。它有两个关键部分:第二栏和第三栏。
2.3 配置Markdown Here基本渲染CSS
第二栏是配置CSS(如果不知道CSS没关系)的,也就是通过这一栏配置,我们文章的颜色、字体会更丰富。
现在网上有不少现有的CSS样例,如果不会编写,直接用网上现成的,多试几个,选择自己比较满意的,如果没有满意的,可以问朋友或者自己尝试着改。这里提供6个markdown-here-css样例,链接https://github.com/nivance/markdown-here-css。
配置Markdown Here CSS步骤如下:
- 点击其中一个css文件,复制整个文件的内容。
- 将复制的内容拷贝到Markdown Here第二栏的基本渲染CSS里,在右上角会弹出一个“已保存”的提示,说明CSS配置生效。
2.4 Markdown Here渲染效果
CSS配好后,在第三栏“预览”就能看到CSS的效果,出现了不一样的颜色。我们的文章通过Markdown Here渲染的具体操作步骤是这样的:
- 1.将用Markdown工具写好的文章拷贝后粘贴到这一栏。
- 2.点击“Markdown转换”按钮,效果就出来了。
- 3.将预览结果复制,拷贝到你要发布的平台,例如微信公众号,这样你的文章排版就完成了。
3. 总结
Markdown是我使用多年的利器,但在微信公众号显现不了它的优势,币乎的编辑器功能更弱,每次用Markdown排版后的效果奇差无比。经过多人推荐,看到他们文章的排版效果后,使用了好几次才把Markdown Here用明白。第一次使用Markdown Here阻碍我的有这两点,不知道CSS在Markdown Here上有什么用,不知道怎么应用到自己的文章里。
这两个问题跟Markdown Here的设计有一定的关系,主次不分明。跟我遇到同意问题的人应该有不少,希望通过这篇文章能为你们解惑。
4. 参考资料
(1) 一个码字工作者的正确书写发文姿势—— MWeb+Markdown Here+七牛实现一键发布
(2) 可能是目前最全面的Markdown写作解决方案
(3) 终于找到你,Markdown Here
(4) 公众号文章排版教程:Markdown Here
(5) 为什么你一定要学会用Markdown写作