背景

随着使用markdown语法编写内容越来越流行，有的程序员也开始给甲方做网站时使用markdown来编写文章了，比如用hexo博客系统建站。

使用markdown语法能减轻程序员寻找富文本编辑器的成本，毕竟富文本编辑器的坑太多了，但是markdown有一定的语法门槛，并且它本身还是存在不足的，比如无法实现内容居中、文字两端对齐等。

程序员不能只顾自己方便，甲方说markdown不会用或者说不好用怎么办呢？我们可是试试用vscode的插件来帮忙，简化markdown的用法同时对它进行增强。

思路

使用markdown时一个几乎必备的辅助功能就是所见即所得，不预览看下的话，我们对自己编写的内容“长”什么样子总会觉得不放心吧，而我们平时基本都是借助编辑器自带的功能（或者插件）来实现markdown内容的预览。

既然要使用编辑器编写markdown的话，为何不使用开源的vscode，它免费，支持插件，并且插件开发简单，同时还可以在编辑器预览markdown时加载自己的css文件，功能可谓是相当强大啊。

markdown语法里面是可以嵌套html语法的，有了html就几乎无所不能了，对于markdown默认不支持的写法，我们可以换个思路，改用html+css的形式来实现了，只需要额外在vscode预览markdown时加载我们自己的css文件，我们特有的样式效果就出来了。

那我们就借助vscode插件来增强markdown功能吧。

步骤

编写html+css

因为markdown语法里面是可以使用html写法的，有了html就几乎无所不能了，对于markdown默认不支持的写法，我们可以换个思路，改用html+css的形式来实现。并且vscode在预览markdown的时候是可以加载自定义url的css的，这样我们就可以加载出自己特有的样式效果了。

比如图片居中

<div class="post_center">
    <img class="post_block-item" style="max-width: 80%;margin-bottom: 16px;" src="https://https://www.baidu.com/img/pcyayunhuikaimushidoodle_35c0ef27c30a077f2e46ddb5db1993ef.gif">
</div>

我们可以把较为通用的样式写在自定义css文件里面，在html里面直接使用对应的class即可，用户可能需要调整的直接写在内联style里面，只要网站和编辑器预览使用同一个css文件，就能把我们增强的样式效果显示出来了。

markdown预览加载自定义css文件

在网站上加载这个自定义css文件很简单，只是编辑器预览markdown时怎么加载这个css文件呢？解决不了这个的话，用户在预览的时候不就没效果了吗？

这里就要用到vscode编辑器，它编写插件很简单

具体的vscode插件教程去官网看下文档就好

我们可以控制在当前的Workspace配置markdown加载的css地址 本功能的代码如下

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {

    vscode.window.showInformationMessage('md-editor-helper is activing!');

    vscode.window.showInformationMessage('md-editor-helper is initialing');
    vscode.workspace.getConfiguration().update("markdown.styles", [ "https://example.com/css/post.min.css"], vscode.ConfigurationTarget.Workspace).then(() => {
        vscode.window.showInformationMessage('Initialzized success md-editor-helper!');
    }, (err) => {
        vscode.window.showErrorMessage('Initialzized error md-editor-helper! ' + err.message);
    });

}

export function deactivate() {}

激活了插件的话，就会在当前workspace的.vscode/settings.json写入markdown加载的css文件地址

上面的图片居中就已经实现了啊

编写vscode插件增强markdown

结合snippets和其它command很帮助我们更便捷的使用markdown了。

snippets代码片段

{    
    "新建post" : {
        "scope": "markdown",
        "prefix": "postcreate", 
        "body": [  
            "---",
            "date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
            "title: \"$1\"",
            "categories: $2",
            "- [news]",
            "thumbnail_in_body: ",
            "---",
            ""
        ],
        "description": "post模板"
    },
    "水平竖直居中" : {
        "scope": "markdown",
        "prefix": "postcc", 
        "body": [  
            "<div class=\"post_flex_center_center\">$1</div>"
        ],
        "description": "水平竖直居中描述"
    },
    "插入居中配图" : {
        "scope": "markdown",
        "prefix": "postimg", 
        "body": [  
            "<div class=\"p_center\">",
            "  <img class=\"post_block-item\" style=\"max-width: 80%;margin-bottom: 16px;\" src=\"$1\">",
            "</div>"
        ],
        "description": "插入居中配图"
    },
    "缩进" : {
        "scope": "markdown",
        "prefix": "postintend", 
        "body": [  
            "<div class=\"post_paddingLeftIntend2\">",
            "  <div class=\"post_listIntend2\" data-num=\"a.\">",
            "    $1",
            "  </div>",
            "</div>"
        ],
        "description": "缩进2个字符"
    },
    "字号" : {
        "scope": "markdown",
        "prefix": "postfont", 
        "body": [
            "<div style=\"font-size: 22px\">$1</div>"
        ],
        "description": "设置字号"
    },
}

command代码片段

// 选中字符反转
vscode.commands.registerCommand('md-editor-helper.context.reverse', () => {
    editorSelectionReplacer(word => word.split('').reverse().join(''));
})
// 选中字符加粗
vscode.commands.registerCommand('md-editor-helper.context.bold', () => {
    editorSelectionReplacer(word => `**${word}**`);
})

更多具体细节可以参见我写的vscode插件 markdown助手 md-editor-helper

总结

现在我们可以vscode及其插件的帮助下让编写markdown更容易了，小白用户也能快速上手markdown了，再也不用担心甲方的运营人员不会用了。 在编辑过程中甲方提出哪个功能不支持，哪里功能不好用，我们直接更新自己的插件来实现即可，对应不同的用户我们还可以后续通过插件控制版本和付费的情况，是不是很有想法？