VSCode Markdown 样式插件使用教程

54 0 0

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

# 随笔