Marp for VS Code 使用教程

林浪其Geneva

于 2024-08-21 10:04:40 发布

阅读量722

点赞数 28

本文链接：https://blog.csdn.net/gitblog_00694/article/details/141385467

版权

Marp for VS Code 使用教程

marp-vscodeMarp for VS Code: Create slide deck written in Marp Markdown on VS Code项目地址:https://gitcode.com/gh_mirrors/ma/marp-vscode

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

Marp for VS Code 是一个用于创建演示文稿的扩展。以下是其基本的目录结构：

marp-vscode/
├── assets/
├── docs/
├── examples/
├── scripts/
├── src/
│   ├── commands/
│   ├── core/
│   ├── preview/
│   ├── theme/
│   └── utils/
├── test/
├── .gitignore
├── .vscodeignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── package.json
├── README.md
└── tsconfig.json

assets/: 包含项目所需的静态资源文件。
docs/: 包含项目的文档文件。
examples/: 包含示例文件，展示如何使用 Marp。
scripts/: 包含构建和测试脚本。
src/: 包含源代码文件，分为多个子目录：
- commands/: 包含命令相关的代码。
- core/: 包含核心功能的代码。
- preview/: 包含预览功能的代码。
- theme/: 包含主题相关的代码。
- utils/: 包含工具函数和辅助代码。
test/: 包含测试文件。
.gitignore: 指定 Git 忽略的文件和目录。
.vscodeignore: 指定 VS Code 扩展打包时忽略的文件和目录。
CHANGELOG.md: 记录项目的变更日志。
CONTRIBUTING.md: 指导如何贡献代码。
LICENSE: 项目的许可证。
package.json: 项目的配置文件，包含依赖和脚本。
README.md: 项目的介绍和使用说明。
tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

Marp for VS Code 的启动文件主要位于 src/ 目录下。以下是一些关键的启动文件：

src/extension.ts: 这是扩展的主入口文件，负责注册命令和初始化扩展。
src/commands/: 这个目录下的文件定义了扩展的命令，例如 commands/convertCommand.ts 负责处理转换命令。

3. 项目的配置文件介绍

Marp for VS Code 的配置文件主要包括 package.json 和 tsconfig.json。

package.json: 这是 Node.js 项目的标准配置文件，包含项目的元数据、依赖、脚本等信息。例如：

{
  "name": "marp-vscode",
  "displayName": "Marp for VS Code",
  "version": "1.0.0",
  "description": "Create slide decks written in Marp Markdown",
  "publisher": "marp-team",
  "engines": {
    "vscode": "^1.50.0"
  },
  "categories": [
    "Other"
  ],
  "activationEvents": [
    "onCommand:marp.markdown.convert"
  ],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [
      {
        "command": "marp.markdown.convert",
        "title": "Convert Marp Markdown to PDF"
      }
    ]
  },
  "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"
  }

marp-vscodeMarp for VS Code: Create slide deck written in Marp Markdown on VS Code项目地址:https://gitcode.com/gh_mirrors/ma/marp-vscode