如果你有使用网页编辑器的需求，比如用 WordPress 搭建了博客、有自己的公众号之类，那么难免会困扰于其简陋的功能，更无奈的是这其中的绝大多数还是富文本编辑器，这让 Markdown 用户颇为别扭，而「Markdown Here」我们就可以在这些富文本编辑器中找回熟悉的感觉。

简单介绍

Markdown Here 是一个插件，支持 Chrome、Firefox、Safari、Opera 和 Thunderbird，可以将浏览器中编辑器里的 Markdown 文本转换成渲染过后的 HTML，并且支持自定义 CSS，也就是说我们可以在网页编辑器中直接用 Markdown 语言编辑内容，然后一件转换成预设好的排版。

据作者描述，Markdown Here 的开发初衷是希望在电子邮件中获得 GitHub 一样的编辑体验，但得益于 HTML 的通用性，Markdown Here 可以在绝大多数的网页编辑器中使用，项目 Wiki 中已经列举了包括 Evernote 和 WordPress 在内一些兼容的编辑器，其实使用场景远不止这些，比如在国内，就有很多公众号使用 Markdown Here 排版。

使用方法

  1. 访问你所用浏览器的官方商店或是 Markdown Here 的官网 下载页面 获取插件。

  2. Markdown Here 安装完成后地址栏显示插件图标，右击进入设置界面（Safari 在浏览器插件设置界面进入），在这里可以进行 CSS 的设置（后文会对 CSS 语法做简单说明）并预览显示效果。

Markdown Here 插件图标，在默认支持的页面会高亮
Markdown Here 插件图标，在默认支持的页面会高亮

  1. 设置完成后将需要转换的文字粘贴在编辑器中，点击插件图标即可完成转换（再次点击可转换回 Markdown 文本）。

以微信公众号为例，转换接近完美
以微信公众号为例，转换接近完美

自定义 CSS

CSS 即层叠样式表，简单地说它告诉浏览器应该以何种方式显示 HTML 文件里的那些元素，这里要介绍的就是如何通过自定义 CSS 让 Markdown Here 将文本转换成我们需要的排版。

一篇去除 CSS 的派早报是这样的
一篇去除 CSS 的派早报是这样的

Markdown Here 的 CSS 分为基本渲染和语法高亮两个部分，由于语法高亮已内置大量包括 VS、Xcode 在内成熟的主题，就不多做介绍，这里主要讲基本渲染这一部分。

/*在默认的Markdown-Here-CSS基础上对设置做简单说明，相同设置项不重复说明。本人对 CSS 的了解颇为肤浅，如有错误，还望指正*/
.markdown-here-wrapper { /*Markdown Here 的全局配置，没有默认值*/
}

pre, code { /*pre和code用于代码显示，code通常以元素框即代码块显示，pre则只保留代码中的空格与换行符*/
  font-size: 0.85em; /*字号，em默认是相对16px的大小，也可直接用px作单位*/
  font-family: Consolas, Inconsolata, Courier, monospace; /*字体，系统内没有CSS建议使用的字体时会调用默认字体*/
}

code {
  margin: 0 0.15em; /*外边距，0为默认值，auto为浏览器自动计算的外边距*/
  padding: 0 0.3em; /*填充，用于设置元素边框与元素内容之间的空间*/
  white-space: pre-wrap; /*如何处理元素内空白行，回车or忽略,nowrap不换行，pre-wrap换行*/
  border: 1px solid #EAEAEA; /*边框，用于设置边框属性，1px为边线尺寸，solid意为实线，#EAEAEA为边框颜色*/
  background-color: #F8F8F8; /*背景色，采用16进制*/
  border-radius: 3px; /*用于设置元素框圆角尺寸*/
  display: inline; /*元素框的类型*/
}

pre {
  font-size: 1em;
  line-height: 1.2em;/*行高*/
}

