HTML அழகுபடுத்துதல் எவ்வாறு செயல்படுகிறது
அழகுபடுத்தி உங்கள் மார்க்அப்பை குறிச்சொல் குறிச்சொல்லாக வாசிக்கிறது, ஒவ்வொரு உறுப்பு எவ்வளவு ஆழமாக கூடு வைக்கப்பட்டுள்ளது என்று கண்காணிக்கிறது, மற்றும் சீரான உள்தள்ளலுடன் மீண்டும் வெளியிடுகிறது. பக்கம் என்ன காட்டுகிறது என்பது ஒருபோதும் மாறாது — மூல வரிசை எப்படி அமைக்கப்பட்டுள்ளது என்பது மட்டுமே மாறுகிறது.
- குறிச்சொற்களை பாகுபடுத்து. library உங்கள் உள்ளீட்டை tokens நீரோட்டமாக scan செய்கிறது: திறக்கும் குறிச்சொற்கள், மூடும் குறிச்சொற்கள், உரை உள்ளடக்கம், கருத்துரைகள், மற்றும் script மற்றும் style block-களின் உள்ளடக்கம். மேற்கோள் இட்ட attribute மதிப்புகள் மற்றும் pre மற்றும் textarea உறுப்புகளின் உடல்கள் ஒற்றை அலகுகளாக கையாளப்படுகின்றன, எனவே அவற்றுக்குள் உள்ள வெற்று இடம் தொடப்படாமல் விடப்படுகிறது.
- கூடு வைக்கலை கண்காணி. token நீரோட்டத்தில் நடக்கும்போது, அழகுபடுத்தி ஒரு நடப்பு உள்தள்ளல் நிலையை வைத்திருக்கிறது. சுய-மூடல் அல்லாத ஒவ்வொரு திறக்கும் குறிச்சொல் நிலையை ஒரு அடி ஆழமாக்குகிறது; ஒவ்வொரு பொருந்தும் மூடும் குறிச்சொல் அதை மீண்டும் pop செய்கிறது. அந்த ஆழம் திரும்பப் பெறும் ஒவ்வொரு வரியின் முன்னால் எத்தனை உள்தள்ளல் அலகுகள் இருக்கும் என்று தீர்மானிக்கிறது.
- உங்கள் விருப்பங்களை பயன்படுத்துங்கள். உங்கள் உள்தள்ளல் தேர்வு — 2 இடைவெளிகள், 4 இடைவெளிகள், அல்லது tab — ஒரு நிலையின் அகலத்தை அமைக்கிறது. வரி-சுற்று நெடுவரிசை மதிப்பு attributes அல்லது நீண்ட உரை வரிகளை நீங்கள் தேர்ந்தெடுக்கும் நெடுவரிசைக்கு பிறகு உடைக்கிறது. வெற்று வரி வரம்பு நீண்ட காலி வரிகளை நீங்கள் நிர்ணயித்த அளவுக்கு சுருக்குகிறது.
- மார்க்அப்பை மீண்டும் வெளியிடு. இறுதியில் formatter நிர்ணயிக்கப்பட்ட உள்தள்ளல் மற்றும் வரி முறிவுகளுடன் குறிச்சொற்களை மீண்டும் print செய்கிறது. நீங்கள் ஊடுருவிய வடிவமைப்பை இயக்கினால், ஒவ்வொரு style block-ன் உள்ளடக்கம் CSS formatter-ல் இருந்தும் ஒவ்வொரு script block-ன் உள்ளடக்கம் JS formatter-ல் இருந்தும் செல்கிறது, எனவே உட்பொதிக்கப்பட்ட கோட் சுற்றிலுள்ள மார்க்அப்பினுடன் சேர்ந்து வரிசையில் இருக்கும்.
HTML-ஐ ஏன் அழகுபடுத்த வேண்டும்
- மினிஃபை செய்யப்பட்ட பக்கங்களை வாசிக்கவும். Production HTML bytes சேமிக்க வரி முறிவுகள் நீக்கப்பட்டு அனுப்பப்படுகிறது. அழகுபடுத்துதல் கட்டமைப்பை திரும்பக் கொண்டுவருகிறது, தேவைப்படும் பகுதியை கண்டுபிடிக்கலாம், மறந்துபோன மூடும் குறிச்சொல்லை காணலாம், மற்றும் ஆவணம் உண்மையில் எவ்வாறு கூடு வைக்கப்பட்டுள்ளது என்று புரிந்துகொள்ளலாம்.
- சீரற்ற வார்ப்புருக்களை ஒழுங்குபடுத்தவும். பலர் திருத்திய மார்க்அப் கலந்த உள்தள்ளல் மற்றும் குறிச்சொல் வைப்பிடத்திற்கு நகர்கிறது. அழகுபடுத்தி வழியாக ஒரு pass முழு கோப்பையும் normalize செய்கிறது, அதனால் அடுத்த commit திருத்தப்பட்ட வெற்று இட சுவருக்குப் பதிலாக நீங்கள் செய்த மாற்றத்தை காண்பிக்கும்.
- இந்தக் கருவி உங்கள் பக்கத்தை மெதுவாக்காது. பெரும்பாலான ஆன்லைன் formatters பக்கம் திறக்கும்போதே முழு library-ஐ load செய்கின்றன. இந்தக் கருவி js-beautify-ஐ நீங்கள் Beautify கிளிக் செய்யும்போது அல்லது நேரடி பயன்முறை ஆன் செய்யும்போது மட்டுமே fetch செய்கிறது, எனவே முதல் load சில நூறு kilobytes-க்கு பதிலாக சில kilobytes மட்டுமே ஆகும்.
- எதுவும் உங்கள் உலாவியை விட்டு வெளியே செல்வதில்லை. முழு செயல்முறையும் உங்கள் சாதனத்தில் நடக்கிறது. உங்கள் மார்க்அப் எப்போதும் server-க்கு பதிவேற்றம் ஆவதில்லை, இது முக்கியமானது குறிப்பாக பக்கம் ஒரு client-க்கு சொந்தமானதாக இருந்தால், உள்ளக URL-கள் இருந்தால், அல்லது நீங்கள் இரகசியத்தன்மை ஒப்பந்தத்தில் கையெழுத்திட்டிருந்தால்.
பொதுவான பயன்பாடுகள்
HTML-ஐ அழகுபடுத்துவது தேவைப்படுவது யாரேனும் படிக்கும் நோக்கத்திற்காக எழுதப்படாத மார்க்அப்பை படிக்க வேண்டியிருக்கும்போது.
- நேரலை பக்கம் ஆய்வு: View Source-ல் இருந்து மினிஃபை செய்யப்பட்ட மூல்த்தை ஒட்டி, உள்ளூரில் மீண்டும் உருவாக்க முடியாத தளவமைப்பு பிழைக்கு பின்னிருக்கும் மார்க்அப்பை கண்டுபிடியுங்கள்.
- CMS வெளியீட்டை சுத்தப்படுத்தல்: page builder ஒரு வரியில் ஏற்றுமதி செய்த வார்ப்புருவை repository-ல் commit செய்வதற்கு முன்பு மீண்டும் வடிவமைக்கவும்.
- அணுகல்தன்மை மற்றும் SEO மதிப்பாய்வுகள்: தலைப்பு வரிசை, landmark கட்டமைப்பு மற்றும் alt attributes-ஐ உண்மையான DOM-உடன் சரிபார்க்க ஆவணத்தை விரிவுபடுத்துங்கள்.
ஒரு விளக்க உதாரணம்
ஒரு மினிஃபை செய்யப்பட்ட snippet எடுங்கள்: <div><p>hi</p><span>x</span></div>. 2 இடைவெளிகள் உள்தள்ளலுடன் மேலே ஒட்டி Beautify கிளிக் செய்யுங்கள். படிக்கக்கூடிய block திரும்பிவருகிறது: <div> சொந்த வரியில், <p>hi</p> மற்றும் <span>x</span> ஒவ்வொன்றும் ஒரு நிலை உள்தள்ளப்பட்டு, மற்றும் பொருந்தும் </div> கீழே வரிசையில். Indentation-ஐ Tabs-க்கு மாற்றினால் ஒவ்வொரு நிலையும் இரண்டு இடைவெளிகளில் இருந்து tab-க்கு மாறுகிறது. ஒரு <style>a{color:red}</style> block சேர்த்து, "ஊடுருவிய CSS மற்றும் JS-ஐயும் வடிவமைக்கவும்" ஆன் செய்யுங்கள், விதி தனது உள்தள்ளப்பட்ட வரிகளில் விரிகிறது.
FAQ
இது என் உலாவியில் இயங்குகிறதா?
ஆம். js-beautify library முதல் முறை Beautify கிளிக் செய்யும்போது அல்லது நேரடி பயன்முறை enable செய்யும்போது fetch ஆகிறது, பின்னர் cache ஆகிறது. உங்கள் மார்க்அப் பக்கத்தை விட்டு வெளியே செல்வதே இல்லை — server round-trip இல்லை, பதிவேற்றம் இல்லை.
அழகுபடுத்துவது என் பக்கம் வேறுவிதமாக காட்டுமா?
இல்லை. அழகுபடுத்தி குறிச்சொற்களுக்கு இடையே வெற்று இடங்கள் மற்றும் வரி முறிவுகளை மட்டும் சேர்க்கிறது அல்லது நீக்குகிறது. உலாவி பக்கம் உருவாக்கும்போது அந்த வெற்று இடத்தை புறக்கணிக்கிறது, எனவே காட்டப்பட்ட முடிவு ஒரே மாதிரி இருக்கும். ஒரே ஒரு கவனிக்க வேண்டிய விஷயம் pre, textarea, அல்லது ஊடுருவிய உறுப்புகளுக்குள் உள்ள வெற்று இட-உணர்திறன் உள்ளடக்கம், அதை formatter வேண்டுமென்றே தொடாமல் விடுகிறது.
ஊடுருவிய CSS மற்றும் JS toggle என்ன செய்கிறது?
ஆஃப்-ல் இருக்கும்போது style மற்றும் script block-களின் உள்ளடக்கம் நீங்கள் ஒட்டியதை போலவே இருக்கும். ஆன் செய்தால் ஒவ்வொரு style block-க்குள் CSS formatter இயங்குகிறது மற்றும் ஒவ்வொரு script block-க்குள் JS formatter, எனவே உட்பொதிக்கப்பட்ட கோட் சுற்றிலுள்ள மார்க்அப்பினுடன் பொருந்தி உள்தள்ளப்படுகிறது.
"நெடுவரிசையில் சுற்று" என்ன செய்கிறது?
இது பல attributes கொண்ட ஒரு குறிச்சொல், அல்லது நீண்ட உரை ஓட்டம், பல வரிகளாக உடைக்கப்படும் வரி நீளத்தை அமைக்கிறது. எவ்வளவு நீளமாக இருந்தாலும் ஒவ்வொரு உறுப்பையும் ஒரே வரியில் வைக்க 0 விடவும். 80 அல்லது 120 அமைத்தால் formatter அந்த நெடுவரிசையை கடந்த எதையும் சுற்றும், இது குறுகிய editor-ல் விரிந்த உறுப்புகளை படிக்கக்கூடியதாக வைக்கிறது.
Browser-side HTML அழகுபடுத்துதல் build step அல்லது பதிவேற்றம் இல்லாமல் படிக்கக்கூடிய மார்க்அப்பை வழங்குகிறது. மினிஃபை செய்யப்பட்ட அல்லது ஒழுங்கற்ற பக்கத்தை ஒட்டுங்கள், உள்தள்ளல் மற்றும் வரி அகலம் தேர்ந்தெடுங்கள், ஊடுருவிய CSS மற்றும் JS-ஐ மீண்டும் வடிவமைக்கலாமா என்று முடிவு செய்யுங்கள், பின்னர் முடிவை நகலெடுங்கள் அல்லது பதிவிறக்குங்கள். எதுவும் உங்கள் சாதனத்தை விட்டு வெளியேறுவதில்லை, கணக்கு தேவையில்லை, library நீங்கள் கேட்கும்போது மட்டுமே load ஆகிறது — எனவே இந்தப் பக்கம் திறப்பதால் megabyte அல்ல, சில kilobytes மட்டுமே செலவாகும்.