SyntaxLab

Interactive learning for developers and exam candidates — learn by writing and practicing.

Demo: https://dsclca12.github.io/SyntaxLab/

SyntaxLab is a small, static learning workspace where you read a concept, edit examples, make mistakes, and get useful feedback. It runs entirely in the browser; progress is stored in localStorage.

Features

• 15 short TOML lessons, from key/value pairs to pyproject.toml
• 7 introductory Computer Level 2 lessons covering public foundations, Word, Excel, PowerPoint, Python, and review habits
• A 45-chapter Python curriculum with 100+ item-by-item syntax and API explanations, worked examples, goals, checks, and hands-on exercises
• Real TOML parsing and semantic exercise checks
• Complete, repair, and write-from-requirement exercises
• Progressive hints after failed attempts
• Python examples include guided tracing and hands-on checkpoints, not only syntax matching
• A five-lesson hexadecimal path after Binary Foundations, with generated conversion, byte, RGB, and code-notation exercises
• YAML and Markdown starter paths with browser-safe structural exercise checks
• Local progress tracking with reset support
• Responsive three-panel desktop layout and mobile lesson navigation
• Light and dark themes
• Static GitHub Pages deployment

Currently supported

• TOML fundamentals
• Computer Level 2 introduction
• Python system curriculum from the first script through functions, files, OOP, type hints, regular expressions, dates, and async programming
• Hexadecimal foundations, including binary mapping and real-world byte notation
• Interactive exercises
• TOML validation
• Local progress
• YAML (learning subset)
• Markdown (common authoring subset)
• C
• Python syntax highlighting and structural exercise checks (browser-only)

Local development

Requires Node.js 20 or later.

npm install
npm run dev

Build and verify the project with:

npm run lint
npm run typecheck
npm test
npm run build

Architecture

The application consumes a LearningModule made of lessons and exercises. Computer foundations live under src/languages/binary and src/languages/hexadecimal; TOML lives under src/languages/toml; YAML and Markdown live under their matching language folders; Computer Level 2 content lives under src/languages/computer; the 45-chapter Python curriculum lives under src/languages/python. TOML, YAML and Markdown exercises use browser-safe parsers/structural validators, while the text-based learning paths use focused validators and syntax-highlighted editors. A future module should add its content, config and validator/editor choice, then register the module in src/App.tsx.

Contributing

See CONTRIBUTING.md and the 维护指南. Small, focused improvements and new exercises are welcome.

License

MIT — see LICENSE.