### Install Dependencies and Run Development Server

Source: https://github.com/doocs/md/blob/main/apps/vscode/README.md

Install project dependencies and start the development server for live code watching.

```sh
npm install

npm run watch
```

--------------------------------

### Install Dependencies and Run Development Server

Source: https://github.com/doocs/md/blob/main/packages/example/README.md

Install project dependencies using pnpm and then start the development server. This is an alternative to using Wrangler directly for development.

```bash
cd packages/example
pnpm i
pnpm dev
```

--------------------------------

### Start Project (Web Dev)

Source: https://github.com/doocs/md/blob/main/CLAUDE.md

Starts the Vite development server for the web application.

```bash
pnpm start
```

--------------------------------

### Start Web Development Server

Source: https://github.com/doocs/md/blob/main/AGENTS.md

Command to start the local web development server.

```bash
pnpm web dev
```

--------------------------------

### Install Node.js Version

Source: https://github.com/doocs/md/blob/main/README.md

Installs and uses a specific Node.js version using nvm. Ensure nvm is installed before running.

```sh
nvm i && nvm use
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/doocs/md/blob/main/README.md

Installs all necessary project dependencies using pnpm. This command should be run after cloning the repository.

```sh
pnpm i
```

--------------------------------

### Start Development Server

Source: https://github.com/doocs/md/blob/main/README.md

Starts the local development server for the web application. Access the application at http://localhost:5173/md/.

```sh
pnpm web dev
# 访问 http://localhost:5173/md/
```

--------------------------------

### Run uTools Plugin Packaging

Source: https://github.com/doocs/md/blob/main/apps/utools/README.md

Executes the command to build frontend resources, update plugin.json, copy the icon, and generate a zip installation package for the uTools plugin. Ensure pnpm 10+ and Node.js 22+ are installed and dependencies are installed via 'pnpm install' in the root directory.

```sh
pnpm utools:package
```

--------------------------------

### Install md-cli

Source: https://github.com/doocs/md/blob/main/README.md

Installs the md-cli globally for setting up a private Markdown editor service.

```sh
npm i -g @doocs/md-cli
```

--------------------------------

### Run Development Server with Wrangler

Source: https://github.com/doocs/md/blob/main/packages/example/README.md

Use this command to start the development server for the worker service using Wrangler. Ensure you are in the 'packages/example' directory.

```bash
cd packages/example
npx wrangler dev worker.js
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/doocs/md/blob/main/AGENTS.md

Use pnpm to install project dependencies. Ensure you are using Node.js version 22.19.0 or higher.

```bash
pnpm install
```

--------------------------------

### Start Chrome Extension in Development Mode

Source: https://github.com/doocs/md/blob/main/README.md

Starts the Chrome extension in development mode for debugging. Load the unpacked extension from the specified directory in chrome://extensions/.

```sh
pnpm web ext:dev
```

--------------------------------

### Start Private Markdown Editor Service

Source: https://github.com/doocs/md/blob/main/README.md

Starts the private Markdown editor service using md-cli. Access it at http://127.0.0.1:8800.

```sh
md-cli
```

--------------------------------

### Run Cloudflare Workers in Development Mode

Source: https://github.com/doocs/md/blob/main/README.md

Starts Cloudflare Workers in development mode.

```sh
pnpm web wrangler:dev
```

--------------------------------

### Start Private Markdown Editor Service on a Specific Port

Source: https://github.com/doocs/md/blob/main/README.md

Starts the private Markdown editor service using md-cli and specifies a custom port. Access it at http://127.0.0.1:8899.

```sh
md-cli port=8899
```

--------------------------------

### Fetch Telegram Updates via Curl

Source: https://github.com/doocs/md/blob/main/docs/telegram-usage.md

This command-line example demonstrates how to fetch Telegram updates using curl. It's useful for quickly retrieving chat IDs from the API response.

```bash
# Assume your Token is 123:ABC
curl https://api.telegram.org/bot123:ABC/getUpdates
```

--------------------------------

### Markdown Ruby Pronunciation with Separators

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

Shows examples of using different separators (middle dot, full-width period, Chinese period, hyphen) within Ruby pronunciation annotations.

```markdown
[你好世界]{nǐ・hǎo・shì・jiè}
[小夜時雨]^(さ・よ・しぐれ)
```

--------------------------------

### Get Telegram Updates using Bot Token

Source: https://github.com/doocs/md/blob/main/docs/telegram-usage.md

