资讯专栏INFORMATION COLUMN

微信公众号的代码块插入,及一键排版

microcosm1994 / 1401人阅读

摘要:微信公众号颜家大少注因对一些自定义的样式不支持,可参考此文在其它平台的不一样的显示样式掘金的微信公众号的微信公众号的排版问题前段时间,准备在微信公众号上写文章时,却发现公众号居然连个最基本的插入代码块的功能都没有。

微信公众号:颜家大少

注:因segmentfault对一些自定义的css样式不支持,可参考此文在其它平台的不一样的显示样式
掘金的:https://juejin.im/post/5a1f5d...
微信公众号的:http://mp.weixin.qq.com/s/PzL...

. 微信公众号的排版问题

前段时间,准备在微信公众号上写文章时,却发现公众号居然连个最基本的插入代码块的功能都没有。

很纳闷,难道微信的开发者不用写代码的?

吐槽归吐槽,问题还得想办法解决。然后就是各种百度,推荐最多的我想就是markdown here了。

markdown here的确是个好东西,但问题是它只是一个通用的markdown转换插件,并不是针对公众号的,代码经markdown here转换后,粘贴到公众号,最常见的问题是:

代码换行错了,不是同一行的代码却挤在了同一行,可读性很差;

代码横向不会滚屏了 ,也是直接挤到了下一行,iPhone,iPad的尤为严重;

有些样式丢失了;

虽然可以自定义 css,但没参考样式,对普通的非前端开发者来说,不太好弄。

也尝试了一些朋友专为公众号做转换的markdown工具,效果并不太满意,不过真要感谢他们的,毕竟他们的工具还是提供了一些思路,于是就有了自己做一个工具的想法。

当然,想法是美好的,道路是曲折的。对于开发的过程,对于所遇到的坑,此处先省略100万字......

好吧,接下来就是介绍我的markdown工具了

. Md2All

一个在线的Markdown转换工具
网址:http://md.aclickall.com

支持通用的Markdown语法,并对html,css样式有很好的支持(请看网站示例的高级使用部分)

微信公众号 做了特别的优化:

解决把内容粘贴到公众号时,图片、或样式丢失的问题;
解决代码块换行不正确,特别是iPone、iPad上不会滚动的问题;
支持135,96等微信编辑器的所用样式(如"标题"等),只需先点这些微信编辑器的"html"图标,再把内容拷贝过来即可。

对代码块的显示专门做了优化,几十种超酷的代码风格任你选择

支持 "一键排版" 的css样式模板选择,和自定义css。你一点就知到^_^

预览ok后,只需要点 “复制” 按键粘贴到公众号即可。

另外

支持直接把页面"复制"到 "CSDN" 和 "博客园" 中,所有的样式保持一致。
请参考此博文:http://blog.csdn.net/gary_yan/article/details/78645303

支持直接把页面"复制"到 "掘金" 中,如下:
选择 "一键排版" 中的 "掘金样式"
点"复制"然后粘贴到 "掘金" 默认的markdown编辑模式左边的编辑框就OK了
请参考此博文:https://juejin.im/post/5a1bcc6ef265da431f4acb09

后期会考虑增加对其它博客平台的支持.

. 界面预览

先来张玉照吧:

没有花巧的东西,所有的功能一目了然!
支持边编辑,边预览;支持左右滚动联动。
提供80多种超酷的代码主题。

通常,公众号多用于手机端显示,所以一般选:代码紧凑,这个看各人喜欢吧。

"一键排版"同样支持边改样式,边预览。
如下图,我只是选了个css主题为:“标题颜色”,然后代码主题为:“xcode”,整篇文章的效果就不一样了。

. 代码块展示

好吧,接下来还是好好展示一下我所说的超酷的代码风格吧,
下面是默认的“favorite"下的代码的显示。
注:因segmentfault不支持自定义css样式,所以发张截图效果:

支持任意的语言,并能自动识别,有需要时也可直接指定

还有更牛的地方是,如果你对上面的风格都不满意时,你甚至可以自定义自己的代码高亮的样式,请参考:"一键排版"中的"代码块样式“

. 另外

如果有朋友只用到此工具的代码块部分,也可以先用此工具把自己的代码块渲染好,然后一段段“复制”插入到自己的公众号文章中。

. 最后

此工具目前还在开发阶段,很多功能正在完善中,对浏览器的兼容性未做全面的测试,所以建议先用Chrome浏览器作编辑。


如对此工具有任何建议,欢迎在公众号:“颜家大少”上留言:

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51571.html

相关文章

  • 微信公众号的代码插入一键排版

    摘要:微信公众号颜家大少注因对一些自定义的样式不支持,可参考此文在其它平台的不一样的显示样式掘金的微信公众号的微信公众号的排版问题前段时间,准备在微信公众号上写文章时,却发现公众号居然连个最基本的插入代码块的功能都没有。 微信公众号:颜家大少 注:因segmentfault对一些自定义的css样式不支持,可参考此文在其它平台的不一样的显示样式掘金的:https://juejin.im/pos...

    1treeS 评论0 收藏0
  • 微信公众号的代码插入一键排版

    摘要:微信公众号颜家大少注因对一些自定义的样式不支持,可参考此文在其它平台的不一样的显示样式掘金的微信公众号的微信公众号的排版问题前段时间,准备在微信公众号上写文章时,却发现公众号居然连个最基本的插入代码块的功能都没有。 微信公众号:颜家大少 注:因segmentfault对一些自定义的css样式不支持,可参考此文在其它平台的不一样的显示样式掘金的:https://juejin.im/pos...

    LittleLiByte 评论0 收藏0
  • 30分钟做一个二维码名片应用,有源码!

    摘要:前言分钟带你用做一个微信公众号上使用的二维码名片,相应技术点有详细讲解,高清有码点击下载全部源码二维码现在是无处不在,无孔不入了。二维码名片的应用就介绍到这里啦,码字不易,随手点赞哈 前言 30分钟带你用Wex5做一个微信公众号上使用的二维码名片,相应技术点有详细讲解,高清有码!(点击下载全部源码) 二维码现在是无处不在,无孔不入了。大到一辆汽车,小到一包纸巾,身上都印有二维码,明码标...

    littlelightss 评论0 收藏0
  • 常用的Python工具与资源

    摘要:经常收到粉丝的疑问,公众号的代码排版真的很好看,究竟用的什么开发工具呢在这里,统一回复一下大家,公众号的排版用的是,而我平时使用的开发工具是。很多粉丝说现在的书籍很贵,有没有什么比较好的教程比较好的资源,那么,廖老师的这个课程依旧是首选。 经常收到粉丝的疑问,公众号的代码排版真的很好看,究竟用的什么开发工具呢?在这里,统一回复一下大家,公众号的排版用的是MarkDown Here,而我...

    MockingBird 评论0 收藏0
  • 持续更新,微信公众号文章批量采集系统的构建

    摘要:我从年就开始做微信公众号内容的批量采集,最开始的目的是为了做一个的垃圾内容网站。经过实测的微信客户端在批量采集过程中崩溃率高于安卓系统。在年年初的时候微信公众号和微信文章开始使用链接。 我从2014年就开始做微信公众号内容的批量采集,最开始的目的是为了做一个html5的垃圾内容网站。当时垃圾站采集到的微信公众号的内容很容易在公众号里面传播。当时批量采集特别好做,采集入口是公众号的历史消...

    marek 评论0 收藏0

发表评论

0条评论

microcosm1994

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<