凤凰山笔记

如何在微信公众号中优雅的分享代码

自从开通公众号以来,经常尝试分享一些技术文章,不可避免的里面会掺杂很多代码,以前是将写好的博客里面的代码直接粘到微信编辑器里,但是复制出来的代码都很乱。比如上一篇《程序猿是如何解智力题的》,里面粘贴的代码不忍卒视…

找了半天,总结出两个比较优雅的分享代码方法

方法1:使用html2canvas 将代码转为图片

这种方法确实比较优雅,但是比较大的问题就是如果将代码转换为图片就意味着要消耗用户流量,并且展示时耗费的时间更久一些,感觉并不可取

详细介绍可以参考这篇文章:html2canvas 将代码转为图片(微信端同学请点击原文获取链接)

方法2:使用开源软件online-markdown

在Github上找到一个叫小胡子哥大神的写的这个开源软件,可以非常优雅的通过md编辑器将代码转换为html,直接复制到微信公众号编辑器即可

并且

  • 支持更换代码样式主题

  • 代码长度溢出时横向滚动

这个非常适合解决微信公众号中复制代码的问题

简单介绍下online-markdown的用法:

(1)从Github下载online-markdown源码(微信端同学请点击原文获取链接)

(2)解压后进入online-markdown-master\docs文件夹,打开index.html即可看到界面

(3)将你的代码复制进md编辑器,注意要使用md语法,比如下面这段

(4)点击“预览”即可看到生成代码的html,并且可以选择多种代码主题和样式

(5)弄好之后直接复制到微信公众号编辑器即可,是不是很优雅 /笑cry

经过测试online-markdown只有在chrome浏览器中运行的比较正常,其他浏览器可能会存在不加载样式文件的问题,如果您有更好的方法也请留言给我,谢谢

cloudroc wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
很惭愧,只做了些微小的工作,您的支持将鼓励我继续努力创作!