Use this URL to retrieve updates for your bot, which includes chat information. Replace `<YourBotToken>` with your actual Bot Token.

```bash
https://api.telegram.org/bot<YourBotToken>/getUpdates
```

--------------------------------

### Build Project for Production

Source: https://github.com/doocs/md/blob/main/apps/vscode/README.md

Package the project for production deployment.

```sh
npm run build
```

--------------------------------

### Build CLI and Pack

Source: https://github.com/doocs/md/blob/main/CLAUDE.md

Builds the web application, copies it to the md-cli package, and creates an npm pack.

```bash
pnpm run build:cli
```

--------------------------------

### Production Build

Source: https://github.com/doocs/md/blob/main/AGENTS.md

Command to create a production build of the web application.

```bash
pnpm web build
```

--------------------------------

### 开发流程：提交与推送

Source: https://github.com/doocs/md/blob/main/CONTRIBUTING.md

将本地更改添加到暂存区、提交并推送到远程仓库的 Git 命令。

```bash
git add .
git commit -m "feat: awesome feature"
git push origin feat/awesome-feature
```

--------------------------------

### 开发流程：更新与创建分支

Source: https://github.com/doocs/md/blob/main/CONTRIBUTING.md

从 main 分支拉取最新代码并基于 main 创建新功能分支的 Git 命令。

```bash
git checkout main
git pull upstream main

git checkout -b feat/awesome-feature
```

--------------------------------

### 配置本地编辑器调试

Source: https://github.com/doocs/md/blob/main/CONTRIBUTING.md

在 apps/web 目录下创建 .env.local 文件，配置 VITE_LAUNCH_EDITOR 以方便调试。

```properties
VITE_LAUNCH_EDITOR=cursor
```

--------------------------------

### Web App: Analyze Build

Source: https://github.com/doocs/md/blob/main/CLAUDE.md

Builds the web application and generates a visualization of the bundle using rollup-plugin-visualizer.

```bash
pnpm web build:analyze
```

--------------------------------

### Build uTools Frontend Resources

Source: https://github.com/doocs/md/blob/main/apps/utools/README.md

Builds the frontend resources for the uTools plugin, outputting them to 'apps/utools/dist'. This build uses relative paths for compatibility with uTools' file:// protocol. MathJax is copied from node_modules, and Mermaid is bundled as an npm module.

```sh
pnpm --filter @md/web run build:utools
```

--------------------------------

### 开发流程：运行检查

Source: https://github.com/doocs/md/blob/main/CONTRIBUTING.md

在开发过程中运行代码检查的命令，包括 ESLint、TypeScript 类型检查和产物构建验证。

```bash
pnpm run lint        # ESLint + Prettier
pnpm run type-check  # TypeScript 类型检查
pnpm run web build       # 产物验证
```

--------------------------------

### JavaScript for Loading and Theme

Source: https://github.com/doocs/md/blob/main/apps/web/index.html

JavaScript to apply dark theme based on localStorage or system preference, and to show a timeout tip.

```javascript
const theme = localStorage.getItem('vueuse-color-scheme')
if (theme === 'dark' || (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.querySelector('.loading').classList.add('dark')
}

setTimeout(() => {
  const tip = document.querySelector('.loading .timeout-tip')
  if (tip) {
    tip.style.display = 'block'
  }
}, 30000)
```

--------------------------------

### Build H5 for Netlify

Source: https://github.com/doocs/md/blob/main/README.md

Builds the H5 version of the application for deployment on Netlify.

```sh
pnpm web build:h5-netlify
```

--------------------------------

### Inspect Dependency Tree

Source: https://github.com/doocs/md/blob/main/CLAUDE.md

Uses node-modules-inspector to view the dependency tree.

```bash
pnpm run inspector
```

--------------------------------

### 本地开发设置

Source: https://github.com/doocs/md/blob/main/CONTRIBUTING.md

克隆仓库、配置上游、安装依赖并启动本地开发环境的步骤。

```bash
# 1. Fork 本仓库并克隆
git clone https://github.com/<你的用户名>/md.git
cd md

# 2. 配置上游仓库
git remote add upstream https://github.com/doocs/md.git

# 3. 安装依赖
pnpm install

# 4. 启动本地开发
pnpm web dev
```

--------------------------------

### 项目结构概览

Source: https://github.com/doocs/md/blob/main/CONTRIBUTING.md

展示了 doocs/md 项目的 monorepo 结构，包括 apps 和 packages 目录下的主要模块。

