简单入门这款插件，就能让你的原创绚丽多彩，立马高大上！

前几天看到值友一篇原创，分隔符和文章中的字体可以自由调节颜色，还可以随意穿插各种彩色的文本框。这样是不是很高大上！是不是很绚丽多彩！

瞬间就被这种色彩丰富的编辑形式打动了，喜欢折腾的我，怎么能不知道这个方法呢。随即在自己的原创编辑页面到处找相应的工具栏，可是没有啊？难道我们用的不是一样张大妈？不懂就问呐，先问问张大妈。结果。。。

没办法，张大妈都不知道，那只有作者自己知道了。正好这几天光荣成为张大妈“普通生活家”中的一员，给了我和作者直接交流的机会。并得到了想要的答案：使用Markdown here插件。感谢@囧小平

既然知道了答案，就开始慢慢折腾、慢慢学习。

Markdown Here

了解Markdown Here前，我们先来了解一下Markdown。

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。它允许人们“使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档”。

而Markdown Here是一款浏览器插件，是将浏览器中编辑器里的Markdown语言文本转换成渲染过后的网页文本。据说，开发者Adam总需要把Github上用markdown写成的文章复制到邮件里发给别人，结果邮件编辑器无法识别markdown语法，Adam只好自己开发了这么一款插件来解决自己的苦恼。最初是为了在Gmail和Thunderbird上写邮件时使用的，但后来拓展到其他邮件文本编辑器和浏览器各平台编辑器上。
官网传送门：Markdown Here
简单点说，就是在张大妈原创编辑器上，输入特定的“Markdown”语言文本的内容，通过Markdown Here插件一键转换成有颜色字体或分割线等等已经排版好的文本。
在一番折腾后，我发现只需要掌握几个简单的代码和语法就能轻松改变原创的视觉效果！
各位值友，坐稳了，Markdown Here入门的车就要开啦。

安装插件

首先安装插件，Markdown Here插件支持的常用浏览器有Chrome、Firefox和Safari。这里以Chrome浏览器为例。

进入官网进行安装，点击对应Chrome链接后，会自动跳转Chrome商城进行添加应用。
如果商城进不去，这里有离线安装包：Markdown Here，提取码：6a2a

插件调试

安装完后，右键点击右上角图标，选择选项进行调试。

在选项页面中，修改基本渲染CSS参数，就可以实现相应的效果。

这次我们需要实现的效果有三种。

• 有颜色的字体

• 有颜色的分隔符

• 有颜色的标题H1和H2

  有颜色的字体

  将下列代码复制于“基本渲染CSS”文本框最末。

  strong,b{ /*strong表示强调，用粗体显示，也可以自定义自己的强调方式*/color: #0000ff; } em,i{ /*em表示强调，用标签斜体显示，也可以自定义自己的强调方式*/color: #009688; }

  这两个代码的意思是粗体和斜体均有颜色，我们选用的粗体颜色是color:#0000FF，斜体显示颜色是color:#009688。其中“#0000FF”和“#009688”是十六进制颜色码中的蓝色和绿色。我们可以在下方预览中看到相应的效果。

有颜色的分隔符

再将下列代码复制于“基本渲染CSS”文本框最末。

hr { /*水平线分割---*/ border: 1.5px solid #FF6600; margin: 3em auto; }

此代码的意思是水平分割线的基本设置， “border: 1px”代表分割线的粗细，”#FF0000”为分割线的颜色，“margin: 1.5em”代表分割线与上下文字的间距。
预览一下，看下效果。

有颜色的标题H1和H2

在“基本渲染CSS”文本框内，找到代码“h1”和“h2”行，这里“font-size: 1.6em”代表字体大小；“border-bottom: 1px solid #ddd;”代表H1标题下的下边框，厚度为1px，颜色是“#ddd”淡灰色。
我们需要更改的是将H1下的下边框属性代码删除，然后添加字体颜色代码“color:#ff0000”即红色字体。H2下插入字体颜色代码“color:#ff004d”玫红色，更改下边框颜色为“#ff004d”玫红色。
具体如图所示。

常见颜色十六进制代码

也可在线进行颜色选择，选择你想要的任何颜色，传送门：在线配色

常用语法

“基本渲染CSS”属性配置完成后，就只需要掌握几个简单的Markdown语法，在写原创时顺道添加就OK了，简单点说，就是不需要再选择张大妈编辑窗口的功能按钮，只用在打字时多输几个符号。那么我们来看看最常用的语法。

分级标题

在标题文字前添加“#”来实现分级标题，加一个就是一级标题，加两个就是二级标题，以此类推。

字体

实现字体“加粗”，即在文字两侧添加两个“*”。

实现字体“斜体”，即在文字两侧添加一个“*”。

分割线

输入三个减号“-”即可。注意，分隔线与上方的文字间需要空一行。

引用

在引用的内容前面加上“>”即可。注意引用结束时，需要多用一个行（多按一个回车）。

基本上常用的就是这么几个语法了。

实际效果

基本渲染CSS也设置完了，语法也掌握了，那么就是码字写文了。
等文章全部编辑完成，最后只需左键点击右上角插件图标“单击转换Markdown”，OK。

是不是变得高大上了呢！

进阶

目前Markdown here的主流用法是各种公众号的编辑。
而Markdown更是不得了，网络上也提供了很多款优秀的Markdown软件，比如MWeb、Typora、MarkdowPad等等，因适用多种平台，只需要编辑一次，就可以通过复制粘贴来适应各个平台，无需再次排版；能让作者更加专注的编辑文章，而不需要时不时的使用“标题H1”、“加粗”、“引用”等功能按钮。
这些都是更加深入的知识点了，我也只知道个皮毛，还需要更深入的学习。

总结

这篇原创也只是带领大家入门Markdown Here插件，其实还有更多深沉次的知识点等着我们去探索。相信大家掌握文中的几个知识点之后，是不是就能让你的原创更加丰富多彩呢？赶紧操起键盘，来创作自己富有个性的原创吧！
最后，希望本篇能给各位值友带来一些帮助，喜欢的值友可以点赞、收藏和打赏！感谢大家观看，咱们再见～