HTML फ़ॉर्मेटर

Prettier से HTML ब्यूटिफ़ाई करें: एक-सा इंडेंटेशन, हर पंक्ति में एक एलिमेंट, और एम्बेडेड CSS व JavaScript भी फ़ॉर्मेट। 2, 4 स्पेस या टैब चुनें।

इंडेंटेशन

HTML इनपुट

आउटपुट

पूरी तरह आपके ब्राउज़र में चलता है। आपका डेटा कभी अपलोड नहीं होता।

HTML फ़ॉर्मेटर क्या है?

HTML फ़ॉर्मेटर Prettier से HTML को साफ़, एक-से इंडेंटेशन के साथ दोबारा लिखता है, जिसे ज़्यादातर फ्रंट-एंड प्रोजेक्ट इस्तेमाल करते हैं। इनलाइन <style> और <script> ब्लॉक भी CSS और JavaScript की तरह फ़ॉर्मेट होते हैं।

HTML फ़ॉर्मेटर का उपयोग कैसे करें

अपना HTML इनपुट बॉक्स में पेस्ट करें या उदाहरण लोड करें पर क्लिक करें।
इंडेंटेशन चुनें।
फ़ॉर्मेट करें पर क्लिक करें (टाइप करते समय आउटपुट अपने आप भी अपडेट होता है)।
परिणाम कॉपी या डाउनलोड करें।

उदाहरण

इनपुट

<div><p>Hi<b>x</b></p><img src=a.png alt=""></div>

आउटपुट

<div>
  <p>Hi<b>x</b></p>
  <img src="a.png" alt="" />
</div>

HTML फ़ॉर्मेटर का उपयोग कब करें

CMS एक्सपोर्ट, ईमेल टेम्पलेट या जनरेट किए मार्कअप को संपादित या रिव्यू करने से पहले साफ़ करने के लिए इसका उपयोग करें। यह फ़ॉर्मेटर है, वैलिडेटर नहीं: बंद न किए टैग या दोहराए id के लिए HTML Validator का उपयोग करें। बहुत बड़े दस्तावेज़ों में कुछ समय लग सकता है क्योंकि Prettier आपके ब्राउज़र में चलता है।

HTML फ़ॉर्मेटर कैसे काम करता है

कोड को Prettier 3 (स्टैंडअलोन बिल्ड) और उसके HTML, CSS व Babel प्लगइन से फ़ॉर्मेट किया जाता है, जो ज़रूरत पर लोड होते हैं। Prettier मार्कअप को ट्री में पार्स करता है, फिर उसे इस तरह छापता है कि पंक्तियाँ 80 कॉलम में समाएँ, एट्रिब्यूट कोट्स में हों और void एलिमेंट में /> जुड़े। व्हाइटस्पेस-संवेदी इनलाइन एलिमेंट साथ रखे जाते हैं ताकि रेंडर होने वाला पेज न बदले। सिंटैक्स त्रुटियाँ Prettier की पंक्ति और कॉलम के साथ बताई जाती हैं।