Marp 教程:如何在 VSCode 中引入自定义样式和主题 引言 Marp 是一个基于 Markdown 的幻灯片制作工具,结合 VSCode 的强大编辑功能,可以让你的 PPT 制作过程变得更加高效和专业...本文将详细介绍如何在 Marp 中引入自定义样式和主题,使你的幻灯片更加个性化和独特。 准备工作 1....在 VSCode 中安装 “Marp for VS Code” 插件。可以通过点击左侧活动栏上的扩展图标或按 Ctrl+Shift+X 打开扩展市场,搜索并安装。 2....创建自定义主题 如果你想创建一个完整的主题,可以参考 Marp 的官方主题结构。通常,一个主题包括: CSS 文件:定义幻灯片的样式。 YAML 文件:定义主题的元数据,如名称、作者等。...总结 通过本教程,你已经学会了如何在 Marp 中引入自定义样式和主题,使你的幻灯片更加个性化和专业化。
mybatis定义全局变量只需要配置一下即可,那如何在mybatis xml文件中定义局部变量呢?这就需要使用标签了。...格式: name:定义的变量名称 value:value是一个具体的值,它可以是入参,也可以是一个表达式,比如:判断条件 举例 UserInfo
题目部分 如何在Oracle中写操作系统文件,如写日志? 答案部分 可以利用UTL_FILE包,但是,在此之前,要注意设置好UTL_FILE_DIR初始化参数。...image.png 其它常见问题如下表所示: 问题 答案 Oracle中哪个包可以获取环境变量的值? 可以通过DBMS_SYSTEM.GET_ENV来获取环境变量的当前生效值。...在CLIENT_INFO列中存放程序的客户端信息;MODULE列存放主程序名,如包的名称;ACTION列存放程序包中的过程名。该包不仅提供了设置这些列值的过程,还提供了返回这些列值的过程。...如何在存储过程中暂停指定时间? DBMS_LOCK包的SLEEP过程。例如:“DBMS_LOCK.SLEEP(5);”表示暂停5秒。 DBMS_OUTPUT提示缓冲区不够,怎么增加?...如何在Oracle中写操作系统文件,如写日志? 可以利用UTL_FILE包,但是,在此之前,要注意设置好UTL_FILE_DIR初始化参数。
今天我又来解锁一种开发工具的神器--VScode插件。 其实vscode现在已经很多大厂先后开发出他们各自的插件,如:华为LiteOS Studio,RT-Thread Studio等。...package.json文件有对应的属性来表示。...关联的类型定义 │ └── vscode-typings.d.ts // 和VS Code关联的类型定义 └── vsc-extension-quickstart.md 运行测试 通过VS...这个简单的demo的关联文件:package.json和extension.ts 打包插件 在我们编写完一个插件之后,总不能每次都运行代码的方式来使用插件的功能,而且如果别人也要使用你这个插件,不可能拿你的源码...① 在package.json文件中增加publisher属性。 注:如果不输入上述属性,打包时会出现如下图错误: ② 修改README.md,删除原有的内容,写上自己的内容。
主要集中在以下的更改: 自定义上下文菜单操作,如:平时我们右键的菜单栏 在侧边栏创建自定义交互,如:npm插件安装后在资源管理中-主侧边栏添加了一个npm操作视图 定义一个新的活动栏视图,如:Git插件安装后左侧活动栏中的图标...在状态栏中显示自定义信息,如:Git插件安装后显示当前分支 使用webview自定义内容,如:markdown预览插件提供预览的视图 UI类插件主要用于更改vscode的外观也就是我们常说的主题,主要集中在以下...3种外观的更改: 更改原代码的颜色 更改vscode ui的颜色 添加自定义文件图标 语言类(Eslint、代码提示诊断功能插件等) 语言扩展(例如:悬停、转到定义、诊断错误等等),我们常见的就是eslint...自定义编程语言 添加或替换编程语言的语法 扩展现有的语法 纯工具类主要是一些第三方工具集成到vscode中,如常用的git插件、Docker插件,一般这类插件通过新增容器和视图的方式对vscode进行扩展...主侧边栏(Primary Sidebar):主要是展示一个或多个Views,活动栏和主侧边栏紧密耦合,点击活动栏可以打开对应的主侧边栏,该绑定关系通过package.json中的配置进行关联。
清单文件用来描述插件的meta信息,直接把package.json作为清单文件,并增加了一些特有字段,比如触发插件加载的激活事件(activation events)、插件想要增强的扩展点(contribution...points) IDE在启动过程中扫一遍插件清单文件,UI相关的就扩展UI,UI无关的就把扩展点与插件功能关联起来 另外,由于插件的执行环境是Node进程,所以npm package都是可用的,依赖模块同样声明在...(连接点),即“允许在这里扩展/增强”,比如新增一个自定义命令,就是对commands扩展点的增强 manifest // package.json { // 插件名称 "name": "my-extension...添加与命令关联的快捷键,用户按下特定快捷键时执行对应命令 languages 与文件类型建立关联或扩展新语言,用户打开(满足某些要求的)特定文件类型时执行对应命令 debuggers 添加debugger...:基础支持返回文档中声明的所有标识符,及其定义位置 快速修复:对Warning和Error给出建议做法,快捷修复。
二、生成基本代码的讲解与简单的修改 在几个项目类型中,我们选择了第一个TypeScript来作为我们编写扩展的语言,其他几个项目类型这里不做介绍。...git仓库用于版本管理 以上几个输入都会在package.json 这个文件里面有对应的属性来表示。...类型定义文件夹 │ ├── node.d.ts // 和Node.js关联的类型定义 │ └── vscode-typings.d.ts // 和VS Code...关联的类型定义 └── vsc-extension-quickstart.md 运行与简单修改 介绍完目录结构后,我们可以来运行一下看看效果如果。...在修改之前需要简单的认识两个文件 package.json { "name": "sample", //插件扩展名称(对应创建项目时候的输入) "displayName
前言 Visual Studio Code(简称 VSCode)凭借其占用内存小、文件加载快、稳定性好、插件丰富等等特点,从众多 IDE 中脱颖而出,受到了广大开发人员的青睐。...VSCode 提供以下扩展能力:代码自动补全、自定义命令/菜单/快捷键、悬浮提示、自定义跳转、主题定制、自定义 WebView 等等。你可以根据自己的需要随意组合使用。...在 package.json 的 contributes 下添加自定义的 Snippets。language 表示在某种特定语言下,对应的代码片段才会被加载生效。path 表示代码片段文件的存放路径。...prefix 中定义一个或多个(设置数组时可以指定多个)触发词(trigger words),当用户输入内容是触发词时编辑器会弹出自动补全提示。 body 中定义的就是填充的代码段内容。...contributes 用于定义扩展项的具体配置。常用扩展项有代码片段(snippets)、命令(commands)、菜单(menus)、快捷键(keybindings)、主题(themes)。
注意看,这是在编辑器中样子 JSON是配置文件(例如package.json或)中常见的数据格式project.json。...包和项目的依赖 我们还提供智能感知特定值的集合,如包装和项目依赖package.json,project.json和bower.json。...当前的编辑器模式在编辑器的状态栏中显示。单击模式指示器以更改模式并配置文件名和扩展名与模式的关联方式。 JSON模式和设置 为了了解JSON文件的结构,我们使用JSON模式。...VS Code扩展还可以定义架构和架构映射。这就是为什么VS代码已经知道一些知名JSON的模式文件,如package.json,bower.json和tsconfig.json。...模式和模式关联也可以通过扩展定义。
如 eslint.js 配置文件: module.exports = { env: { // 环境 browser: true...配置文件 Prettier 支持 .prettierrc 为名称,以 .yaml .yml .json .js 为后缀的的配置文件,当然你也可以使用 package.json 文件中的 Prettier...文件 VSCode集成 我使用的是 VSCode ,来给它添加魔法,加 EditorConfig , Eslint , Prettier , Git 扩展。...下面是 Prettier 的扩展,我以下安装好了,大家在扩展中自行搜索安装就好了。微信搜索公众号 逆锋起笔,关注后回复 编程资源,领取各种经典学习资料。 ?...定制化项目提交说明 上面的提交说明都是英文的,如果想自定义,可以试试cz-customizable,先安装: npm install cz-customizable --save-dev 修改package.json
每个扩展都需要在其 package.json 文件中包含一个发布者名称。如果注册发布者我们后面详说,这里我们把 publisher 设置为 luozhu。...而且 vscode 扩展的规模往往增长很快。它们是在多个源文件中编写的,并依赖于 npm 的模块。分解和重用是开发的最佳实践,但在安装和运行扩展时,它们是有代价的。...; // 入口命令已经在 package.json 文件中定义好了,现在调用 registerCommand 方法 // registerCommand 中的参数必须与 package.json...vscode 国际化分为三部分,一部分是配置的国际化,一部分是代码中的国际化,另一部分则是 webview 中 umijs 的国际化。本章我们就来具体看一下如何在 vscode 中实现国际化。...配置国际化 我们已经知道 vscode 中的配置都是在 package.json 中,而配置的国际化是约定在 package.nls.json 和 package.nls.zh-cn.json 这种文件中编写
自定义文件验证注解 首先在Spring Boot中定义一个注解,用于标记需要校验的文件字段。这个注解包含验证所需的参数:允许的扩展名、MIME类型和最大文件大小。...):自定义的约束器实现 2....实现约束验证器 接下来,创建一个类来实现ConstraintValidator接口,具体实现文件的扩展名、类型、大小的校验逻辑。...mime,实际是通过文件头内容中的魔法数来验证的 var detect = tika.detect(TikaInputStream.get(file.getInputStream()))...return ResponseEntity.ok("File uploaded successfully"); } } @ValidFile注解验证文件的扩展名是否为"jpg"
如果此时VSCode崩溃(我遇到了),则可能意味着你没有最新版本。如果你的VSCode崩溃,请查看下面的故障排除部分。否则,请更新你的VSCode,完成后,单击屏幕左侧边栏中的扩展名。...找到最近克隆的文件夹VSCodeTutorialBlockchain并双击它。 3.在VSCode中,单击左侧栏中的IBM Blockchain Platform扩展。...该函数返回与给定键关联的值(如果有)。 2.更新package.json文件,使包含版本号的第3行现在读取: "version": "0.0.2", 保存文件。...2.使用VSCode中的终端导航到VSCodeTutorialBlockchain文件夹。...生成测试完成扩展后,你可以从demoContract目录运行npm test,也可以从MyContract-demoContract@0.0.2.test.js文件中单击VSCode UI中的运行测试按钮
在扩展 MSBuild 编译的时候,我们一般的处理的路径都是临时路径或者输出路径,那么发布路径在哪里呢?...---- 我曾经在下面这一篇博客中说到可以通过阅读 Microsoft.NET.Sdk 的源码来探索我们想得知的扩展编译的答案: 解读 Microsoft.NET.Sdk 的源码,你能定制各种奇怪而富有创意的编译过程...- walterlv 于是,我们可以搜索 "Publish" 这样的关键字找到我们希望找到的编译目标,于是找到在 Microsoft.NET.Sdk.Publish.targets 文件中,有很多的...不过我只能在这个文件中找到这个路径的再次赋值,找不到初值。 如果全 Sdk 查找,可以找到更多赋初值和使用它复制和生成文件的地方。
文件,优先级高于手动配置的内容,本文不使用此方法 vscode 设置自动格式化 在项目根目录下新建 .vscode/setting.json 文件,写入以下内容,即可在保存代码的时候自动按照 eslint...和 prettier 的规范进行代码格式化 // 需要 vscode 安装 Prettier - Code formatter 扩展 { // 控制编辑器是否自动格式化粘贴的内容。...必须是提供格式化程序的扩展的标识符。....husky 里面生成一个 pre-commit 文件,在 pre-commit 这个钩子里就可以执行 lint-staged 了 在 package.json 中添加以下内容,处理对应后缀的文件...继承第三方库的配置 extends: ['cz'], rules: { // 自定义规则, }, }; 根目录下新建 .cz-config.js 文件,这个文件和上个文件是用来配置提交时候的信息
: yo code 初始化过程中需要我们做一些偏好设置,按照需求选择即可: 然后我们就可以用VSCode打开上述步骤生成的工程,可以看到目录结构如下,其中最重要的两个文件是package.json和extension.js...三、 package.json 文件 package.json文件是VSCode扩展的清单文件,里面包含很多字段。官方文档对其中的每个字段也有专门的说明:manifest。...通过扩展注册contributes用来扩展Visual Studio Code中的各项技能,官方文档指路:contributes。...extension.js 文件 extension.js文件是上述所说的package.json中main字段对应的文件(文件名可自定义)。...F5 进入调试模式,会打开一个新窗口如下: 这个窗口标明了是 "扩展开发宿主", Ctrl + Shift +P 输入我们之前定义的命令,执行,右下角弹出文字: 我们生成的demo工程已经运行成功。
首先就是注册命令,具体就不解读代码了,其逻辑就是获取调用vscode.window.showQuickPick弹出选择框选择 js 还是 ts 文件(自定义),接着获取到其目录,判断文件是否存在,创建文件等操作...自定义扩展工作台 在 vscode 中有几个地方可以用于扩展,具体可看Extending Workbench | Visual Studio Code Extension API 左侧图标(活动栏)...自定义颜色、图标主题 在 vscode 中分别有三部分的主题可以设置 主题 范围 推荐 文件图标主题 资源管理器内的文件前的图标 Material Icon Theme 颜色主题 代码编辑器以及整体颜色主题...只要在 json 文件中,将鼠标悬停在kuizuo这个词中即可触发,试试看看。...可以在 Manage Extensions | Visual Studio Marketplace 中管理已发布的插件 这时在 vscode 扩展商店中搜索 vscode-extension-sample
Vscode 的代码高亮、代码补齐、错误诊断、跳转定义等语言功能由两种扩展方案协同实现,包括: 基于词法分析技术,识别分词 token 并应用高亮样式 基于可编程语言特性接口,识别代码语义并应用高亮样式...Vscode 中的声明式语言扩展基于 TextMate 词法分析引擎实现;编程式语言扩展则基于语义分析接口、vscode.language.* 接口、Language Server Protocol 协议三种方式实现...vscode-json5 插件源码很简单,两个关键点: 在 package.json 文件中声明插件的 contributes 属性,可以理解为插件的入口: "contributes": {...└── server.ts // Language Server 入口文件 样例代码中有几个关键点: 在 package.json 中声明激活条件与插件入口 编写入口文件 client/src/extension.ts...总结 Vscode 用插件方式提供了多种语言扩展接口,分声明式、编程式两类,在实际项目中通常会混合使用这两种技术,用基于 TextMate 的声明式接口迅速识别出代码中的词法;再用编程式接口如 LSP
也该整理出来了 ❞ 暂定会更新以下知识点 如何实现一个webpack loader 如何实现一个webpack plugin 谈谈Tapable 实现一个简易的webpack debug webpack源码 如何在...vscode调试源码 ❝先学会调试源码,在后面开发loader或者plugin会显得更得心应手,以下是我调试less-loader的分享 ❞ 使用 vscode + npm 插件 ❝在 vscode 中安装插件...该插件可以帮我们界面直接点击去运行 package.json 文件中 scripts 下面定义的脚本命令。...安装完成之后,在 Explorer 界面中会出现 NPM SCRIPTS 的面板,其中就会解析 package.json 中定义的脚本命令,这样只需要点击即可,不用每次手输命令行,还带有 debug 功能...例如想要看一下,less-loader 在打包时候的运行过程, 我们可以手动clone less-loader项目,然后手动引入, 文件中对应位置打上断点,然后再 NPM SCRIPTS 面板对应命令上点击
领取专属 10元无门槛券
手把手带您无忧上云