markdown是不会用还是不好用?自研vscode插件来帮忙,甲方运营人员大呼好用

本文源自道招网的# 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了,再也不用担心甲方的运营人员不会用了。 在编辑过程中甲方提出哪个功能不支持,哪里功能不好用,我们直接更新自己的插件来实现即可,对应不同的用户我们还可以后续通过插件控制版本和付费的情况,是不是很有想法?

相关推荐
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年7 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder7 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727577 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架