技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> 发现 --> 在公众号中优雅地呈现代码

在公众号中优雅地呈现代码

浏览:1711次  出处信息

这几天有不少朋友在我的微信公众号留言,问我是如何在公众号页面中整齐摆放代码的,今天就分享下我的方法,事实上我也折腾了好一会儿。

Markdown 解释器在转换代码片段时,没有在换行的时候添加 <br> 标签,而是直接输出一个换行符 \n,微信编辑页在保存或者预览时,将部分换行符给过滤了。

下文主要讲的是很多公众号维护者遇到的代码展示问题,以及处理这些问题的几个思路。

观察了很多技术类公众号,绝大多数为了保证良好可视效果,直接采用代码截图,这种做法很简洁,但也存在几个问题:

  • 需要人肉截图和上传图片,对公众号维护者来说很麻烦

  • 页面中代码截图太多,也影响阅读,尤其是弱网下的读者

  • 截图控制不好,会出现多余内边距,或者因为尺寸问题,不得已做缩放处理

以上对维护者和用户来说,都是很不爽的,如果一定要使用图片,我倒是建议维护者开发一个组件,将页面中的代码段自动转为图片,思路如下:

  • 将代码片段渲染出来,使用 highlight.js 高亮代码

  • 将高亮的代码绘制到 canvas 中

  • 导出 base64 图片,或者通过 a[download] 将图片下载下来保存到本地

之前月影姐姐开发了一个 code-to-image,感兴趣的同学可以去 github 上搜索下。

我有考虑过写这个程序,不过后来找到了一个更加有用的办法。

Markdown Here 是一款 Chrome 插件,顾名思义,就是将你写的 Markdown 直接转为 HTML 代码,我做了一个演示图片:

markdown here

图中的编辑框并不是一个 textarea 控件,试想下这个控件中怎么玩也玩不出渲染好的 HTML 代码来,事实上,它是一个可编辑的普通元素,即加了一个 contenteditable 属性,你可以按照下面的步骤测试下:

  • 打开一个新的 Tab

  • URL 中输入:data:text/html,<html contenteditable>

  • 然后去一个网页中全选所有内容,在上面的 URL 页面中粘贴

是不是把粘贴的内容是具备样式的?再用 Chrome Devtools 看看每个元素,你会发现,原来的样式被继承下来并且作为内敛样式嵌入。

微信公众号的编辑框也是 contenteditable 的,所以你可以通过 Markdown Here 插件将 Markdown 文本直接转换为代码。只可惜,可是在点击保存和预览的时候,内容又被微信的脚本重新解析了一次,过滤了部分内敛属性,一些转行符也被它给忽略了,如下在微信编辑框中展示正常的代码:

正常代码

在点击预览后,展示效果为:

错乱代码

变成一行了,原因是代码中部分转行符号被过滤掉了。

可以通过几行正则,将 Markdown 转换的源码做小小的修改,部分换行符 \n 替换成 <br> 标签就行了。我的个人博客采用的是 hexo 构建的,它渲染出来的代码在换行处已经有了换行标签:

棒棒的代码效果

把博客代码直接粘贴过来的效果是:

functionsyntaxHighlighting() {
var n = 33;
var s = "hello, こんにちは";
console.log(s);
}

是不是感觉还不错?那么,写正则替换微信编辑器渲染源码,修复过滤换行符问题这么神圣的事情,就交给读者了!

建议继续学习:

  1. vim的一个js代码整理的插件jsbeautify.vim    (阅读:4673)
  2. 写代码这件事    (阅读:3838)
  3. 多些时间能少写些代码    (阅读:3403)
  4. 数据即代码,我和小伙伴们都惊呆了!    (阅读:3340)
  5. 给你的代码《约法四章》:基本功能、错误处理、智能纠错、日志收集    (阅读:3122)
  6. 如何写出无法维护的代码    (阅读:2940)
  7. 十种更好的表达“你的代码写的很烂”的方法    (阅读:2877)
  8. 如何为PHP贡献代码    (阅读:2802)
  9. 你的代码是我的地狱    (阅读:2179)
  10. HTML代码到底该不该压缩    (阅读:1642)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1