Markdown Preview Penframe Support

VSCode Markdown Preview で Penframe 図表を表示できるようにする拡張機能です。

機能

この拡張機能は、MarkdownファイルでPenframeのDSL（Domain Specific Language）を使用してワイヤーフレームやモックアップを直接作成・プレビューできるようにします。

使用方法

Markdownファイル内で以下のようにPenframeコードブロックを作成します：

```penframe
@app { width: 1200, height: 600, title: "My App" }
@headline "Welcome" { level: 1, color: "#333" }
@hr
@p "Welcome to our app!" { align: "center" }
@button "Get Started" { color: "#007bff", textColor: "#ffffff" }
@tabs { items: ["Home", "Features", "Contact"], active: 0 }
@badge "New" { color: "#e74c3c" }
```

Markdownプレビューを開くと、PenframeコードがSVG図表として表示されます。

サンプル

実際の使用例については、examples/sample_penframe.md を参照してください。このファイルには様々なPenframe要素の使用例が含まれています。

要件

• VSCode 1.100.0以上
• Penframeライブラリ（自動でインストールされます）

インストール

1. VSCodeの拡張機能マーケットプレイスからインストール（または開発版を手動インストール）
2. Markdownファイルを開いてPenframeコードブロックを作成
3. Ctrl+Shift+V でプレビューを表示

Penframe DSL について

Penframeは以下のような要素を提供します：

• @app: アプリケーションのフレーム
• @headline: 見出しテキスト
• @p: 段落テキスト
• @button: ボタン要素
• @tabs: タブ要素
• @badge: バッジ要素
• @hr: 水平線

詳細なPenframeの仕様については、docs/penframe.mdを参照してください。

開発者向け情報

実装詳細や開発手順については、docs/implementation-guide.mdを参照してください。

既知の問題

現在、既知の問題はありません。問題を発見した場合は、GitHubのIssuesでお知らせください。

リリースノート

0.0.1

• 初期リリース
• Penframe DSLのSVG変換機能
• VSCode Markdown Preview統合

開発者向け情報

この拡張機能は以下の技術を使用しています：

• TypeScript
• VSCode Extension API
• Penframe ライブラリ
• MarkdownIt プラグイン

ライセンス

このプロジェクトのライセンスについては、LICENSEファイルを参照してください。