HTML Formatter और Beautifier
HTML पेस्ट करें और साफ़, एक जैसे indentation वाला markup पाने के लिए फ़ॉर्मेट करें दबाएं, या उसे छोटा करने के लिए Minify करें। नीचे का उदाहरण एक ऑर्डर ईमेल है जिसे पांच लंबी लाइनों में ठूंस दिया गया है।
इनपुट (908 बाइट)
HTML कैसे फ़ॉर्मेट करें
- अपना HTML इनपुट एडिटर में पेस्ट करें (या क्या होता है यह देखने के लिए उदाहरण ही रहने दें)।
- वह indentation चुनें जो आपका प्रोजेक्ट इस्तेमाल करता है, और यह कि लंबी लाइनें कहां टूटें।
- फ़ॉर्मेट करें दबाएं। आउटपुट पैनल से नतीजा कॉपी या डाउनलोड करें।
उदाहरण
- ठूंसा हुआ ईमेल टेम्पलेट। ईमेल बिल्डर अक्सर markup को गिनी-चुनी बहुत लंबी लाइनों में export करते हैं। ऊपर के उदाहरण में फ़ॉर्मेट करें बटन पांच लाइनों में भरे लगभग 730 कैरेक्टर को ऐसे indented document में बदल देता है जिसमें टेबल की पंक्तियां, बटन और स्क्रिप्ट आसानी से मिल जाते हैं।
- ब्राउज़र से कॉपी किया गया markup। dev tools या View Source से लिया गया कोड अपना पुराना, अक्सर बेतरतीब indentation साथ रखता है। 2 स्पेस के साथ एक बार फ़ॉर्मेट करने से आपके वर्ज़न के साथ diff पढ़ने लायक हो जाता है।
- Static पेज ship करना। लैंडिंग पेज अपलोड करने से पहले, या HTML को लंबाई की लिमिट वाले किसी CMS फ़ील्ड में पेस्ट करने से पहले, Minify comments और whitespace हटा देता है। हर पैनल के ऊपर बाइट की गिनती दिखाती है कि आपने कितना बचाया।
HTML formatter से जुड़े सवाल
क्या मेरा कोड किसी सर्वर पर भेजा जाता है?
नहीं। फ़ॉर्मेटिंग आपके ब्राउज़र में open source js-beautify लाइब्रेरी से होती है, और minify इस पेज के एक छोटे फ़ंक्शन से। कुछ भी अपलोड या स्टोर नहीं होता।
क्या यह HTML के अंदर के CSS और JavaScript को भी फ़ॉर्मेट करता है?
हां। <style> और <script> टैग के अंदर का कोड उसी लाइब्रेरी के CSS और JavaScript beautifier से indent होता है। Inline style attributes जैसे हैं वैसे ही रहते हैं।
क्या फ़ॉर्मेटिंग से मेरा पेज टूट सकता है?
यह सिर्फ़ टैग के बीच का और <style> व <script> के अंदर का whitespace बदलता है। <pre> और <textarea> का कंटेंट कभी नहीं छुआ जाता। दो <span> टैग जैसे inline elements के बीच का whitespace मायने रख सकता है, और फ़ॉर्मेटर उन्हें एक ही लाइन पर रखता है।
Minify क्या हटाता है?
Comments, line breaks, दोहराए गए स्पेस, और block टैग के बीच का whitespace। यह किसी चीज़ का नाम नहीं बदलता, optional टैग नहीं हटाता और आपके CSS और JavaScript को दोबारा नहीं लिखता, इसलिए पेज बिल्कुल पहले जैसा रेंडर होता है।
HTML formatter और HTML beautifier में क्या फ़र्क है?
असल में कोई नहीं। दोनों नाम markup को दोबारा indent करने के लिए हैं, ताकि हर nested element सही गहराई पर अपनी अलग लाइन में आए। यह पेज यही करता है, और एक क्लिक में इसका उल्टा (minify) भी।