VSCode Markdown 样式插件使用教程
vscode-markdown-styleMarkdown styles for vscode项目地址:https://gitcode.com/gh_mirrors/vs/vscode-markdown-style
1. 项目的目录结构及介绍
vscode-markdown-style/
├── README.md
├── package.json
├── src/
│ ├── extension.ts
│ ├── styles/
│ ├── default.css
│ ├── dark.css
│ ├── light.css
├── test/
│ ├── extension.test.ts
README.md
: 项目说明文件,包含项目的基本信息和使用指南。package.json
: 项目的配置文件,定义了项目的依赖、脚本和扩展信息。src/
: 源代码目录。extension.ts
: 插件的主入口文件,负责注册和激活插件。styles/
: 样式文件目录,包含不同主题的CSS文件。default.css
: 默认样式文件。dark.css
: 暗色主题样式文件。light.css
: 亮色主题样式文件。
test/
: 测试文件目录,包含插件的单元测试。extension.test.ts
: 插件的单元测试文件。
2. 项目的启动文件介绍
src/extension.ts
是项目的启动文件,主要负责以下功能:
- 注册命令和事件监听器。
- 激活插件时加载相应的样式文件。
- 处理用户配置和主题切换。
以下是 extension.ts
的部分代码示例:
import * as vscode from 'vscode';
import { activateStyles } from './styles/styleManager';
export function activate(context: vscode.ExtensionContext) {
activateStyles();
vscode.workspace.onDidChangeConfiguration(() => {
activateStyles();
});
}
export function deactivate() {}
3. 项目的配置文件介绍
package.json
是项目的配置文件,包含了插件的元数据、依赖和命令等信息。以下是部分关键配置项的介绍:
name
: 插件的名称。displayName
: 插件的显示名称。version
: 插件的版本号。publisher
: 插件的发布者。engines
: 插件支持的VSCode版本。contributes
: 插件的贡献点,定义了命令、配置项等。
以下是 package.json
的部分配置示例:
{
"name": "vscode-markdown-style",
"displayName": "Markdown Style",
"version": "1.0.0",
"publisher": "raycon",
"engines": {
"vscode": "^1.50.0"
},
"contributes": {
"commands": [
{
"command": "markdown-style.applyStyle",
"title": "Apply Markdown Style"
}
],
"configuration": {
"title": "Markdown Style",
"properties": {
"markdown-style.theme": {
"type": "string",
"default": "default",
"description": "Select the theme for Markdown styling."
}
}
}
}
}
通过以上配置,用户可以在VSCode的设置中自定义Markdown样式主题。
vscode-markdown-styleMarkdown styles for vscode项目地址:https://gitcode.com/gh_mirrors/vs/vscode-markdown-style