概要

将编译出来HTML本体部分复制到剪贴板, 绑定到Vim快捷键
从而达成一键将Markdown文件编译并将代码本体部分拷贝到剪贴板，以便直接贴到博客里

自从有了Vim一键编译Markdown文件加预览，已经基本达成了日常使用需要。不过如果要发到自己的博客，则需要手动查看源代码并复制相关部分，然后拷贝到博客，不是很方便。如果可以直接一键获得编译好的内容直接贴到博客就好了，于是有了这篇文章。

思路为先编译出HTML代码然后打印到控制台然后使用命令行工具将内容拷贝到剪贴板，
由于笔者使用的是Mac所以使用pbcopy命令。

Markdown-it编译脚本

研究了下gulp-markdown-github-style模块发现内部其实调用的是Markdown-it的模块来渲染md文件然后通过拼接带有CSS的模版文件来实现github式的页面的，
于是去查阅了一下Markdown-it的文档,写了一个可以支持内嵌HTML标签的md编译脚本,将其保存为markit.js并放在md源文件同一目录(也可以通过修改vim配置里路径来放至任意位置)：

/**
 *	Author: Chengcheng Ji
 *	Date: 2019.3.11
 *	Website: capital-g.cc
 * */
var md = require('markdown-it')({
	html: 		true,	// 开启源代码HTML标签支持(即不进行转义)
	xhtmlOut: 	false,	// 使用'/'来结束单标签(例如<br />)
	breaks: 	false,	// 将'\n'转换为换行标签<br>
	langPrefix: 'language-',//代码块的语言名前缀，用于第三方代码高亮(如highlight.js)
	linkify:	false,	//自动将网址转换成HTML链接
	typographer:false,	//是否开启语言替换和引号美化
	quotes: '""``',	//引号美化参数
	highlight: function (/*str, lang*/) { return ''; }	//代码高亮设定，" return '' "即为无特殊设定
});
var fs = require("fs");
//使用外部参数提示符"--file"
var file, i = process.argv.indexOf("--file");
if(i>-1) {
	file = process.argv[i+1];
}
//异步读取--file 标示的目标md文件
fs.readFile(file, function (err, data) {
	if (err) {
		return console.error(err);
	}
	//在编译后的HTML部分加上标签用于CSS
	var result = "<article class=\"markdown-body\">"+md.render(data.toString())+"</article>";
	//将完整结果输出到控制台,后续将其拷贝至剪贴板
	console.log(result);
	//将结果同时输出到./wordpress.txt中,可选
	fs.writeFile('wordpress.txt', result,  function(err){
		if (err){
			console.log(err);
		}
	});
});

绑定Vim快捷键

打开~/.vimrc, 添加如下代码，将以上功能绑定到F3:

" 按F3编译MD文件并拷贝HTML到剪贴板
map <F3> :call CompileMDtoClip()<CR>
imap <F3> <ESC>:call CompileMDtoClip()<CR>
func! CompileMDtoClip()
    exec "w"
    if &filetype == 'markdown'
        " 调用上面的markit.js并将其拷贝到剪贴板
        exec "!node markit.js --file % | pbcopy"
    endif
endfunc

这样就可以使用F3一键编译md文件并把文件内容拷贝至剪切板，接下来只要去博客网站按下Ctrl+v即可，撒花。