PreviewPane के बारे में
हम डेवलपर्स को सर्वश्रेष्ठ कोड पूर्वावलोकन और साझाकरण उपकरण प्रदान करने के लिए प्रतिबद्ध हैं
कोड डिस्प्ले को सुरुचिपूर्ण बनाएं, ज्ञान साझाकरण को सरल बनाएं
उत्पाद मिशन
PreviewPane एक वेब-आधारित कोड संपादन और इमेज निर्यात टूल है, जिसे विशेष रूप से फ्रंट-एंड डेवलपर्स, डिजाइनरों और शैक्षिक परिदृश्यों के लिए डिज़ाइन किया गया है। हमारा लक्ष्य उपयोगकर्ताओं को ब्राउज़र में HTML + CSS कोड को आसानी से संपादित करने, वास्तविक समय में चलने वाले प्रभावों का पूर्वावलोकन करने और अंततः उन्हें उच्च-गुणवत्ता वाली इमेज फ़ाइलों के रूप में निर्यात करने में सक्षम बनाना है।
मुख्य विशेषताएँ
डेवलपर्स की वास्तविक ज़रूरतों को पूरा करने के लिए आवश्यकताओं के दस्तावेज़ों के आधार पर डिज़ाइन किए गए पेशेवर कार्य
एडिटर पैनल
सिंटैक्स हाइलाइटिंग के साथ HTML + CSS कोड संपादन का समर्थन करता है, मोनोस्पेस्ड फ़ॉन्ट का उपयोग करता है, डिफ़ॉल्ट नमूना कोड प्रदान करता है
पूर्वावलोकन पैनल
HTML + CSS का वास्तविक समय रेंडरिंग, WYSIWYG, पृष्ठ के प्रदर्शन प्रभाव निर्यात की गई छवियों के साथ पूरी तरह से सुसंगत हैं, JavaScript नहीं चलाता
कोड छवियां निर्यात करें
एडिटर पैनल में कोड को छवियों में रेंडर करता है, जिससे मूल एडिटर शैलियों (पृष्ठभूमि, फोंट, बॉर्डर, गोल कोने) को बनाए रखा जाता है
चल रहे प्रभाव निर्यात करें
पूर्वावलोकन पैनल में रेंडर किए गए प्रभावों को PNG के रूप में निर्यात करता है, यह सुनिश्चित करता है कि छवियां पृष्ठ के प्रभावों से पूरी तरह मेल खाती हैं
कई निर्यात शैलियाँ
चार अलग-अलग निर्यात शैली थीम का समर्थन करता है: डिफ़ॉल्ट, कार्ड, macOS शैली और टर्मिनल शैली
रिस्पॉन्सिव डिज़ाइन
मोबाइल के लिए ऊपर-से-नीचे लेआउट, डेस्कटॉप के लिए बाएं-से-दाएं लेआउट, टेलविंडसीएसएस के साथ बनाया गया रिस्पॉन्सिव डिज़ाइन
तकनीकी वास्तुकला
前端技术栈：फ्रंट-एंड टेक्नोलॉजी स्टैक: PreviewPane आधुनिक वेब तकनीकों पर बनाया गया है, जिसमें React + Next.js फ्रेमवर्क का उपयोग किया गया है, TailwindCSS का उपयोग तेज शैली विकास और रिस्पॉन्सिव लेआउट के लिए किया गया है, Monaco Editor एक पेशेवर कोड संपादन अनुभव प्रदान करता है।
核心实现：मुख्य कार्यान्वयन: एडिटर useState के माध्यम से कोड स्थिति को बचाता है, पूर्वावलोकन पैनल HTML + CSS के वास्तविक समय रेंडरिंग के लिए dangerouslySetInnerHTML का उपयोग करता है, html-to-image लाइब्रेरी पर आधारित निर्यात फ़ंक्शन PNG छवियों को उत्पन्न करता है, और file-saver लाइब्रेरी फ़ाइल डाउनलोड को संभालती है।
设计理念：डिज़ाइन दर्शन: WYSIWYG सिद्धांत का पालन करता है, यह सुनिश्चित करता है कि निर्यात की गई छवियां पृष्ठ के प्रदर्शन प्रभावों से पूरी तरह मेल खाती हैं। सुरक्षा जोखिमों से बचने के लिए उपयोगकर्ता के JavaScript कोड को नहीं चलाता। सफल निर्यात सुनिश्चित करने के लिए सभी शैलियाँ इनलाइन या शैली टैग में होती हैं।