公众号滑动图代码_微信公众号的代码块插入，及一键排版

微信公众号：颜家大少

. 微信公众号的排版问题

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

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

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

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

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

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

有些样式丢失了;

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

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

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

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

. Md2All

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

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

解决把内容粘贴到公众号时，图片、或样式丢失的问题;

解决代码块换行不正确,特别是iPone、iPad上不会滚动的问题;

支持135，96等微信编辑器的所用样式(如"标题"等)，只需先点这些微信编辑器的"html"图标，再把内容拷贝过来即可。

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

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

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

另外

支持直接把页面"复制"到 "掘金" 中，如下：

选择 "一键排版" 中的 "掘金样式"

点"复制"然后粘贴到 "掘金" 默认的markdown编辑模式左边的编辑框就OK了

请参考此博文：https://juejin.im/post/5a1bcc6ef265da431f4acb09

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

. 界面预览

先来张玉照吧：

没有花巧的东西，所有的功能一目了然！

支持边编辑，边预览;支持左右滚动联动。

提供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的：

abc

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

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

. 另外

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

. 最后

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

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