近日,几个码农因「写脚本」被开除了。要我说,不写点脚本那还叫码农吗。我最近也给自己写了一点小脚本,用于在微信公众号中生成个性排版。现在我把整个过程分享给大家。本文就是用这个小工具完成的哦。
操作过公众号后台的朋友肯定知道,微信的编辑器是很简易的,这也不叫缺陷吧,毕竟微信团队的主张一直就是简洁。但是这个编辑器是可以粘贴带格式的 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> 标签加上 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 > ] * ) & lt;\ / q & gt;
- /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 指令。这下就真正变成「一键」了,爽乎?
来源: http://www.cnblogs.com/lvdabao/p/5890683.html