本文源自道招网的# markdown是不会用还是不好用?自研vscode插件来帮忙,甲方运营人员大呼好用
背景
随着使用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的,这样我们就可以加载出自己特有的样式效果了。
比如图片居中
ini
<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地址 本功能的代码如下
javascript
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代码片段
swift
{
"新建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代码片段
javascript
// 选中字符反转
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了,再也不用担心甲方的运营人员不会用了。 在编辑过程中甲方提出哪个功能不支持,哪里功能不好用,我们直接更新自己的插件来实现即可,对应不同的用户我们还可以后续通过插件控制版本和付费的情况,是不是很有想法?