在公众号中优雅地呈现代码
这几天有不少朋友在我的微信公众号留言,问我是如何在公众号页面中整齐摆放代码的,今天就分享下我的方法,事实上我也折腾了好一会儿。
长话短说
Markdown 解释器在转换代码片段时,没有在换行的时候添加
<br>
标签,而是直接输出一个换行符\n
,微信编辑页在保存或者预览时,将部分换行符给过滤了。
下文主要讲的是很多公众号维护者遇到的代码展示问题,以及处理这些问题的几个思路。
自动批量将代码转为图片
观察了很多技术类公众号,绝大多数为了保证良好可视效果,直接采用代码截图,这种做法很简洁,但也存在几个问题:
需要人肉截图和上传图片,对公众号维护者来说很麻烦
页面中代码截图太多,也影响阅读,尤其是弱网下的读者
截图控制不好,会出现多余内边距,或者因为尺寸问题,不得已做缩放处理
以上对维护者和用户来说,都是很不爽的,如果一定要使用图片,我倒是建议维护者开发一个组件,将页面中的代码段自动转为图片,思路如下:
将代码片段渲染出来,使用
highlight.js
高亮代码将高亮的代码绘制到 canvas 中
导出 base64 图片,或者通过
a[download]
将图片下载下来保存到本地
之前月影姐姐开发了一个 code-to-image
,感兴趣的同学可以去 github 上搜索下。
我有考虑过写这个程序,不过后来找到了一个更加有用的办法。
Markdown Here
Markdown Here
是一款 Chrome 插件,顾名思义,就是将你写的 Markdown 直接转为 HTML 代码,我做了一个演示图片:
图中的编辑框并不是一个 textarea
控件,试想下这个控件中怎么玩也玩不出渲染好的 HTML 代码来,事实上,它是一个可编辑的普通元素,即加了一个 contenteditable
属性,你可以按照下面的步骤测试下:
打开一个新的 Tab
URL 中输入:
data:text/html,<html contenteditable>
然后去一个网页中全选所有内容,在上面的 URL 页面中粘贴
是不是把粘贴的内容是具备样式的?再用 Chrome Devtools 看看每个元素,你会发现,原来的样式被继承下来并且作为内敛样式嵌入。
微信公众号的编辑框也是 contenteditable 的,所以你可以通过 Markdown Here 插件将 Markdown 文本直接转换为代码。只可惜,可是在点击保存和预览的时候,内容又被微信的脚本重新解析了一次,过滤了部分内敛属性,一些转行符也被它给忽略了,如下在微信编辑框中展示正常的代码:
在点击预览后,展示效果为:
变成一行了,原因是代码中部分转行符号被过滤掉了。
处理办法
可以通过几行正则,将 Markdown 转换的源码做小小的修改,部分换行符 \n
替换成 <br>
标签就行了。我的个人博客采用的是 hexo 构建的,它渲染出来的代码在换行处已经有了换行标签:
把博客代码直接粘贴过来的效果是:
functionsyntaxHighlighting() { |
是不是感觉还不错?那么,写正则替换微信编辑器渲染源码,修复过滤换行符问题这么神圣的事情,就交给读者了!
建议继续学习:
- vim的一个js代码整理的插件jsbeautify.vim (阅读:4673)
- 写代码这件事 (阅读:3838)
- 多些时间能少写些代码 (阅读:3403)
- 数据即代码,我和小伙伴们都惊呆了! (阅读:3340)
- 给你的代码《约法四章》:基本功能、错误处理、智能纠错、日志收集 (阅读:3122)
- 如何写出无法维护的代码 (阅读:2940)
- 十种更好的表达“你的代码写的很烂”的方法 (阅读:2877)
- 如何为PHP贡献代码 (阅读:2802)
- 你的代码是我的地狱 (阅读:2179)
- HTML代码到底该不该压缩 (阅读:1642)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:小胡子哥的个人网站 来源: 小胡子哥的个人网站
- 标签: 代码 公众号
- 发布时间:2016-07-17 23:55:04
- [68] Go Reflect 性能
- [68] 如何拿下简短的域名
- [67] Oracle MTS模式下 进程地址与会话信
- [62] IOS安全–浅谈关于IOS加固的几种方法
- [61] 图书馆的世界纪录
- [60] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [48] 读书笔记-壹百度:百度十年千倍的29条法则