自制微信公众号一键排版工具


Posted in Javascript onSeptember 22, 2016

近日,几个码农因「写脚本」被开除了。要我说,不写点脚本那还叫码农吗。我最近也给自己写了一点小脚本,用于在微信公众号中生成个性排版。现在我把整个过程分享给大家。本文就是用这个小工具完成的哦。

操作过公众号后台的朋友肯定知道,微信的编辑器是很简易的,这也不叫缺陷吧,毕竟微信团队的主张一直就是简洁。但是这个编辑器是可以粘贴带格式的html的,所以就给我们留下了发挥的空间,我们可以自己写点css代码,从而定制一个个性的排版样式。对于一个前端工程师,写点样式还不是分分钟的事情~

用markdown写作

程序员最喜爱的写作语言当然是markdown了,它是一种比html更简洁的标记语言,通过工具可以编译为html以及pdf等各种格式。由于足够简洁,所以兼容性也是杠杠的,特别适合在移动端展示文章。

这里我选择用gulp进行任务控制,用gulp-remarkable来进markdown文件的编译。

编写html片段

首先我们要准备好自己写的html片段,css代码内联,用于替换编译生成的html。比如,我会将<h2>标签替换为以下的html

<p style="font-family: 微软雅黑, 宋体, tahoma, arial; margin: 8px 0px 8px; padding: 0px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(227, 227, 227); height: 32px; line-height: 18px;"><span style="font-family: 微软雅黑, sans-serif !important; font-size: 16px; color: #00BBEC; display: block; float: left; padding: 0px 2px 3px; line-height: 28px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #00BBEC; font-weight: bold;" class="wxqq-color wxqq-borderBottomColor">标题</span></q>

除标题外,你也可以制作任意需要的代码片段,比如引用、表格、列表等等,md文件编译后统统进行替换就行。

代码高亮处理

码农写的文章,难免会嵌点代码来说明问题,但是在微信中排版代码是件头疼的事。要么是代码太长了排版错乱,要么就直接用图片展示代码,但是也有清晰度不够、无法复制等问题。

所以我选择用highlight.js来进行代码的格式化,在用remarkable编译md文件的时候,可以把highlight配置进去,这样一并完成了代码高亮工作。

需要注意的一个地方是,用highlight格式化后的代码在复制到微信编辑器的时候会丢失换行,需要我们额外处理一下,用正则把\n替换成<br>就可以了。

<pre>标签滚动处理

所谓滚动处理就是,在单行代码太长(超过屏幕宽度)的时候,会产生换行,代码就乱了,这是我们不愿意看到的。所以在进行替换的时候要给<pre>标签加上overflow-x:auto; white-space: nowrap;样式,这样能让代码框产生横向滚动条,读者可以滚动来查看未错乱的代码。

这样比较长的代码看起来就是这个效果:

alert(12);
var test = "这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字这是一段很长的文字";
function abc(){
alert("sdfsdf");
}

css内联处理

使用hightlight.js的时候,需要引入一个主题的css文件,比如我用的是monokai-submile.css。但是我们没法把这个css文件粘贴到微信编辑器中,所以需要想办法把这个css文件给内联到html代码中才行。

也就是说,要把css中定义的规则转化为标签的style属性,我在网上搜罗了半天,找到一个名为juice的nodejs模块,帮助我完成了这个工作。用法也相当简单,最终的nodejs代码如下

var htmlFile = './articles/'+file+'.html';
var cssFile = './articles/monokai-sublime.css';
var result = juice.juiceFile(htmlFile, {extraCss: fs.readFileSync(cssFile)}, function(err, html){
if(err){
console.log(err);
}
else{
var meta = '<meta charset="utf8" />';
fs.writeFileSync('./articles/'+file+'_html.html', meta+html);
}
});

快速敲出装逼引号「」

常写文章的同学肯定很喜欢这个引号「」,它让你的文章品质瞬间升华了有木有。但是由于这个引号无法用键盘直接打出,只能通过输入法的特殊符号来输入,特别麻烦。

既然我们可以随意对内容进行替换,那么只需自己定义一个标签就行,比如我定义了q标签,后续用脚本把这个标签替换为「」即可。配合编辑器的emmet插件,输入这个装逼引号只需敲p+tab,相当快捷,「你说呢」。

开始编译吧

我目前进行的处理就以上这些了,当然如果你发挥脑洞的话,可以再做更多的工作哦。

万事俱备,那我们就开始编译吧。大致说一下我用到的东西,首先脚本是用nodejs写的,谁让我是前端工程师呢呢~任务控制当然首选gulp,其次用到了gulp-replace、gulp-remarkable、gulp-rename、juice、highlight.js,就这些了。

把我们预先写好的html片段定义成字符串,然后就可以开始处理工作啦,我的parse任务定义如下

gulp.task('parse', function(){
gulp.src('articles/'+file+'.md')
.pipe(md({
preset: 'full',
disable: ['replacements'],
remarkableOptions: {
typographer: true,
breaks: true,
highlight: function (str, lang) {
if(lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value.replace(/\n/g, '<br>');
} catch (err) {}
}
try {
return hljs.highlightAuto(str).value.replace(/\n/g, '<br>');
} catch (err) {}
return '';
}
}
}))
.pipe(name(function(path){
path.extname = '.html';
}))
.pipe(replace(/<h2>(.*)<\/h2>/g, h2start+'$1'+h2end))
.pipe(replace(/<q>([^</p>]*)<\/q>/g, '「$1」'))
.pipe(replace(/<pre>/g, '<pre class="hljs" style="overflow-x: auto;">'))
.pipe(replace(/<mark>/g, '<mark style="background-color: #EEE; padding: 0 5px;">'))
.pipe(gulp.dest('./articles'));
});

然后别忘了还有内联css的任务,代码参见上面juice的使用。

为了能够精准编译某一个md文件,我在运行gulp的时候给传递了一个file参数,运行命令为:gulp --file write-wx-article-tool。值就是我这篇文章的名称啦。这个参数可以通过gulp.env.file拿到,就是你当前要处理的文件。

命令执行完后,就会生成一个html文件,你只需双击打开,复制内容,然后在微信编辑器中ctrl+v即可。

结束

这就结束啦?当然,如果你有更多的想法,完全可以自己再去折腾。比如,编译完成后,自动把内容放到系统剪贴板中,自动打开微信文章发布页,自动聚焦编辑器,自动执行ctrl+v指令。这下就真正变成「一键」了,爽乎?

以上就是自制微信公众号一键排版工具的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
js下弹出窗口的变通
Apr 18 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 #Javascript
详解Node.js中的事件机制
Sep 22 #Javascript
AngularJS通过$sce输出html的方法
Sep 22 #Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 #Javascript
D3.js实现雷达图的方法详解
Sep 22 #Javascript
javascript函数中的3个高级技巧
Sep 22 #Javascript
JavaScript省市区三级联动菜单效果
Sep 21 #Javascript
You might like
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
Bootstrap表单控件学习使用
2017/03/07 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
TFRecord文件查看包含的所有Features代码
2020/02/17 Python
大数据分析用java还是Python
2020/07/06 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
中专生的个人自我评价
2013/12/11 职场文书
绿化工程实施方案
2014/03/17 职场文书
营销与策划专业求职信
2014/06/20 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
女性健康讲座主持词
2015/07/04 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
离职员工给领导和同事的感谢信
2015/11/03 职场文书
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技