用Markdown优雅地一键排版公众号 解决公众号排版代码块换行错误的问题

用Markdown优雅地一键排版公众号 解决公众号排版代码块换行错误的问题

不知道说些啥，反正vx后台的富文本编辑器挺烂的，秀米等一众辅助工具根据界面看起来是将HTML的盒子模型的各项CSS属性以“所见即所得”的方式提供操作API，个人感觉和直接CSS调参差不多，不是很简单。

Markdown Here

写好Markdown，粘贴到编辑器里，怎么转换呢？在浏览器上安装一个Markdown Here插件即可。主流浏览器，Chrome，Firefox，Edge等都是有相应插件的。

Edge浏览器商店里搜不到？请访问Google Chrome的插件商店获取。

步骤

在Typora或者其他编辑器中编辑好markdown文档：

点击左下角“启用源代码模式”：

复制不带格式的整个文档内容至公众号或者其他的富文本编辑器中：

点击安装在浏览器中的Markdown Here插件按钮，一键排版：

进阶

如果你仅仅按照上述的操作进行排版，你将得到一个简洁且结构清晰的文章，没有上图中那些标题附近的色块、分割线之类的元素。很显然你不希望仅仅得到这样一个无趣的文档，好消息是，你可以自定义生成排版的格式，而且只需要一点点CSS知识。

不会CSS（层叠样式表）？可以花两小时时间试着在网络上搜索一下“CSS 教程”，只需到“盒子模型”附近的知识即可。

打开Markdown Here插件的拓展选项页，左边的输入框可以输入你自定义的CSS样式代码。

除了自己编写CSS编码之外，还可以在网络上搜索他人已经写好的样式。例如笔者所用的样式，就是一个由Typora的Maize主题改编而来的代码。修改Typora的主题十分简单，它本身就是一个CSS文件，将其中的#writer选择器（字样）删掉即可。

遗憾的是，CSS3的一些高级的属性在公众号的编辑器中似乎不起作用，例如截图中Typora原文档的引言块中左上角的单个引号是通过::before伪元素实现的，在公众号中却不起作用：

blockquote::before {
  position: absolute;
  top: 0;
  left: 12px;
  font-family: Arial, serif;
  font-size: 2em;
  font-weight: 700;
  line-height: 1em;
  color: var(--main-6);
  content: '“';
}

换行修复

当下版本的Markdown Here代码块的换行方式和公众号富文本编辑器的换行方式有些冲突，会导致公众号编辑完后，保存时会使代码块中部分换行消失，简直是个灾难。一个比较治标不治本的方法是在每一行代码后面加上空格，然而这种方法对于某些比较顽固地情况依然没辙（例如C语言宏定义部分）。

问题就在于Markdown Here代码块的换行方式没有使用<br>标签，你可以在Github上下载改进版/concefly/markdown-here，只不过现在上github也时好时坏，dddd。

！使用方法！

打开浏览器拓展管理页面，启用开发人员模式

下载好整个原始仓库，解压后，将其中的src文件夹拖入浏览器，安装拓展

禁用掉原始的Markdown Here插件，使用新的插件

进入新插件的拓展选项页面，在底部勾选这个选项：