用 Markdown Here 插件排版微信公共帐号文章

版权声明 本文首发自微信公共帐号： 学习学习再学习（xiaolai-xuexi）； 无需授权即可转载，甚至无需保留以上版权声明； 转载时请务必注明作者。

注意：

以下是一个“烂教程”的示例。烂教程的特点就是作者懒得写清楚，或者干脆不知道应该如何写清楚，不知道把什么写清楚，不知道写给谁，当然也不知道读者究竟在哪里需要什么样的帮助…… 于是写出来的东西，除了给自己带来一点存在感之外，对别人实在是用处不大……

1. 烂教程

有时候，脑子是短路的。写微信公共帐号都快一年了，也没想到过应该搜搜看看有没有什么浏览器插件可以用来转化 Markdown 格式。要不是在新生大学的学习圈里看到有人提起，那就可能一直想不到。真是没办法。

这个插件是 Markdown Here, 不仅支持Firefox、Google Chrome，也支持Safari。

它能把浏览器中的文本编辑器里的 Markdown 格式的文本转换成格式化之后的 html，并可以预先定制 css 样式。

关于 Markdown 编辑器，我买过好几个，各种免费的也比较了好多，最终发现只要是专门的 Markdown 编辑器就都不够好用…… 现在我用 Atom 编辑器，加上几个与 Markdown 相关的插件：

• markdown-writer
• markdown-toc
• markdown-scroll-sync
• markdown-pdf
• markdown-preview（编辑器内建插件）

我测试后的结果是，微信公共帐号的文字编辑器，其实不解析 h1…h6 的，它会统一把这些 Heading 搞成 strong…… 这个比较讨厌，所以，只能暂时对付着用，于是，我只好在 Markdown Here 的 Option 里定义了一个big，用来替代小标题。

.markdown-here-wrapper { font-size: 17px; line-height: 30px;}pre, code { font-size: 14px; font-family: Roboto, 'Courier New', Consolas, Inconsolata, Courier, monospace;}code { margin: 0 3px; padding: 0 6px; white-space: pre-wrap; background-color: #F8F8F8; border-radius: 2px; display: inline;}pre { font-size: 15px; line-height: 20px;}pre code { white-space: pre; overflow: auto; border-radius: 3px; padding: 5px 10px; display: block !important;}strong, b{ color: #BF360C;}em, i { color: #009688;}big { font-size: 22px; color: #009688; font-weight: bold; vertical-align: middle; border-bottom: 1px solid #eee;}small { font-size: 12px; line-height: 22px;}hr { border-bottom: 0.05em dotted #eee; margin: 10px auto;}p { margin: 15px 5px !important;}table, pre, dl, blockquote, q, ul, ol { margin: 10px 5px;}ul, ol { padding-left: 10px;}li { margin: 5px;}li p { margin: 5px 0 !important;}ul ul, ul ol, ol ul, ol ol { margin: 0; padding-left: 10px;}ol ol, ul ol { list-style-type: lower-roman;}ul ul ol, ul ol ol, ol ul ol, ol ol ol { list-style-type: lower-alpha;}dl { padding: 0;}dl dt { font-size: 1em; font-weight: bold; font-style: italic;}dl dd { margin: 0 0 10px; padding: 0 10px;}blockquote, q { border-left: 3px solid #009688; padding: 0 10px; color: #777; quotes: none;}blockquote::before, blockquote::after, q::before, q::after { content: none;}h1, h2, h3, h4, h5, h6 { margin: 20px 0 10px; padding: 0; font-weight: bold; color: #009688;}h1 { font-size: 24px; border-bottom: 1px solid #ddd;}h2 { font-size: 22px; border-bottom: 1px solid #eee;}h3 { font-size: 20px;}h4 { font-size: 18px;}h5 { font-size: 16px;}h6 { font-size: 16px; 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 { font-size: 16px; border: 1px solid #CCC; margin: 0; padding: 5px 10px;}table tr th { font-weight: bold; background-color: #F0F0F0;}

2. 烂教程也会有人感谢……

因为毕竟提供了一点有用的信息，所以，若是传播足够广，总是会有一些人有收获，然后礼貌地致谢。可从另外一个角度来看，这种礼貌反过来又会让烂教程的作者以为自己这样就可以了…… 许多年之后都不知道应该在什么地方后悔。

3. 好教程是什么样的？

好教程的作者，知道自己写给谁看，知道读者需要的是什么，知道读者哪里搞不清楚，知道读者在哪里会遇到困难，知道读者读过之后会有什么样的反馈…… 这其实很难的 —— 要反复实验、反复实践才能做好。