```shell
- apps
  - web           # 网页及浏览器插件
  - vscode        # VSCode 插件
- packages
  - config        # 项目级别配置
  - core          # 核心 markdown 渲染器
  - shared        # 共享的配置、常量、类型和工具函数
  - example       # 公众号 openapi 接口代理服务示例
  - md-cli        # 命令行工具
```

--------------------------------

### Run Docker Image for Private Service

Source: https://github.com/doocs/md/blob/main/README.md

Runs a Docker container to host a private instance of the Markdown editor. Access it at http://localhost:8080.

```sh
docker run -d -p 8080:80 doocs/md:latest
```

--------------------------------

### Web App: Firefox Extension Dev

Source: https://github.com/doocs/md/blob/main/CLAUDE.md

Enables development mode for the WXT Firefox extension.

```bash
pnpm web firefox:dev
```

--------------------------------

### Release CLI

Source: https://github.com/doocs/md/blob/main/CLAUDE.md

Releases the CLI package using the release script.

```bash
pnpm run release:cli
```

--------------------------------

### Custom Upload Implementation with Axios

Source: https://github.com/doocs/md/blob/main/docs/custom-upload.md

Use this snippet to upload a file to a custom endpoint using axios. Ensure the CUSTOM_ARG object is correctly populated with the file, utility functions, and callbacks. The `okCb` function should be called with the URL of the uploaded file upon success.

```javascript
const { file, util, okCb, errCb } = CUSTOM_ARG
const param = new FormData()
param.append(`file`, file)
util.axios
  .post(`http://127.0.0.1:8800/upload`, param, {
    headers: { 'Content-Type': `multipart/form-data` },
  })
  .then((res) => {
    okCb(res.url)
  })
  .catch((err) => {
    errCb(err)
  })
