概要

将编译出来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即可，撒花。

使用Node.js的模块来编译md文件到html和pdf文件。
并使用vim脚本来绑定该编译功能到Vim编辑器。
添加vim对md文件的语法高亮支持。
支持一键编译，预览md文件。

编译Markdown文件

1. 使用Node.js包管理工具npm安装编译md文件所需的模块gulp

//全局安装
$ npm -g i gulp
//依赖安装
$ npm i gulp --save-dev

2. 安装两个模块，一个用来输出html (github格式)，另一个用来输出pdf

//在项目文件夹下
$ npm i gulp-markdown-github-style
$ npm i gulp-markdown-pdf

3. 写入gulp任务文件
   在项目文件夹下新建名为gulpfile.js的文件：

//载入模块
var gulp = require("gulp");
var markdown = require('gulp-markdown-github-style');
var mdpdf = require('gulp-markdown-pdf');

//接收外部参数,将--file后的参数写入变量file中，和vim宏绑定使用
var file, i = process.argv.indexOf("--file");
if(i>-1) {
    	file = process.argv[i+1];
}
//调用html模块输出, 使用file参数来定位文件源，输出到note_html文件夹中
gulp.task("compileMDToHtml", () =>
    gulp.src(file)
        .pipe(markdown())
        .pipe(gulp.dest('note_html'))
);
//调用pdf模块输出, 同上
gulp.task("compileMDToPdf", () =>
    gulp.src(file)
        .pipe(mdpdf())
        .pipe(gulp.dest('note_pdf'))
);
//安排任务同步进行，此处的回调函数done()为必须
gulp.task("default", gulp.parallel("compileMDToHtml", "compileMDToPdf", function(done) {
  done();
}));

Vim脚本绑定快捷键

在.vimrc文件中加入编译部分,该配置文件可在~/.vimrc找到(或新建一个)。

"按F2编译运行,必须打开类型检测
map <F2> :call CompileRunGcc()<CR>
imap <F2> <ESC>:call CompileRunGcc()<CR>
func! CompileRunGcc()
    exec "w" 
    if &filetype == 'c' 
        exec "!g++ % -o %<"
        exec "! ./%<"
    elseif &filetype == 'cpp'
        exec "!g++ % -o %<"
        exec "! ./%<"
    elseif &filetype == 'java' 
        exec "!javac %" 
        exec "!java %<"
    elseif &filetype == 'sh'
        :!./%
    elseif &filetype == 'markdown'
        exec "!gulp --file %"
    endif
endfunc
" 开启文件类型检测
filetype plugin indent on  
" 添加markdown文件类型
autocmd BufNewFile,BufRead *.md set filetype=markdown

添加Markdown语法高亮

添加markdown文件语法高亮
觉得比较好的能在terminal使用的语法高亮文件https://github.com/plasticboy/vim-markdown
将syntax/markdown.vim拷贝到 ~/.vim/下,并在.vimrc中加入

" 添加markdown文件语法文件
au! Syntax markdown source ~/.vim/markdown.vim

虽然在terminal下,强调和斜体存在一些问题，不过并不影响使用，毕竟已经可以用网页和pdf来看效果啦。

增加开启浏览器预览功能

既然已经把编译也加进去了，那么再加个自动打开编译后的html来预览的功能吧。
思路是获取生成的html的文件名然后调用默认浏览器打开。
查阅帮助手册:help expand，发现在vim脚本中对当前文件标示符%有如下的扩展：

Modifiers:
                        :p              expand to full path
                        :h              head (last path component removed)
                        :t              tail (last path component only)
                        :r              root (one extension removed)
                        :e              extension only

举一些用法上的例子：

" 假设完整文件路径为: /A/B/C/file.md
%					file.md
%:p					/A/B/C/file.md
%:p:h					/A/B/C/
%:p:t					file.md
%:p:r					/A/B/C/file
%:p:t:r					file
%:r					file
%:e					md

于是我们只要在配置文件.vimrc中，在编译之后加入自动打开该文件的部分即可：

elseif &filetype == 'markdown'
    " 这里改成仅编译html,会更快一些，当然如果喜欢预览pdf也可以自行修改
    exec "!gulp compileMDToHtml --file %"
    " 浏览器开启html预览
    exec "!open ./note_html/%:r.html"
endif

至此使用Vim写markdown，编辑，编译，预览一条龙，撒花。