微信公众号:颜家大少
本文所用排版工具:md.aclickall.com
前段时间,准备在微信公众号上写文章时,却发现公众号居然连个最基本的插入代码块的功能都没有。
很纳闷,难道微信的开发者不用写代码的?
吐槽归吐槽,问题还得想办法解决。然后就是各种百度,推荐最多的我想就是markdown here了。
markdown here的确是个好东西,但问题是它只是一个通用的markdown转换插件,并不是针对公众号的,代码经markdown here转换后,粘贴到公众号,最常见的问题是:
也尝试了一些朋友专为公众号做转换的markdown工具,效果并不太满意,不过真要感谢他们的,毕竟他们的工具还是提供了一些思路,于是就有了自己做一个工具的想法。
当然,想法是美好的,道路是曲折的。对于开发的过程,对于所遇到的坑,此处先省略100万字......
好吧,接下来就是介绍我的markdown工具了
一个在线的Markdown转换工具
网址:http://md.aclickall.com
后期会考虑增加对其它博客平台的支持.
先来张玉照吧:
没有花巧的东西,所有的功能一目了然!
支持边编辑,边预览;支持左右滚动联动。
提供80多种超酷的代码主题。
通常,公众号多用于手机端显示,所以一般选:代码紧凑,这个看各人喜欢吧。
"一键排版"同样支持边改样式,边预览。
如下图,我只是选了个css主题为:“标题颜色”,然后代码主题为:“xcode”,整篇文章的效果就不一样了。
好吧,接下来还是好好展示一下我所说的超酷的代码风格吧,
下面是默认的“favorite"下的代码的显示。
java的:
- public
- class
- MyActivity
- extends
- AppCompatActivity
- {
- @Override //override the function
- protected
- void
- onCreate
- (@Nullable Bundle savedInstanceState)
- {
- super.onCreate(savedInstanceState);
- try {
- OkhttpManager.getInstance().setTrustrCertificates(getAssets().open("mycer.cer");
- OkHttpClient mOkhttpClient= OkhttpManager.getInstance().build();
- } catch (IOException e) {
- e.printStackTrace();
- }
- }
javascript的:
- function DisplayWindowSize(){
- var w=window.innerWidth
- || document.documentElement.clientWidth
- || document.body.clientWidth;
- }
css的:
- p {
- margin: 1.5em 0px;
- }
- h1,h2,h3,h4,h5,h6 {
- margin: 1.5em 0px;
- font-weight:bold;
- }
html的:
- <div >
- <span>abc
- <
- input
- id
- =
- "code"
- type
- =
- "checkbox"
- name
- =
- "code"
- >
- </input></span>
- <
- textarea
- id
- =
- "editor"
- rows
- =
- "100"
- cols
- =
- "100"
- >
- </textarea>
- </div>
支持任意的语言,并能自动识别,有需要时也可直接指定
还有更牛的地方是,如果你对上面的风格都不满意时,你甚至可以自定义自己的代码高亮的样式,请参考:"一键排版"中的"代码块样式“
如果有朋友只用到此工具的代码块部分,也可以先用此工具把自己的代码块渲染好,然后一段段“复制”插入到自己的公众号文章中。
此工具目前还在开发阶段,很多功能正在完善中,对浏览器的兼容性未做全面的测试,所以建议先用Chrome浏览器作编辑。
如对此工具有任何建议,欢迎在公众号:“颜家大少”上留言:
来源: https://juejin.im/post/5a1f5da85188253e2470be59