HTML ब्यूटिफिकेशन कसे कार्य करते
ब्यूटिफायर तुमचा markup tag by tag वाचतो, प्रत्येक element किती deeply nested आहे ते track करतो, आणि consistent indentation सह पुन्हा emit करतो. page काय render करतो ते कधीच बदलत नाही — केवळ source कसे laid out आहे ते बदलते.
- टॅग पार्स करा. library तुमचे input tokens च्या stream मध्ये scan करते: opening tags, closing tags, text content, comments, आणि script आणि style blocks ची सामग्री. Quoted attribute values आणि pre आणि textarea elements चे bodies एकल units म्हणून treated होतात, त्यामुळे त्यांच्या आतील whitespace अकेला ठेवली जाते.
- Nesting track करा. token stream वर चालत असताना, ब्यूटिफायर एक running indent level ठेवतो. हर opening tag जो self-closing नाही तो level एक step खोल push करतो; हर matching closing tag ते वापस pop करतो. ती depth ठरवते की तुम्हाला परत मिळणाऱ्या प्रत्येक ओळीसमोर किती indent units असतील.
- तुमचे options लागू करा. तुमची indent निवड — 2 spaces, 4 spaces, किंवा tab — एका level ची रुंदी ठरवते. Wrap-at-column value attributes किंवा text च्या लांब ओळी तुम्ही निवडलेल्या column नंतर break करते. Blank-line cap लांब empty lines ला तुम्ही ठरवलेल्या मर्यादेपर्यंत collapse करतो.
- मार्कअप पुन्हा उत्सर्जित करा. शेवटी formatter ने ठरवलेल्या indentation आणि line breaks सह tags परत print करतो. जर तुम्ही inline formatting चालू केले असेल, तर प्रत्येक style block ची सामग्री CSS formatter मधून आणि प्रत्येक script block ची सामग्री JS formatter मधून जाते, ज्यामुळे embedded code त्याच्या आसपासच्या markup सह align होतो.
HTML ब्यूटिफाय का करावे
- Minified pages वाचा. Production HTML bytes वाचवण्यासाठी line breaks काढून ship होते. ब्यूटिफाय केल्याने structure परत येते जेणेकरून तुम्ही हवा तो section शोधू शकता, missing closing tag पाहू शकता, आणि document खरोखर कसे nested आहे ते follow करू शकता.
- असंगत templates व्यवस्थित करा. अनेक लोकांनी edit केलेला markup mixed indentation आणि tag placement मध्ये drift होतो. ब्यूटिफायर मधून एक pass संपूर्ण file ला normalize करतो, त्यामुळे पुढचा commit reformatted whitespace च्या भिंतीऐवजी तुम्ही केलेला change दाखवतो.
- हे साधन तुमचे page मंद करत नाही. बहुतेक online formatters page उघडताच त्यांची संपूर्ण library load करतात. हे साधन js-beautify केवळ तेव्हाच fetch करते जेव्हा तुम्ही Beautify click करता किंवा Live mode चालू करता, त्यामुळे पहिला load काही शेकडो ऐवजी काही kilobytes चा असतो आणि page जलद राहते.
- काहीही तुमच्या browser बाहेर जात नाही. संपूर्ण काम तुमच्या device वर होते. तुमचा markup कधीही server वर upload होत नाही, जे तेव्हा महत्त्वाचे असते जेव्हा page एखाद्या client चे असते, internal URLs असतात, किंवा तुम्ही confidentiality agreement sign केली असते.
सामान्य वापर
HTML ब्यूटिफाय करणे तेव्हा उपयुक्त असते जेव्हा कोणाला असा markup वाचावा लागतो जो वाचण्यासाठी लिहिला नव्हता.
- Live page inspect करणे: View Source मधील minified source paste करा ताकि तुम्ही locally reproduce करू शकत नाहीत त्या layout bug मागचा markup शोधता येईल.
- CMS output cleanup: page builder ने एका ओळीवर export केलेल्या template ला repository मध्ये commit करण्यापूर्वी reformat करा.
- Accessibility आणि SEO reviews: document expand करा ताकि heading order, landmark structure, आणि alt attributes real DOM विरुद्ध तपासता येतील.
एक काम केलेले उदाहरण
एक minified snippet घ्या: <div><p>hi</p><span>x</span></div>. 2 spaces indentation सह वर paste करा, नंतर Beautify click करा. तुम्हाला एक वाचनीय block मिळतो: <div> स्वत:च्या ओळीवर, <p>hi</p> आणि <span>x</span> प्रत्येक एक level indented, आणि matching </div> खाली aligned. Indentation Tabs वर switch करा आणि प्रत्येक level two spaces वरून tab वर shift होतो. एक <style>a{color:red}</style> block जोडा, "Inline CSS आणि JS देखील format करा" चालू करा, आणि rule स्वत:च्या indented ओळींवर expand होतो.
FAQ
हे माझ्या browser मध्ये चालते का?
होय. js-beautify library पहिल्यांदा Beautify click केल्यावर किंवा Live mode enable केल्यावर fetch होते, नंतर cached होते. तुमचा markup page सोडत नाही — कोणताही server round-trip नाही, कोणताही upload नाही.
ब्यूटिफाय केल्याने माझे page वेगळे render होईल का?
नाही. ब्यूटिफायर केवळ tags मधील whitespace आणि line breaks जोडतो आणि काढतो. browser page build करताना तो whitespace ignore करतो, त्यामुळे rendered result identical असतो. एकमेव गोष्ट लक्षात ठेवायची ती म्हणजे pre, textarea, किंवा inline elements मधील whitespace-sensitive content, जी formatter जाणूनबुजून untouched ठेवतो.
Inline CSS आणि JS toggle काय करतो?
बंद असताना style आणि script blocks ची सामग्री तुम्ही paste केल्याप्रमाणेच राहते. चालू केल्यावर प्रत्येक style block च्या आत CSS formatter चालतो आणि प्रत्येक script block च्या आत JS formatter, ज्यामुळे embedded code आसपासच्या markup शी match करून indented होतो.
"Wrap at column" काय करतो?
हे ती line length निर्धारित करते जिथे अनेक attributes असलेला tag, किंवा text चा लांब run, multiple lines वर break होतो. 0 ठेवा जेणेकरून प्रत्येक element एकाच ओळीवर राहेल कितीही लांब असला तरी. 80 किंवा 120 set करा आणि formatter त्या column नंतरची प्रत्येक गोष्ट wrap करतो, ज्यामुळे wide elements संकीर्ण editor मध्ये वाचनीय राहतात.
Browser-side HTML ब्यूटिफिकेशन तुम्हाला build step किंवा upload शिवाय readable markup देते. एक minified किंवा अव्यवस्थित page paste करा, तुमचे indentation आणि wrap width निवडा, inline CSS आणि JS reformat करायचे की नाही ते ठरवा, नंतर result copy किंवा download करा. काहीही तुमच्या device बाहेर जात नाही, कोणतेही account नाही, आणि library तेव्हाच load होते जेव्हा तुम्ही सांगता — त्यामुळे हे page उघडण्यास megabyte नाही, काही kilobytes लागतात.