如何编写vscode插件,vscode插件emmet

文章目录 初步认识指令设置图像设置布局设置

初步认识

marp是支持Markdown格式的PPT神器有了这个就可以敲代码写PPT了。更绝的是marp提供了VScode插件故而可以愉快地在VScode中写PPT了。

在VScode扩展商店中搜索marp安装Marp for VS Code安装完成后在.md格式文件的选项卡栏上会多出一个双直角三角形这个便是marp的专属按钮下文称此按钮为marp按钮。

接下来新建一个md文件姑且命名为ppt.md点击marp选择Toggle Marp Feature...然后ppt.md首行便出现了marp标记

---marp: trueheadingDivider: 1---

同时右侧预览窗口会出现PPT白板接下来添加一点内容得到下图

可见marp建立在.md格式的语法之上但有以下几点需要注意

---可分割PPT页面如果开启全局指令headingDivider则可直接根据markdown的一级标题来分割页面通过<!---->进行指令设置插入图像仍旧沿用markdown格式![]()但在方括号中可进行更多设置 指令设置

设置指令有两种方法一种是通过<!---->进行单个页面的指令设置另一种如下直接在文件头中设置全局指令常用指令无非是页眉页脚页码等如下所示

---marp: truetheme: default      #此为主题version: 1.0.0      # 版本header: 我乃页眉footer: 页脚在此size: 16:9          # 页面尺寸大小---

效果如下

其中default为默认主题背景是白色的。此外还可以选择uncover和gaia主题。

<!-- -->可进行单页设置例如希望更改某一页的背景色和文字颜色可以写为如下形式

# 背景设置<!-- _backgroundColor: lightgray --><!-- _color: black -->

其中backgroundColor用于调控背景颜色color为文字颜色在前面加一个下划线表示该参数只对当前页面有效否则将更改对后续所有页面的设置。

效果如下

一些常见的指令如下

指令设置内容/说明paginate如果设置为true自动显示分页号_paginate如果设置为false, 首页分页号不显示header设置页头信息footer页脚信息class样式名backgroundColor背景色backgroundImage背景图backgroundPosition背景图位置backgroundRepeat背景重复样式backgroundSize背景大小color字体颜色 图像设置

marp扩展了插入图像的markdown语法例如下面三张相同的图片在PPT中展示的效果却不同

![h:200](Libre/pymol_gpcr.gif) ![h:300 blur](Libre/pymol_gpcr.gif) ![h:300 w:200 opacity:0.5](Libre/pymol_gpcr.gif)

其中h,w用于设置图像的宽高blur用于滤波opacity:0.5表示将透明度设为50%。

指令示例功能opacity:0.5透明度设为50%blur:10px按照10像素的模板进行滤波brightness:1.5亮度变为原来的1.5倍grayscale打开灰度模式contrast:200%对比度调为200%hue-rotate:180deg色相旋转180°invert:100%负片saturate:2.0饱和度设为2.0sepia:1复古度设为1

通过drop-shadow参数可以设置图像阴影例如下面的代码表示添加垂直5像素、水平10像素、透明度为0.4的黑色阴影。

drop-shadow:0,5px,10px,rgba(0,0,0,.4)

布局设置

通过关键字bg和left, right关键字可以指定背景图片所在位置例如下列代码

#![bg left:60%]( 背景分离这段幻灯片内容在背景图右边。

如果省略:60%则默认50%效果如下