HTML फ़ॉर्मेटर व मिनिफ़ायर

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

एक HTML फ़ॉर्मेटर ऐसे मार्कअप को लेता है जिसने अपना आकार खो दिया है — किसी टेम्प्लेट इंजन का आउटपुट जिसने हर टैग को एक पंक्ति पर सिकोड़ दिया, किसी स्निपेट जो किसी और की इंडेंट शैली से चिपकाया गया, या किसी ईमेल टेम्प्लेट का टुकड़ा जो महीनों में बढ़ा — और उसे दोबारा इंडेंट करता है ताकि नेस्टिंग एक नज़र में स्पष्ट हो। उल्टा काम, संक्षिप्त करना, उसी मार्कअप को ब्राउज़र की ज़रूरत न होने वाली हर चीज़ हटाकर सिकोड़ता है: कमेंट्स और टैग्स के बीच की व्हाइटस्पेस।

यह पेज दोनों करता है, और दोनों दिशाएँ अलग तरीके से बनी हैं क्योंकि HTML इसकी माँग करता है। फ़ॉर्मेट js-beautify के html_beautify का उपयोग करता है, जो एलिमेंट्स को समान रूप से इंडेंट करता है और आपके इच्छित लाइन ब्रेक सुरक्षित रखता है। संक्षिप्त एक रूढ़िवादी, हाथ से लिखा स्कैनर है। सबसे महत्वपूर्ण नियम जो यह मानता है वह यह है कि <pre>, <code>, <textarea>, <script> और <style> एलिमेंट्स की सामग्री पूरी तरह अछूटी छोड़ दी जाती है — किसी <pre> ब्लॉक या <script> के अंदर व्हाइटस्पेस सिकोड़ना पेज भ्रष्ट कर देता, क्योंकि उन एलिमेंट्स में व्हाइटस्पेस डेटा का हिस्सा होती है, सजावट नहीं। एक साधारण मिनिफायर जो यह नहीं जानता वही कारण है जिससे कोई कोड नमूना अचानक किसी लाइव साइट पर अपनी इंडेंटेशन खो देता है।

इसका उपयोग कैसे करें#

1. अपना मार्कअप बाईं ओर HTML पैनल में चिपकाएँ, या एक छोटे उदाहरण दस्तावेज़ के लिए नमूना पर क्लिक करें।
2. टूलबार पर कोई इंडेंट चुनें: 2, 4 (HTML के लिए डिफ़ॉल्ट), या टैब। चार स्पेस मार्कअप के लिए एक आम गृह शैली है क्योंकि नेस्टेड टैग्स जल्दी जमा होते हैं।
3. कोई क्रिया चुनें:
   • फ़ॉर्मेट — js-beautify से पुनः-इंडेंट, मौजूदा न्यूलाइन्स सुरक्षित रखते हुए ताकि हाथ से तोड़ी गई पंक्तियाँ एक साथ न मिल जाएँ।
   • संक्षिप्त — HTML कमेंट्स गिराएँ, इंटर-टैग व्हाइटस्पेस को कुछ नहीं तक सिकोड़ें, और सामान्य टेक्स्ट नोड्स में व्हाइटस्पेस ट्रिम करें — जबकि <pre>, <code>, <textarea>, <script> और <style> के अंदर को बिलकुल वैसे ही छोड़ दें जैसा लिखा था।
4. परिणाम आउटपुट पैनल में पढ़ें। उसे लेने के लिए आउटपुट हेडर में कॉपी का उपयोग करें; साफ़ करें दोनों पैनलों को रीसेट करता है।

प्रमुख विशेषताएँ#

• जो मायने रखता है उसे सुरक्षित रखता है। <pre>, <code>, <textarea>, <script> और <style> कंटेंट मिनिफ़िकेशन के दौरान वैसे ही कॉपी होता है। उन एलिमेंट्स के अंदर व्हाइटस्पेस सार्थक होती है; उसे हटाने से वह बदल जाएगा जो ब्राउज़र रेंडर करता।
• संक्षिप्त पर कमेंट्स हटाए जाते, फ़ॉर्मेट पर रखे जाते। <!-- ... --> ब्लॉक्स केवल तब हटाए जाते हैं जब आप स्पष्ट रूप से संक्षिप्त करने को कहें। फ़ॉर्मेटिंग उन्हें जगह पर रखती है।
• HTML-अनुकूल डिफ़ॉल्ट इंडेंट। चार स्पेस, क्योंकि गहराई से नेस्टेड मार्कअप एक चौड़े कदम के साथ बेहतर पढ़ा जाता है। यदि वह आपकी परियोजना से मेल खाता है तो 2 या टैब पर स्विच करें।
• दो-पैनल, कॉपी-तैयार। संपादन योग्य इनपुट, केवल-पढ़ने योग्य आउटपुट, एक-क्लिक कॉपी।
• केवल आपके ब्राउज़र में चलता है। js-beautify पेज के साथ बंडल है और माँग पर लोड होता है; न कोई बैकएंड, न कोई अपलोड, आपका मार्कअप आपके डिवाइस पर रहता है।

