PreviewPaneについて
私たちは、開発者に最高のコードプレビューと共有ツールを提供することに尽力しています
コードの表示をエレガントに、知識の共有をシンプルに
製品ミッション
PreviewPaneは、フロントエンド開発者、デザイナー、教育シナリオ向けに特別に設計された、ウェブベースのコード編集および画像エクスポートツールです。私たちの目標は、ユーザーがブラウザで簡単にHTML + CSSコードを編集し、リアルタイムで実行効果をプレビューし、最終的に高品質の画像ファイルとしてエクスポートできるようにすることです。
コア機能
要求仕様書に基づいて設計されたプロフェッショナルな機能は、開発者の実際のニーズを満たします
エディターパネル
シンタックスハイライト付きのHTML + CSSコード編集をサポートし、等幅フォントを使用し、デフォルトのサンプルコードを提供
プレビューパネル
HTML + CSSのリアルタイムレンダリング、WYSIWYG、ページ表示効果はエクスポートされた画像と完全に一致、JavaScriptは実行しません
コード画像をエクスポート
エディターパネルのコードを画像にレンダリングし、元のエディタースタイル（背景、フォント、ボーダー、角丸）を維持
実行エフェクトをエクスポート
プレビューパネルでレンダリングされたエフェクトをPNGとしてエクスポートし、画像がページ効果と完全に一致するようにします
複数のエクスポートスタイル
デフォルト、カード、macOSスタイル、ターミナルスタイルの4つの異なるエクスポートスタイルのテーマをサポート
レスポンシブデザイン
モバイルは上下レイアウト、デスクトップは左右レイアウトのレスポンシブデザイン。TailwindCSSで構築されています
技術アーキテクチャ
前端技术栈：フロントエンド技術スタック：PreviewPaneは、最新のWebテクノロジーに基づいて構築されており、React + Next.jsフレームワークを使用し、TailwindCSSで迅速なスタイル開発とレスポンシブレイアウトを実現し、Monaco Editorでプロフェッショナルなコード編集体験を提供します。
核心实现：コア実装：エディターはuseStateを介してコード状態を保存し、プレビューパネルはdangerouslySetInnerHTMLを使用してHTML + CSSをリアルタイムでレンダリングします。エクスポート機能はhtml-to-imageライブラリに基づいてPNG画像を生成し、file-saverライブラリがファイルダウンロードを処理します。
设计理念：設計思想：WYSIWYGの原則に従い、エクスポートされた画像がページ表示効果と完全に一致するようにします。ユーザーのJavaScriptコードは実行せず、セキュリティリスクを回避します。すべてのスタイルはインラインまたはスタイルタグにあり、エクスポートが成功するようにします。