```

--------------------------------

### Markdown 链接和图片

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用 `[显示文本](链接地址)` 创建链接，使用 `![描述文本](图片链接)` 创建图片。

```markdown
[访问 Doocs](https://github.com/doocs)

![doocs](https://cdn-doocs.oss-cn-shenzhen.aliyuncs.com/gh/doocs/md/images/logo-2.png)
```

--------------------------------

### VSCode Extension: Compile

Source: https://github.com/doocs/md/blob/main/CLAUDE.md

Compiles the VSCode extension using webpack.

```bash
pnpm vscode compile
```

--------------------------------

### VSCode Extension: Production Build

Source: https://github.com/doocs/md/blob/main/CLAUDE.md

Performs a production build of the VSCode extension using webpack.

```bash
pnpm vscode build
```

--------------------------------

### VSCode Extension: Package

Source: https://github.com/doocs/md/blob/main/CLAUDE.md

Packages the VSCode extension for distribution using vsce.

```bash
pnpm vscode package
```

--------------------------------

### VSCode Extension: Watch

Source: https://github.com/doocs/md/blob/main/CLAUDE.md

Runs webpack in watch mode for the VSCode extension, recompiling on changes.

```bash
pnpm vscode watch
```

--------------------------------

### Markdown 字体样式

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用星号、下划线、波浪线、等号和加号来创建粗体、斜体、删除线、高亮、下划线和波浪线文本。

```markdown
**粗体** 或 __粗体__
*斜体* 或 _斜体_
~~删除线~~
==高亮==
++下划线++
~波浪线~
```

--------------------------------

### Markdown 列表内块公式

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

在列表项中嵌入块级公式。

```latex
$$
\\chi^2 = \\sum \\frac{(O - E)^2}{E}
$$
```

```latex
$$
\\chi^2 = \\sum \\frac{(|O - E| - 0.5)^2}{E}
$$
```

--------------------------------

### Lint and Auto-fix Code

Source: https://github.com/doocs/md/blob/main/AGENTS.md

Run ESLint to check code quality and automatically fix issues.

```bash
pnpm run lint
```

--------------------------------

### Package Chrome Extension

Source: https://github.com/doocs/md/blob/main/README.md

Packages the Chrome extension for distribution.

```sh
pnpm web ext:zip
```

--------------------------------

### Execute Command in CLI Package

Source: https://github.com/doocs/md/blob/main/AGENTS.md

Run a specified command within the CLI package.

```bash
pnpm cli <cmd>
```

--------------------------------

### Markdown 引用语法

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用 `>` 创建引用，可嵌套使用。

```markdown
> 这是一个引用
> 
> > 这是一个嵌套引用
```

--------------------------------

### Markdown 标题语法

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用 `#` 号创建不同级别的标题，数量决定级别。

```markdown
# 一级标题

## 二级标题

### 三级标题

#### 四级标题
```

--------------------------------

### Loading Indicator CSS

Source: https://github.com/doocs/md/blob/main/apps/web/index.html

CSS for the loading indicator, including dark mode styling and a keyframe animation for dots.

```css
.loading {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-size: 18px;
}

.loading::before {
  content: url('/src/assets/images/favicon.png');
  width: 100px;
  height: 100px;
  margin-bottom: 26px;
}

.loading.dark {
  color: #ffffff;
  background-color: #141414;
}

.loading .txt {
  position: absolute;
  bottom: 10%;
}

.loading .txt::after {
  content: '...';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0% {
    content: ' ';
  }
  25% {
    content: '.';
  }
  50% {
    content: '..';
  }
  75% {
    content: '...';
  }
}
```

--------------------------------

### PlantUML 流程图

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用 PlantUML 创建流程图和时序图。

```plantuml
@startuml
participant Participant as Foo
actor       Actor       as Foo1
boundary    Boundary    as Foo2
control     Control     as Foo3
entity      Entity      as Foo4
database    Database    as Foo5
collections Collections as Foo6
queue       Queue       as Foo7
Foo -> Foo1 : To actor
Foo -> Foo2 : To boundary
Foo -> Foo3 : To control
Foo -> Foo4 : To entity
Foo -> Foo5 : To database
Foo -> Foo6 : To collections
Foo -> Foo7: To queue
@enduml
```

--------------------------------

### Markdown 分割线

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用三个或更多的 `-`, `*`, 或 `_` 创建分割线。

```markdown
---

```

--------------------------------

### MathJax Configuration

Source: https://github.com/doocs/md/blob/main/apps/web/index.html

Configuration object for MathJax, specifying tag format and SVG font cache.

```javascript
window.MathJax = {
  tex: {
    tags: 'ams'
  },
  svg: {
    fontCache: 'none'
  },
}
```

--------------------------------

### Deploy Cloudflare Workers

Source: https://github.com/doocs/md/blob/main/README.md

Deploys the Cloudflare Workers.

```sh
pnpm web wrangler:deploy
```

--------------------------------

### Markdown LaTeX 标准行内公式

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用 `\(...\)` 包裹公式，如 \(x^2 + y^2 = z^2\)。

```latex
\(x^2 + y^2 = z^2\)
```

--------------------------------

### Markdown 列表语法

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用 `-`, `*`, `+` 创建无序列表，使用数字加点号创建有序列表。支持嵌套。

```markdown
- 无序列表项 1
  1. 嵌套有序列表项 1
  2. 嵌套有序列表项 2
- 无序列表项 2

1. 有序列表项 1
2. 有序列表项 2
```

--------------------------------

### Infographic 信息图

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用 Infographic 引擎创建信息图，可视化数据。

```infographic
infographic list-row-horizontal-icon-arrow
data
  title 客户增长引擎
  desc 多渠道触达与复购提升
  items
    - label 线索获取
      value 18.6
      desc 渠道投放与内容获客
      icon rocket-launch
    - label 转化提效
      value 12.4
      desc 线索评分与自动跟进
      icon progress-check
    - label 复购提升
      value 9.8
      desc 会员体系与权益运营
      icon account-sync
    - label 口碑传播
      value 6.2
      desc 社群激励与推荐裂变
      icon account-group
```

--------------------------------

### Execute Command in MCP Service

Source: https://github.com/doocs/md/blob/main/AGENTS.md

Run a specified command within the MCP service.

```bash
pnpm mcp <cmd>
```

--------------------------------

### Markdown Ruby Pronunciation Formats

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

Demonstrates the two supported formats for Ruby pronunciation in Markdown: [text]{pronunciation} and [text]^(pronunciation).

```markdown
1. [文字]{注音}
2. [文字]^(注音)
```

--------------------------------

### Markdown LaTeX 块级公式

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用 `$$` 包裹公式，如 $$...$$。

```latex
$$
\begin{aligned}
d_{i, j} &\\leftarrow d_{i, j} + 1 \\
d_{i, y + 1} &\\leftarrow d_{i, y + 1} - 1 \\
d_{x + 1, j} &\\leftarrow d_{x + 1, j} - 1 \\
d_{x + 1, y + 1} &\\leftarrow d_{x + 1, y + 1} + 1
\end{aligned}
$$
```

--------------------------------

### Package Firefox Add-on

Source: https://github.com/doocs/md/blob/main/README.md

Packages the Firefox add-on. The output zip file is located at apps/web/.output/md-{version}-firefox.zip.

```sh
pnpm web firefox:zip
```

--------------------------------

### Markdown 表格语法

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用 `|` 和 `-` 分隔单元格和表头创建表格。

```markdown
| 项目人员                                    | 邮箱                   | 微信号       |
| ------------------------------------------- | ---------------------- | ------------ |
| [yanglbme](https://github.com/yanglbme)     | contact@yanglibin.info | YLB0109      |
| [YangFong](https://github.com/YangFong)     | yangfong2022@gmail.com | yq2419731931 |
| [thinkasany](https://github.com/thinkasany) | thinkasany@gmail.com   | thinkasany   |
```

--------------------------------

### Markdown LaTeX 标准块级公式

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用 `\[...\]` 包裹公式，如 \[...\]。

```latex
\[
\\int\_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}
\]
```

--------------------------------

### Markdown Ruby Pronunciation with Mismatched Separators

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

Illustrates how Markdown handles Ruby pronunciation when the number of strings does not match the number of separators, showing automatic matching to the most appropriate separator.

```markdown
[小夜時雨]{さ・よ・しぐれ}
[小夜時雨]{さ・よ}
[小夜]{さ・よ・しぐれ}
[小夜時雨]{さ・よ・しぐれ・extra}
```

--------------------------------

### Markdown LaTeX 行内公式

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用 `$` 包裹公式，如 $E = mc^2$。

```latex
$E = mc^2$
```

--------------------------------

### Markdown 代码块语法

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用反引号包裹行内代码，使用三个反引号并指定语言创建代码块。

```javascript
console.log(`Hello, Doocs!`) 
```

--------------------------------

### 公众号搜索响应 JSON 示例

Source: https://github.com/doocs/md/blob/main/docs/mp-card.md

从网络请求的响应中解析出的 JSON 数据，其中包含公众号的 fakeid、昵称、别名等信息。

```json
{
  "list": [
    {
      "fakeid": "MzIxNjA5ODQ0OQ==",
      "nickname": "Doocs",
      "alias": "idoocs",
      "service_type": 1,
      "signature": "GitHub 开源组织 @Doocs 旗下唯一公众号，专注分享技术领域相关知识及行业最新资讯。",
      "verify_status": 1
    }
  ]
}
```

--------------------------------

### Mermaid 饼图

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用 Mermaid 创建饼图来展示数据比例。

```mermaid
pie
  title Key elements in Product X
  "Calcium" : 42.96
  "Potassium" : 50.05
  "Magnesium" : 10.01
  "Iron" : 5
```

```mermaid
pie
  title 为什么总是宅在家里？
  "喜欢宅" : 45
  "天气太热" : 70
  "穷" : 500
  "没人约" : 95
```

--------------------------------

### 提交规范：Pull Request 标题示例

Source: https://github.com/doocs/md/blob/main/CONTRIBUTING.md

展示了符合规范的 Pull Request 标题格式，包含类型、影响范围和简要描述。

```conventionalcommits
feat(editor): 支持自定义快捷键
```

--------------------------------

### 查找公众号 fakeid 的网络请求示例

Source: https://github.com/doocs/md/blob/main/docs/mp-card.md

当在微信公众号后台插入公众号名片时，会发起一个搜索请求。此 URL 示例展示了请求的结构。

```plaintext
https://mp.weixin.qq.com/cgi-bin/searchbiz?action=search_biz&scene=1&begin=0...
```

--------------------------------

### Mermaid 流程图 (TD)

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用 Mermaid 创建从上到下的流程图。

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
```

--------------------------------

### TypeScript Type Checking

Source: https://github.com/doocs/md/blob/main/AGENTS.md

Perform TypeScript type checking to ensure code correctness.

```bash
pnpm run type-check
```

--------------------------------

### Mermaid 流程图 (LR)

Source: https://github.com/doocs/md/blob/main/apps/web/src/assets/example/markdown.md

使用 Mermaid 创建从左到右的流程图。

```mermaid
graph LR
  A[GraphCommand] --> B[update]
  A --> C[goto]
  A --> D[send]

  B --> B1[更新状态]
  C --> C1[流程控制]
  D --> D1[消息传递]
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.