HTML బ్యూటిఫికేషన్ ఎలా పని చేస్తుంది
బ్యూటిఫైయర్ మీ మార్కప్ను ట్యాగ్ బై ట్యాగ్ చదువుతుంది, ప్రతి మూలకం ఎంత లోతుగా నెస్ట్ అయిందో ట్రాక్ చేస్తుంది, మరియు సమాన ఇండెంటేషన్తో తిరిగి ఎమిట్ చేస్తుంది. పేజ్ ఏమి రెండర్ చేస్తుందో అది మారదు — కేవలం సోర్స్ ఎలా అమర్చబడిందో మారుతుంది.
- ట్యాగ్లు పార్స్ చేయండి. లైబ్రరీ మీ ఇన్పుట్ను టోకెన్ల స్ట్రీమ్గా స్కాన్ చేస్తుంది: ఓపెనింగ్ ట్యాగ్లు, క్లోజింగ్ ట్యాగ్లు, టెక్స్ట్ కన్టెంట్, కమెంట్లు, మరియు స్క్రిప్ట్ ఆండ్ స్టైల్ బ్లాక్ల విషయాలు. కోటెడ్ అట్రిబ్యూట్ విలువలు మరియు pre మరియు textarea మూలకాల బాడీలు ఒకే యూనిట్లుగా పరిగణించబడతాయి, కాబట్టి వాటి లోపలి హోయిట్స్పేస్ అంటుకుని ఉంటుంది.
- నెస్టింగ్ ట్రాక్ చేయండి. టోకెన్ స్ట్రీమ్లో నడుస్తూ బ్యూటిఫైయర్ నడుస్తున్న ఇండెంట్ లెవెల్ నిర్వహిస్తుంది. ప్రతి సెల్ఫ్-క్లోజింగ్ కాని ఓపెనింగ్ ట్యాగ్ లెవెల్ ఒక అడుగు లోతు చేస్తుంది; ప్రతి మ్యాచింగ్ క్లోజింగ్ ట్యాగ్ దాన్ని తిరిగి పాప్ చేస్తుంది. ఆ లోతు మీకు తిరిగి వచ్చే ప్రతి లైన్ ముందు ఎన్ని ఇండెంట్ యూనిట్లు ఉండాలో నిర్ణయిస్తుంది.
- మీ ఎంపికలు వర్తింపజేయండి. మీ ఇండెంట్ ఎంపిక — 2 స్పేస్లు, 4 స్పేస్లు, లేదా ట్యాబ్ — ఒక లెవెల్ వెడల్పు నిర్ణయిస్తుంది. వ్రాప్-అట్-కాలమ్ విలువ అట్రిబ్యూట్ల లేదా టెక్స్ట్ యొక్క పొడవైన లైన్లను మీరు ఎంచుకున్న కాలమ్ తర్వాత విరుస్తుంది. బ్లాంక్-లైన్ క్యాప్ పొడవైన ఖాళీ లైన్లను మీరు నిర్దేశించిన పరిమితికి సంకుచిస్తుంది.
- మార్కప్ పునర్నిర్గమనం. చివరగా ఫార్మాటర్ నిర్ణయించిన ఇండెంటేషన్ మరియు లైన్ బ్రేక్లతో ట్యాగ్లను తిరిగి ప్రింట్ చేస్తుంది. మీరు ఇన్లైన్ ఫార్మాటింగ్ చేత చేస్తే, ప్రతి స్టైల్ బ్లాక్ యొక్క విషయాలు CSS ఫార్మాటర్ ద్వారా మరియు ప్రతి స్క్రిప్ట్ బ్లాక్ JS ఫార్మాటర్ ద్వారా వెళ్తాయి, కాబట్టి ఎంబెడెడ్ కోడ్ చుట్టూ ఉన్న మార్కప్తో సరిగా వరుసలో ఉంటుంది.
HTML బ్యూటిఫై ఎందుకు చేయాలి
- మినిఫైడ్ పేజ్లు చదవండి. ప్రొడక్షన్ HTML బైట్లు ఆదా చేయడానికి లైన్ బ్రేక్లు లేకుండా శిప్ అవుతుంది. బ్యూటిఫై చేయడం కాఠామో తిరిగి తెస్తుంది, తద్వారా మీరు కావలసిన సెక్షన్ కనుగొనవచ్చు, మిస్సింగ్ క్లోజింగ్ ట్యాగ్ గుర్తించవచ్చు, మరియు డాక్యుమెంట్ నిజంగా ఎలా నెస్ట్ అయిందో అర్థం చేసుకోవచ్చు.
- అసంగత టెంప్లేట్లు శుభ్రపరచండి. అనేకులు సవరించిన మార్కప్ మిశ్రమ ఇండెంటేషన్ మరియు ట్యాగ్ అమరికకు మారుతుంది. బ్యూటిఫైయర్ ద్వారా ఒక పాస్ మొత్తం ఫైల్ను నార్మలైజ్ చేస్తుంది, తద్వారా తదుపరి కమిట్ రీఫార్మాటెడ్ హోయిట్స్పేస్ గోడ కాకుండా మీరు చేసిన మార్పు చూపిస్తుంది.
- ఇది మీ పేజ్ను నెమ్మదిగా చేయదు. చాలా ఆన్లైన్ ఫార్మాటర్లు పేజ్ తెరవగానే తమ పూర్తి లైబ్రరీ లోడ్ చేస్తాయి. ఈ టూల్ js-beautify ని కేవలం మీరు Beautify క్లిక్ చేసినప్పుడు లేదా లైవ్ మోడ్ ఆన్ చేసినప్పుడు మాత్రమే ఫెచ్ చేస్తుంది, కాబట్టి మొదటి లోడ్ కొన్ని వందల కిలోబైట్ల బదులు కొన్ని కిలోబైట్లు మాత్రమే అవుతాయి.
- ఏమీ మీ బ్రౌజర్ వదలిపోదు. సంపూర్ణ పని మీ డివైస్లో జరుగుతుంది. మీ మార్కప్ ఎప్పుడూ సర్వర్కి అప్లోడ్ కాదు, ఇది ముఖ్యమైనది ఎప్పుడంటే పేజ్ క్లయింట్కి చెందినది అయినప్పుడు, అంతర్గత URLలు ఉన్నప్పుడు, లేదా మీరు గోప్యతా ఒప్పందంపై సంతకం చేసినప్పుడు.
సాధారణ అనువర్తనాలు
HTML బ్యూటిఫై చేయడం అవసరమైనది ఎవరైనా చదవడానికి రాయని మార్కప్ చదవాల్సి వచ్చినప్పుడు.
- లైవ్ పేజ్ పరిశీలన: View Source నుండి మినిఫైడ్ సోర్స్ పేస్ట్ చేయండి, స్థానికంగా పునరుత్పత్తి చేయలేకపోయిన లేఔట్ బగ్ వెనుక మార్కప్ కనుగొనడానికి.
- CMS అవుట్పుట్ శుభ్రపరచడం: పేజ్ బిల్డర్ ఒక లైన్లో ఎగుమతి చేసిన టెంప్లేట్ను రిపోజిటరీకి కమిట్ చేయడానికి ముందు రీఫార్మాట్ చేయండి.
- అందుబాటు మరియు SEO సమీక్షలు: హెడింగ్ ఆర్డర్, ల్యాండ్మార్క్ స్ట్రక్చర్ మరియు alt అట్రిబ్యూట్లను అసలు DOM తో పోల్చి తనిఖీ చేయడానికి డాక్యుమెంట్ విస్తరించండి.
ఒక పని చేసిన ఉదాహరణ
ఒక మినిఫైడ్ స్నిప్పెట్ తీసుకోండి: <div><p>hi</p><span>x</span></div>. 2 స్పేస్ల ఇండెంటేషన్తో పైన పేస్ట్ చేసి Beautify క్లిక్ చేయండి. మీకు పఠనీయమైన బ్లాక్ వస్తుంది: <div> స్వంత లైన్లో, <p>hi</p> మరియు <span>x</span> ప్రతి ఒక్కటి ఒక లెవెల్ ఇండెంటెడ్, మరియు మ్యాచింగ్ </div> కింద సారిబద్ధంగా. ఇండెంటేషన్ Tabs కి మారిస్తే ప్రతి లెవెల్ రెండు స్పేస్ల నుండి ట్యాబ్కి మారుతుంది. ఒక <style>a{color:red}</style> బ్లాక్ జోడించి, "ఇన్లైన్ CSS మరియు JS కూడా ఫార్మాట్ చేయండి" ఆన్ చేయండి, రూల్ దాని స్వంత ఇండెంటెడ్ లైన్లలో విస్తరిస్తుంది.
FAQ
ఇది నా బ్రౌజర్లో నడుస్తుందా?
అవును. js-beautify లైబ్రరీ మొదటిసారి Beautify క్లిక్ చేసినప్పుడు లేదా లైవ్ మోడ్ ఎనేబుల్ చేసినప్పుడు ఫెచ్ అవుతుంది, తర్వాత క్యాచ్ అవుతుంది. మీ మార్కప్ పేజ్ వదలిపోదు — సర్వర్ రౌండ్-ట్రిప్ లేదు, అప్లోడ్ లేదు.
బ్యూటిఫై చేయడం నా పేజ్ వేరేగా రెండర్ అవుతుందా?
కాదు. బ్యూటిఫైయర్ కేవలం ట్యాగ్ల మధ్య హోయిట్స్పేస్ మరియు లైన్ బ్రేక్లు జోడిస్తుంది మరియు తొలగిస్తుంది. బ్రౌజర్ పేజ్ నిర్మించేటప్పుడు ఆ హోయిట్స్పేస్ను విస్మరిస్తుంది, కాబట్టి రెండర్ అయిన ఫలితం అభేదంగా ఉంటుంది. మనస్సులో పెట్టుకోవాల్సిన ఒక్క విషయం ఏమిటంటే pre, textarea, లేదా ఇన్లైన్ మూలకాల లోపల హోయిట్స్పేస్-సంవేదనశీల కన్టెంట్, దాన్ని ఫార్మాటర్ ఉద్దేశపూర్వకంగా అంటుకుని ఉంచుతుంది.
ఇన్లైన్ CSS మరియు JS టగిల్ ఏమి చేస్తుంది?
ఆఫ్ ఉన్నప్పుడు స్టైల్ మరియు స్క్రిప్ట్ బ్లాక్ల విషయాలు మీరు పేస్ట్ చేసినట్లే ఉంటాయి. ఆన్ చేస్తే ప్రతి స్టైల్ బ్లాక్ లోపల CSS ఫార్మాటర్ మరియు ప్రతి స్క్రిప్ట్ బ్లాక్ లోపల JS ఫార్మాటర్ నడుస్తుంది, తద్వారా ఎంబెడెడ్ కోడ్ చుట్టూ ఉన్న మార్కప్తో మ్యాచ్ అయి ఇండెంట్ అవుతుంది.
"వ్రాప్ అట్ కాలమ్" ఏమి చేస్తుంది?
ఇది చాలా అట్రిబ్యూట్లు ఉన్న ట్యాగ్, లేదా పొడవైన టెక్స్ట్ రన్, అనేక లైన్లుగా విరిగే లైన్ పొడవు నిర్ణయిస్తుంది. ప్రతి మూలకాన్ని ఎంత పొడవైనా ఒక్క లైన్లో ఉంచడానికి 0 ఉంచండి. 80 లేదా 120 సెట్ చేస్తే ఫార్మాటర్ ఆ కాలమ్ దాటిన అన్నింటినీ వ్రాప్ చేస్తుంది, ఇది సంకుచిత ఎడిటర్లో విస్తృత మూలకాలు పఠనీయంగా ఉంచుతుంది.
బ్రౌజర్-సైడ్ HTML బ్యూటిఫికేషన్ బిల్డ్ స్టెప్ లేదా అప్లోడ్ లేకుండా పఠనీయమైన మార్కప్ ఇస్తుంది. మినిఫైడ్ లేదా అస్తవ్యస్తమైన పేజ్ పేస్ట్ చేయండి, మీ ఇండెంటేషన్ మరియు వ్రాప్ వెడల్పు ఎంచుకోండి, ఇన్లైన్ CSS మరియు JS రీఫార్మాట్ చేయాలా అని నిర్ణయించుకోండి, తర్వాత ఫలితాన్ని కాపీ లేదా డౌన్లోడ్ చేయండి. ఏమీ మీ డివైస్ వదలిపోదు, ఖాతా లేదు, మరియు లైబ్రరీ మీరు అడిగినప్పుడు మాత్రమే లోడ్ అవుతుంది — కాబట్టి ఈ పేజ్ తెరవడం మెగాబైట్ కాదు, కొన్ని కిలోబైట్లు మాత్రమే ఖర్చు అవుతుంది.