कार्य उदाहरण#

किसी टेम्प्लेट से निकाला गया एक प्रोडक्ट कार्ड का फ़्रैगमेंट, जिसमें एक कमेंट और एक <pre> ब्लॉक अंदर है:

इनपुट:

<div class="card">
<!-- price shown gross -->
<span class="price">£12.00</span>
<pre data-lang="bash">npm install
npm run build</pre>
</div>

4 स्पेस के साथ फ़ॉर्मेट पर क्लिक करें:

<div class="card">
    <!-- price shown gross -->
    <span class="price">£12.00</span>
    <pre data-lang="bash">npm install
npm run build</pre>
</div>

अब उसी इनपुट पर संक्षिप्त पर क्लिक करें:

<div class="card"><span class="price">£12.00</span><pre data-lang="bash">npm install
npm run build</pre></div>

तीन बातें ध्यान दें। कमेंट चला गया। टैग्स के बीच की व्हाइटस्पेस चली गई — </span> और <pre> अब सीधे आसन्न हैं, जो सुरक्षित है क्योंकि HTML में इंटर-टैग व्हाइटस्पेस सजावटी होती है। पर <pre> के अंदर की न्यूलाइन (npm install के ऊपर npm run build) अभी भी वही है, बिलकुल वैसे ही जैसे लिखी थी। यही नियम अपना काम कर रहा है: सजावट सिकोड़ें, डेटा सुरक्षित रखें।

अक्सर पूछे जाने वाले प्रश्न#

संक्षिप्त के बाद कुछ एकल स्पेस टैग्स के बीच क्यों रखे जाते हैं?#

ब्लॉक-लेवल टैग्स के बीच बैठे केवल-व्हाइटस्पेस टेक्स्ट नोड्स पूरी तरह गिरा दिए जाते हैं। पर टेक्स्ट की एक पंक्ति के अंदर का एकल स्पेस — Hello <em>world</em> — महत्वपूर्ण है, क्योंकि उसे हटाने से शब्द जुड़ जाएँगे। स्कैनर सार्थक टेक्स्ट-नोड स्पेसेस रखता है और केवल व्हाइटस्पेस-इकाई वाले टेक्स्ट नोड्स हटाता है।

क्या संक्षिप्त एट्रिब्यूट्स, कोट्स, या डिफ़ॉल्ट वैल्यूज़ हटाता है?#

नहीं। यह एट्रिब्यूट सिंटैक्स दोबारा नहीं लिखता, कोट्स नहीं निकालता, बूलियन एट्रिब्यूट्स सिकोड़ता नहीं, या type="text" हटाता नहीं। उन रूपांतरणों के लिए स्कीमा ज्ञान के साथ एक पूर्ण HTML पार्सर चाहिए और उन्हें गलत करना आसान है; यह औज़ार सुरक्षित पक्ष पे रहता है और केवल कमेंट्स और सजावटी व्हाइटस्पेस हटाता है।

क्या यह मेरे <script> टैग्स के अंदर के JavaScript को संक्षिप्त करेगा?#

नहीं। <script> का पूरा कंटेंट वैसे हे गुज़रता है — क्योंकि उसे बदलने से ASI टूट सकता है और क्योंकि एक अलग JS मिनिफायर format/js पेज पर रहता है। यदि आप स्क्रिप्ट संक्षिप्त करना चाहते हैं तो उसे निकालें, उस औज़ार से चलाएँ, फिर वापस चिपकाएँ।

क्या यह {{ var }} या {% if %} जैसे टेम्प्लेटिंग सिंटैक्स समझता है?#

फ़ॉर्मेट टेम्प्लेट टोकन्स के इर्द-गिर्द पुनः-इंडेंट करेगा और आमतौर पर पठनीय आउटपुट देगा। संक्षिप्त टेम्प्लेट टैग्स को सामान्य टेक्स्ट मानता है, इसलिए वह उनके अंदर ऐसी व्हाइटस्पेस नहीं सिकोड़ता जो उनके अर्थ को बदल दे। भारी टेम्प्लेटिंग के लिए, आउटपुट को एक मज़बूत शुरुआती बिंदु मानें और अपने रेंडरर के विरुद्ध सत्यापित करें।