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


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 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
JS实现的tab页切换效果完整示例
Dec 18 Javascript
js实现图片跟随鼠标移动效果
Oct 16 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
js简单实现自动生成表格功能示例
Jun 02 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
Vue+Element-U实现分页显示效果
Nov 15 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
php桌面中心(三) 修改数据库
2007/03/11 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
基于jquery的商品展示放大镜
2010/08/07 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
js实现表格数据搜索
2020/08/09 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
Python实现查找系统盘中需要找的字符
2015/07/14 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python编写Windows Service服务程序
2018/01/04 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
Linux机考试题
2015/10/16 面试题
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
境外导游求职信
2014/02/27 职场文书
活动总结的格式
2014/05/07 职场文书
会计人员演讲稿
2014/09/11 职场文书
学生意外伤害赔偿协议书
2014/09/17 职场文书
大学生见习报告范文
2014/11/03 职场文书
产品质量保证书范本
2015/02/27 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS