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

微信公众号:颜家大少

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

. 微信公众号的排版问题

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

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

吐槽归吐槽,问题还得想办法解决。然后就是各种百度,推荐最多的我想就是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。你一点就知到_

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

. 界面预览

先来张玉照吧:


这里写图片描述

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

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

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

这里写图片描述

. 代码块展示

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


image.png

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

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

. 另外

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

. 最后

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


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


这里写图片描述
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351