如何在微信公众平台上更好的展现代码

Give me highlight or give me death

—— M23

作为一名程序员,如果文章中需要出现代码, 必须要参考上面的一句话：不高亮，毋宁死．

起因

前段时间在微信公众号平台上发布过几篇文章,
写作环境是OS X+Macdown, 发布环境是chrome+markdown here插件. 但在发布时微信公众号平台总是把代码格式搞的一塌糊涂,以至于几乎想放弃微信平台.

最近由于工作原因,迫不得已要在微信上调格式了, 居然发现一个可行的半自动化的野路子,分享给各路写手.

Prerequisite

• 使用Markdown
• 使用chrome和markdown here插件
• 使用微信公众号发布文章
• 文章中有大段的代码

步骤说明

1. 首先确保你的chrome上已经安装了Markdown. 如图标

   
   
   

   MarkdownHere.jpg
   
   

   右键选择选项

Paste_Image.png

单击语法高亮CSS的主题,红框标注处:

语法高亮.png

选择一个自己喜欢的Style, 比如Googlecode. markdown here会自动保存.

Paste_Image.png

1. 微信公众号上新建素材,以Markdown格式并点击Markdown Here插件按钮, 生成富文本格式. 保存退出(点击markdown here之前一定要确定的是 除代码外, 全文格式已经不再发生变化. 这步很关键).
2. 再重新选中要编辑的素材, 手工调整代码框中的已经乱掉的代码格式(是的,微信的后台编辑器会帮你搞乱). 假如按回车后, 一个代码框变成了2个代码框, 不要焦虑, 按ctrl-z撤销试试. (OS X系统是command-z). 我这里的效果是直接恢复正常了.
3. 发送预览(最好多款不同尺寸的手机), 然后重复步骤2, 直到满意为止.
4. 如果没看到第一步加粗的字体, 还想改变全文格式, 则需要掌握一些富文本编辑技巧了. 比如格式刷, 缩进, 字符大小, 段落间距...那就太不Markdown了.
5. 如果还想改code-style, 请从第0步重新开始.

我最近的一篇文章格式, 作者是微笑的鱼Lilian欢迎阅读:
需求变更导致的质量蜕化及应对

下面强势插入一则广告, 我的微信公众号:

植入广告

这是什么规定,居然不让我从0开始编号, 我也不知道你们发现没有.上图:

Paste_Image.png