VSCode GitHub Markdown Preview 项目教程

VSCode GitHub Markdown Preview 项目教程

vscode-github-markdown-preview-styleVS Code extension that changes the built-in markdown preview to match Github's styling项目地址:https://gitcode.com/gh_mirrors/vs/vscode-github-markdown-preview-style

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

vscode-github-markdown-preview-style/
├── .vscode/
│   ├── extensions.json
│   └── settings.json
├── assets/
│   ├── dark.css
│   ├── light.css
│   └── markdown-github.css
├── src/
│   ├── extension.ts
│   └── preview.ts
├── .gitignore
├── LICENSE
├── package.json
├── README.md
└── tsconfig.json

• .vscode/: 包含VSCode的配置文件，如扩展推荐和设置。
• assets/: 包含用于Markdown预览的CSS文件，支持不同的主题（如dark和light）。
• src/: 包含扩展的主要源代码文件。
• .gitignore: 指定Git忽略的文件和目录。
• LICENSE: 项目的许可证文件。
• package.json: 项目的npm配置文件，包含依赖和脚本。
• README.md: 项目的介绍和使用说明。
• tsconfig.json: TypeScript的配置文件。

2. 项目的启动文件介绍

项目的启动文件是src/extension.ts。这个文件是VSCode扩展的入口点，负责初始化和激活扩展。

import * as vscode from 'vscode';
import { activatePreview } from './preview';

export function activate(context: vscode.ExtensionContext) {
    activatePreview(context);
}

export function deactivate() {}

• activate(): 当扩展被激活时调用，初始化Markdown预览功能。
• deactivate(): 当扩展被停用时调用，进行清理工作。

3. 项目的配置文件介绍

主要的配置文件是package.json，它包含了扩展的所有配置信息，如名称、版本、依赖等。

{
    "name": "vscode-github-markdown-preview-style",
    "displayName": "GitHub Markdown Preview",
    "version": "1.0.0",
    "description": "Changes VS Code's built-in markdown preview to match GitHub's style",
    "publisher": "mjbvz",
    "engines": {
        "vscode": "^1.50.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onLanguage:markdown"
    ],
    "main": "./out/extension.js",
    "contributes": {
        "configuration": {
            "type": "object",
            "title": "GitHub Markdown Preview",
            "properties": {
                "markdown-preview-github-styles.colorTheme": {
                    "type": "string",
                    "default": "auto",
                    "description": "Sets the color theme mode for the styling of the Markdown preview"
                }
            }
        }
    },
    "scripts": {
        "vscode:prepublish": "npm run compile",
        "compile": "tsc -p ./",
        "watch": "tsc -watch -p ./",
        "pretest": "npm run compile && npm run lint",
        "lint": "eslint src --ext ts",
        "test": "node ./out/test/runTest.js"
    },
    "devDependencies": {
        "@types/vscode": "^1.50.0",
        "@types/glob": "^7.1.3",
        "@types/mocha": "^8.0.4",
        "@types/node": "^12.11.7",
        "eslint": "^7.10.0",
        "glob": "^7.1.6",
        "mocha": "^8.1.3",
        "typescript": "^4.0.3",
        "vscode-test": "^1.4.0"
    }
}

• name: 扩展的名称。
• displayName: 扩展的显示名称。
• version: 扩展的版本号。
• description: 扩展的描述。
• publisher: 扩展的发布者。
• engines: 扩展支持的VSCode版本。
• activationEvents: 扩展的激活事件。
• main: 扩展的主入口文件。
• **

vscode-github-markdown-preview-styleVS Code extension that changes the built-in markdown preview to match Github's styling项目地址:https://gitcode.com/gh_mirrors/vs/vscode-github-markdown-preview-style