VSCode Markdown 样式插件使用教程

随笔2个月前发布 七筒
52 0 0

VSCode Markdown 样式插件使用教程

vscode-markdown-styleMarkdown styles for vscode项目地址:https://gitcode.com/gh_mirrors/vs/vscode-markdown-style

1. 项目的目录结构及介绍

  1. vscode-markdown-style/

  2. ├── README.md

  3. ├── package.json

  4. ├── src/

  5. │ ├── extension.ts

  6. │ ├── styles/

  7. │ ├── default.css

  8. │ ├── dark.css

  9. │ ├── light.css

  10. ├── test/

  11. │ ├── 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 的部分代码示例:

  1. import * as vscode from 'vscode';

  2. import { activateStyles } from './styles/styleManager';

  3. export function activate(context: vscode.ExtensionContext) {

  4. activateStyles();

  5. vscode.workspace.onDidChangeConfiguration(() => {

  6. activateStyles();

  7. });

  8. }

  9. export function deactivate() {}

3. 项目的配置文件介绍

package.json 是项目的配置文件,包含了插件的元数据、依赖和命令等信息。以下是部分关键配置项的介绍:

  • name: 插件的名称。
  • displayName: 插件的显示名称。
  • version: 插件的版本号。
  • publisher: 插件的发布者。
  • engines: 插件支持的VSCode版本。
  • contributes: 插件的贡献点,定义了命令、配置项等。

以下是 package.json 的部分配置示例:

  1. {

  2. "name": "vscode-markdown-style",

  3. "displayName": "Markdown Style",

  4. "version": "1.0.0",

  5. "publisher": "raycon",

  6. "engines": {

  7. "vscode": "^1.50.0"

  8. },

  9. "contributes": {

  10. "commands": [

  11. {

  12. "command": "markdown-style.applyStyle",

  13. "title": "Apply Markdown Style"

  14. }

  15. ],

  16. "configuration": {

  17. "title": "Markdown Style",

  18. "properties": {

  19. "markdown-style.theme": {

  20. "type": "string",

  21. "default": "default",

  22. "description": "Select the theme for Markdown styling."

  23. }

  24. }

  25. }

  26. }

  27. }

通过以上配置,用户可以在VSCode的设置中自定义Markdown样式主题。

vscode-markdown-styleMarkdown styles for vscode项目地址:https://gitcode.com/gh_mirrors/vs/vscode-markdown-style

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...