Shiki Twoslash 项目使用文档

Shiki Twoslash 项目使用文档

twoslashYou take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible static code samples项目地址:https://gitcode.com/gh_mirrors/tw/twoslash

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

Shiki Twoslash 项目的目录结构如下：

twoslash/
├── packages/
│   ├── remark-shiki-twoslash/
│   ├── twoslash-cli/
│   └── shiki-twoslash/
├── plugins/
│   ├── docusaurus-preset-shiki-twoslash/
│   ├── eleventy-plugin-shiki-twoslash/
│   ├── gatsby-remark-shiki-twoslash/
│   ├── hexo-shiki-twoslash/
│   └── vuepress-plugin-shiki-twoslash/
├── examples/
│   ├── docusaurus-example/
│   ├── eleventy-example/
│   ├── gatsby-example/
│   ├── hexo-example/
│   └── vuepress-example/
├── README.md
├── LICENSE
├── package.json
└── pnpm-lock.yaml

目录结构介绍

• packages/: 包含核心包，如 remark-shiki-twoslash 和 twoslash-cli。
• plugins/: 包含各种静态站点生成器的插件。
• examples/: 包含使用不同静态站点生成器的示例项目。
• README.md: 项目介绍和使用说明。
• LICENSE: 项目许可证。
• package.json: 项目依赖和脚本配置。
• pnpm-lock.yaml: 锁定依赖版本。

2. 项目的启动文件介绍

项目的启动文件主要是 package.json 中的脚本部分。以下是一些关键的启动脚本：

{
  "scripts": {
    "deploy": "pnpm deploy",
    "bootstrap": "pnpm i && pnpm bootstrap",
    "test": "pnpm test"
  }
}

启动脚本介绍

• deploy: 用于部署项目。
• bootstrap: 安装依赖并初始化项目。
• test: 运行测试脚本。

3. 项目的配置文件介绍

项目的配置文件主要包括 package.json 和各个插件的配置文件。以下是一些关键的配置项：

package.json

{
  "name": "twoslash",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "deploy": "pnpm deploy",
    "bootstrap": "pnpm i && pnpm bootstrap",
    "test": "pnpm test"
  },
  "dependencies": {
    "remark-shiki-twoslash": "^1.0.0",
    "twoslash-cli": "^1.0.0",
    "shiki-twoslash": "^1.0.0"
  },
  "devDependencies": {
    "typescript": "^4.0.0"
  }
}

插件配置文件

每个插件的配置文件会有所不同，以下是一个示例：

docusaurus-preset-shiki-twoslash

{
  "presets": [
    [
      "docusaurus-preset-shiki-twoslash",
      {
        "theme": "dark-plus",
        "langs": ["typescript", "javascript"]
      }
    ]
  ]
}

配置文件介绍

• package.json: 定义项目名称、版本、入口文件、脚本和依赖。
• 插件配置文件: 根据不同插件的需求进行配置，如主题和语言支持。

以上是 Shiki Twoslash 项目的基本使用文档，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对您有所帮助。

twoslashYou take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible static code samples项目地址:https://gitcode.com/gh_mirrors/tw/twoslash