pre code {
  white-space: pre;
  overflow: auto; /*内容益处元素框时候的处理，默认auto*/
  border-radius: 3px;
  border: 1px solid #CCC;
  padding: 0.5em 0.7em;
  display: block !important; /*!important用于提高设置优先级，用于与其他设置相冲突时*/
}

strong, b{ /*强调*/ 
  color: #BF360C; 
} 

em, i { /*斜体*/ 
  color: #009688; 
} 

hr { /*分割线*/
  border: 1px 
  solid #BF360C; 
   margin: 1.5em auto; 
}

p { /*段落设置*/
  margin: 1.5em 5px !important;
  color:#d6a841;
  font-family:'微软雅黑';
  font-size:15px;
  line-height:100% 2 100px; /*行间距，可用百分比，数值倍数，像素设置，还包括text-indent缩进、letter-spacing字间距、*/
  margin-bottom:20px; /*段间距*/
}

table, pre, dl, blockquote, q, ul, ol { /*表格、预格式化、定义列表、块引用、短引用、无序列表、有序列表通用设置*/
  margin: 1.2em 0;
}

ul, ol { /*无序、有序列表通用设置*/
  padding-left: 2em;
}

li { /*列表中项目的设置*/
  margin: 0.5em 0;
}

li p { /*列表中项目的段落的设置*/
  margin: 0.5em 0 !important; /*需加!important才能生效*/
}

ul ul, ul ol, ol ul, ol ol { /*有序列表、无序列表的统一设置*/
  margin: 0;
  padding-left: 1em;
}

ul  { 
  list-style-type: circle; /*无序列表的前缀，circle,square,好多种,同样有序列表ol也可以设置不同的标记*/
}  

dl { /*自定义列表的设置*/
  padding: 0;
}

dl dt { /*自定义列表项的设置*/
  font-size: 1em; 
  font-weight: bold; /*字重*/
  font-style: italic; /*字形*/
}

dl dd { /*自定义列表项的定义的设置*/
  margin: 0 0 1em;
  padding: 0 1em;
}

blockquote, q { /*引用块设置*/
  border-left: 4px solid #DDD;
  padding: 0 1em;
  color: #777;
  quotes: none;
}

blockquote::before, blockquote::after, q::before, q::after { /*before 和after属于css伪元素，:before在元素之前插入相应。：after在之后插入*/
  content: none;
}

h1, h2, h3, h4, h5, h6 { /*各级标题统一设置*/
  margin: 1.3em 0 1em;
  padding: 0;
  font-weight: bold;
}

h1 {
  font-size: 1.6em;
  border-bottom: 1px solid #ddd;
}

h2 {
  font-size: 1.4em;
  border-bottom: 1px solid #eee;
}

h3 {
  font-size: 1.3em;
}

h4 {
  font-size: 1.2em;
}

h5 {
  font-size: 1em;
}

h6 {
  font-size: 1em;
  color: #777;
}

table { /*表格元素的设置*/
  padding: 0;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1em;
  font: inherit;
  border: 0;
}

tbody { /*表格主题的设置*/
  margin: 0;
  padding: 0;
  border: 0;
}

table tr {
  border: 0;
  border-top: 1px solid #CCC;
  background-color: white;
  margin: 0;
  padding: 0;
}

table tr:nth-child(2n) {
  background-color: #F8F8F8;
}

table tr th, table tr td { /*tr为行标签、th为表头单元格标签、td为普通单元格标签*/
  font-size: 1em;
  border: 1px solid #CCC;
  margin: 0;
  padding: 0.5em 1em;
}

table tr th {
 font-weight: bold;
  background-color: #F0F0F0;
}

除了 Markdown Here，一些本地编辑器比如 Ulysses 和 Typora 也支持使用 CSS 自定义预览样式。

对于 CSS 设置有困难的用户，我建立了一个 GitHub 项目，分享一些从各处收集来的 CSS 样式。