PRD2Code - PPML Language Support for VS Code

PRD2Code is a Visual Studio Code extension that provides syntax highlighting and language support for PPML (Page Protocol Markup Language) - a markup language for page protocol descriptions.

Features

🎨 Syntax Highlighting

Full syntax highlighting for all PPML elements
Color-coded syntax for better readability
Support for all PPML syntax elements:
- Page containers: <页面: [属性]>内容</>
- UI components: {组件(大小): 内容}
- Interaction flows: (动作→~条件~→目标|→目标)
- Conditional expressions: ~表达式~
- AI-generated content: ?文本?
- API calls: API:/path
- Data binding: {变量}
- Repeat patterns: ...

📝 Language Features

Code snippets for common PPML patterns
Bracket matching and auto-closing
Comment toggling (# for line comments)
Word pattern recognition for Chinese and English characters
Folding markers for page containers

⚙️ Configuration

Customizable syntax highlighting colors
Enable/disable syntax highlighting
Auto-formatting options

Installation

From VS Code Marketplace

Open VS Code
Go to Extensions view (Ctrl+Shift+X)
Search for "PPML Language Support"
Click Install

Manual Installation

Download the .vsix file from releases
Open VS Code
Go to Extensions view (Ctrl+Shift+X)
Click "..." menu and select "Install from VSIX..."
Select the downloaded file

Usage

Creating PPML Files

Create a new file with .ppml extension
Start writing PPML code
Syntax highlighting will be automatically applied

Example PPML File

# 英语学习系统 - 登录页面
# 版本: 1.0.0

<登录页面: [路由="/login", 认证要求=false]>
  {表单模块(大):
    {标题: "欢迎回来"}
    {描述: "请登录以继续学习"}
    
    {输入组:
      {文本输入(标签="用户名", 占位符="请输入用户名")}
      {密码输入(标签="密码", 占位符="请输入密码")}
    }
    
    {按钮组:
      {主要按钮(文字="登录"):
        (点击→~表单验证通过~→API:/api/auth/login→~成功~→<首页>)
      }
    }
  }
</>

Available Snippets

ppml-page - Create a new page container
ppml-component - Create a UI component
ppml-interaction - Create an interaction flow
ppml-condition - Create a conditional expression
ppml-api - Create an API call

Configuration

Extension Settings

This extension contributes the following settings:

ppml.enableSyntaxHighlighting: Enable/disable syntax highlighting (default: true)
ppml.autoFormat: Enable/disable auto-formatting (default: true)

Customizing Colors

You can customize syntax highlighting colors in your VS Code settings:

{
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "entity.name.tag.ppml",
        "settings": {
          "foreground": "#569CD6",
          "fontStyle": "bold"
        }
      },
      {
        "scope": "support.class.component.ppml",
        "settings": {
          "foreground": "#4EC9B0"
        }
      }
      // Add more customizations as needed
    ]
  }
}

PPML Syntax Reference

Basic Syntax Elements

Element	Syntax	Description
Page Container	`<页面: [属性]>内容</>`	Defines a page with attributes
UI Component	`{组件(大小): 内容}`	Defines a UI component with size
Interaction Flow	`(动作→~条件~→目标\\|→目标)`	Defines user interaction flows
Condition	`~表达式~`	Conditional expression
AI Content	`?文本?`	AI-generated content marker
API Call	`API:/path`	API endpoint call
Data Binding	`{变量}`	Data binding expression
Repeat Pattern	`...`	Repeat pattern indicator

Attributes

Page attributes are defined in square brackets: [属性名="值"]
Component parameters are defined in parentheses: (大小=中)
Supports strings, numbers, and booleans

Development

Building from Source

Clone the repository
Install dependencies:
```
cd ppml-extension
npm install
```
Compile the extension:
```
npm run compile
```

Testing

Run tests:
```
npm test
```
For development, use watch mode:
```
npm run watch
```

Packaging

To create a VSIX package for distribution:

npm run package

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

GitHub Issues - Report bugs or request features
Documentation - Full documentation

Acknowledgments

Thanks to all contributors who have helped with this project
Inspired by the need for better protocol description tools
Built with ❤️ for the developer community

Enjoy using PPML Language Support! 🚀

PRD2Code

高川