如何在微信公众号优雅的展现代码

我在2017-04-25日开通了微信公众号，尝试着去分享一些技术文章，不可避免的文章里面有不少的代码，尝试了不少的方法，如今算是找到了一个还不错的解决方案，所以想把这个过程记录下来。

刚开始前天然是在网上找了一番有什么好的工具能够支持，看了不少解决方案大概分为下面几种：

• 手动复制粘贴进去调一调格式
• 代码制做成图片
• 购买专业版工具导出为微信公众号格式
• 不少在线的编辑软件
• markdown here
• 其它

为何会这样呢，最根本的缘由就是微信的公众号不支持markdown的格式，好吧知乎也是，反正无论怎么的你们都还的继续用不是，就出来了不少的解决方案。并且微信的编辑器对代码这块支持也不够，幸亏支持网页直接复制你们就都利用这个机制去作工具。

排除的方案

先说说手动复制粘贴吧，原本的代码是这个格式的：

@SpringBootApplication
@EnableDiscoveryClient
public class ProducerApplication {

    public static void main(String[] args) {
        SpringApplication.run(ProducerApplication.class, args);
    }
}

在微信中就会变成下面这样，须要手动去敲回车，代码量大了苦不堪言。

@SpringBootApplication@EnableDiscoveryClientpublic class ProducerApplication {
public static void main(String[] args) {
        SpringApplication.run(ProducerApplication.class, args);
    }
}

或者是代码没有挤在一块儿，可是由于代码比较宽，只显示了半截，半截还在屏幕外面呢。

代码转化成图片，最原始的就是用截屏工具一段一段的去截屏，想一想就痛苦，业内也有人写了工具来支持，具体能够参考这篇文章：html2canvas 将代码转为图片，可是图片多了不少会影响页面的打开速度，并且编辑的时候须要一段一段的上传图片也很复杂。

购买专业版工具导出为微信公众号格式这个方式我不喜欢，第一要花钱，第二每次须要在这个软件中去处理，再导出也挺麻烦的；不少在线的编辑软件，也是同样进去都是花花碌碌的页面，广告贼多，有些还必须先注册，体验不好。

因此以上的几种方式在一开始的时候就被我放弃了。

选择方案

刚开始的时候就看到了markdown here这个款工具，感受算是体验也不错，也用了有一阵子了。我使用的是chrome浏览器，其它浏览器也有对应的插件，使用步骤以下：

• 在Google Chrome中安装Markdown－here插件
• 在sublime中用Markdwon格式书写
• 拷贝粘贴到微信公共账号的编辑器中
• 点击浏览器上的插件按钮，使用Markdown－here渲染
• 插入图片，修订

也能够自定义CSS，自定义代码高亮的格式等等，可是它也有两个致命的缺点：

• 以markdown格式粘贴进去以后，使用快捷键“CTRL+Ctrl+Alt+M”生成html后代码格式也没有问题，可是点击保存以后不少代码就会黏在一块儿，什么缘由呢？Markdown 解释器在转换代码片断时，没有在换行的时候添加
  标签，而是直接输出一个换行符 \n，微信编辑页在保存或者预览时，将部分换行符给过滤了。
• 就算代码格式正常，使用苹果微信查看代码的时候会被自动折行，效果不好。

第一个问题也有解决方案，网上有开源精神的朋友写了插件来支持，具体能够参考这篇文章：微信公众号代码区域换行问题（解决）,可是第二个问题仍是不能解决，而后我只能每次贴心的给推送的文章下面加这么一句话：

苹果手机代码会折行，建议苹果用户点击阅读原文查看，效果会更好一些。

每次在公众号下面去粘贴这一句，感受也挺傻X的。

我在网上查找解决方案的时候，偶然看到小胡子哥做者写了一个开源软件:online-markdown,界面以下；

使用方式很简单，将写好的markdown格式的代码直接复制粘贴到这个页面里面，点击预览就能够看到渲染后的效果了，根据本身的须要也能够在上面选择不一样的样式和代码高亮的格式，选完以后点击复制，直接粘贴到微信公号的编辑器中既可，我试着用了一下效果不错。

你们可使用这个地址来测试http://md.ityouknow.com/

可是仍是有一些小瑕疵，做者也会去完善，感兴趣的能够去github上面star一下。小瑕疵有两个：

• 一、能够选择的样式不是不少，只有三种，但若是你感兴趣的话能够本身去加
• 二、“- ”的格式转换不是很好，会换行。我看有人已经提出来了，做者应该也会很快修复这个问题。

目前这个就是我选择使用的方案了，也但愿这个工具能够帮助到你们。

若是你有更好的解决方案，也请必定告诉我。

个人公众号是：纯洁的微笑（KeepPureSmile），欢迎你们关注一块儿交流。