勾上在此会话区间隐藏所有错误,然后关闭
Markdown Here是一个浏览器插件(Chrome/Firefox/Safari),可以将浏览器中编辑器里的 Markdown 文本转换成渲染过后的 HTML。
学会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的设计有一定的关系,主次不分明。跟我遇到同意问题的人应该有不少,希望通过这篇文章能为你们解惑。