道招

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的,这样我们就可以加载出自己特有的样式效果了。

比如图片居中

<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文件地址

file

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

file

编写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": "设置字号"
    },
}

file

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}**`);
})

file

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

总结

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

更新时间:
上一篇:以前觉得做表盘没啥技术含量,现在才发现它其实是最快可变现的产品下一篇:佳明表盘的如何加入设置页,怎么控制功能付费

相关文章

添加了runcode运行代码插件

增加一个文本框用来运行代码(html/css/javascript) 使用方法 // 演示 window.alert("Hello world!"); You can 阅读更多…

eclipse添加插件

eclipse做为当下最流行的开源IDE之一,Eclipse的一大优势就在于其无数优秀的插件。一个好的插件可以大大的提高我们的工作效率,学习如何安装Eclipse插件自然也是必修课了。下面介绍Ecli 阅读更多…

小改wordpress的get_permalink,支持固定链接设置值和插件获取值不同

因为本站的前端展示放弃使用WordPress博客系统的,而是改用自己的vue服务端渲染了,在保留原来的链接地址(比如 https://www.daozhao.com/8531.html )不变的情h 阅读更多…

eclipse安装tomcat插件

tomcatPlugin插件下载和安装方法 下载安装Sysdeo Tomcat插件,用来管理Tomcat服务器,提供断点调试功能,并且能自动建立Tomcat环境,修改其配置文件,是一个不错的T 阅读更多…

对微内核的一点执念

自从知道了这个名词,咋一听觉得很神秘的,等看了网上的例子才发现其实没有那么高不可攀,等对自己周围主要产品的深入了解后发现这个思想原来在我们的周围很常见的,比如webpack,nginx等。 之前还写 阅读更多…

CKEditor富文本编辑器职责分离

背景 CKEditor富文本 编辑器 (生产版本1.1.1及以前)里面包含富文本基础插件及当前最新的邮件特定的业务插件(签名、快捷回复、邀评、默认样式、选择颜色、插入图片、粘贴模式) O端 阅读更多…

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了