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

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

用markdown写作

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

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

编写html片段

首先我们要准备好自己写的html片段，css代码内联，用于替换编译生成的html。比如，我会将

标题

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

代码高亮处理

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

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

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

所谓滚动处理就是，在单行代码太长（超过屏幕宽度）的时候，会产生换行，代码就乱了，这是我们不愿意看到的。所以在进行替换的时候要给

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

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 = '';

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 {

ZWsvVJYreturn hljs.highlight(lang, str).value.replace(/\n/g, '
');

} catch (err) {}

}

try {

return hljs.highlightAuto(str).value.replace(/\n/g, '
');

} catch (err) {}

return '';

}

}

}))

.pipe(name(function(path){

path.extname = '.html';

}))

.pipe(replace(/

.pipe(replace(/([^

.pipe(replace(/

.pipe(replace(//g, ''))

.pipe(gulp.dest('./articles'));

});

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

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

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

结束

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。