Paano gumagana ang HTML beautification
Binabasa ng beautifier ang iyong markup nang tag-tag, sinusubaybayan kung gaano kalalim ang naka-nest ang bawat element, at inilalabas ito ulit nang may consistent na indentation. Hindi nito kailanman binabago ang nire-render ng pahina — ang hitsura ng source code lamang.
- I-parse ang mga tag. Ina-scan ng library ang iyong input sa isang stream ng mga token: mga opening tag, closing tag, text content, komento, at mga nilalaman ng script at style na bloke. Ang mga quoted na attribute value at mga katawan ng pre at textarea element ay tinatrato bilang mga solong unit, kaya ang whitespace sa loob nila ay hindi naaangkop.
- Subaybayan ang nesting. Habang inililipat ang token stream, ang beautifier ay nagpapanatili ng kasalukuyang antas ng indent. Ang bawat opening tag na hindi self-closing ay nagpapalalim ng antas ng isang hakbang; ang bawat katugmang closing tag ay nagpapababa nito. Ang lalim na iyon ang nagpapasya kung ilang indent unit ang nasa harap ng bawat linyang ibinalik.
- I-apply ang iyong mga opsyon. Ang iyong pagpili ng indent (2 espasyo, 4 na espasyo, o isang tab) ang nagtatakda ng lapad ng isang antas. Ang halaga ng wrap-at-column ay nagputol ng mga mahabang linya ng mga attribute o teksto kapag nalagpasan ang column na iyong pinili. Ang limitasyon ng blangkong linya ay kino-collapse ang mahabang pagkakasunod ng mga walang laman na linya pababa sa limitasyong pipiliin mo.
- Muling i-emit ang markup. Sa wakas, inilalabas ng formatter ang mga tag nang may indentation at line break na napaghandaan nito. Kung naka-on ang inline na pag-format, ang nilalaman ng bawat style na bloke ay dinadaan sa CSS formatter at ang bawat script na bloke ay sa JS formatter, kaya ang naka-embed na code ay naka-align sa markup sa paligid nito.
Bakit mag-beautify ng HTML
- Basahin ang mga minified na pahina. Ang HTML ng produksyon ay ipinapadala nang walang mga line break para makatipid ng byte. Ang pag-beautify ay nagbabalik ng istruktura para mahanap mo ang bahaging hinahanap mo, matukoy ang isang nawawalang closing tag, at masundan kung paano talaga naka-nest ang dokumento.
- Ayusin ang mga hindi pare-parehong template. Ang markup na na-edit ng ilang tao ay nagdadrift sa mixed na indentation at paglalagay ng tag. Ang isang pass sa beautifier ay nino-normalize ang buong file, kaya ang susunod na commit ay nagpapakita ng pagbabagong ginawa mo at hindi isang dingding ng na-reformat na whitespace.
- Hindi nagbibigay ng abala ang tool na ito sa iyong pahina. Karamihang online na formatter ay naglo-load ng buong library nang sandaling buksan mo ang pahina. Ang isa ito ay lazy-load lang ng js-beautify kapag nag-click ka ng Beautify o na-switch on ang Live mode, kaya ang pagbubukas ng pahina ay nagkakahalaga ng ilang kilobyte sa halip na ilang daan, at ang pahina ay nananatiling mabilis.
- Wala itong umaalis sa iyong browser. Lahat ay tumatakbo sa iyong device. Ang iyong markup ay hindi kailanman ini-upload sa isang server, na mahalaga kapag ang pahina ay pag-aari ng isang kliyente, naglalaman ng mga internal na URL, o nasa ilalim ng isang kasunduan sa pagkakumpidensyal na iyong pinirmahan.
Mga karaniwang gamit
Ang HTML beautification ay lumalabas sa tuwing may isang taong kailangang basahin ang markup na hindi isinulat para basahin.
- Pagsusuri ng live na pahina: i-paste ang minified na source mula sa View Source para mahanap ang markup sa likod ng isang layout bug na hindi mo mare-reproduce nang lokal.
- Paglilinis ng CMS output: i-reformat ang isang template na na-export ng isang page builder sa isang linya bago mo i-commit ito pabalik sa repository.
- Mga review ng accessibility at SEO: palawakin ang dokumento para masuri ang pagkakasunod ng heading, istraktura ng landmark, at mga alt attribute laban sa tunay na DOM.
Isang natapos na halimbawa
Kumuha ng minified na snippet: <div><p>hi</p><span>x</span></div>. I-paste ito sa itaas na ang indentation ay nakatakda sa 2 espasyo, pagkatapos ay i-click ang Beautify. Makakakuha ka ng nababasang bloke: ang <div> sa sarili nitong linya, ang <p>hi</p> at <span>x</span> na bawat isa ay naka-indent ng isang antas sa ilalim nito, at ang katugmang </div> ay nakahanay sa ibaba. I-switch ang indentation sa Mga tab at bawat antas ay lilipat mula sa dalawang espasyo patungo sa isang tab character. Magdagdag ng blokeng <style>a{color:red}</style>, i-on ang "I-format din ang inline na CSS at JS," at ang panuntunan ay lalawak sa sarili nitong mga naka-indent na linya sa halip na manatili sa isa.
FAQ
Tumatakbo ba ito sa aking browser?
Oo. Ang js-beautify library ay lazy-loaded sa unang pagkakataon na mag-click ka ng Beautify o mag-enable ng Live mode, pagkatapos ay ni-cache. Ang iyong markup ay hindi kailanman umaalis sa pahina — walang server round-trip at walang upload.
Magbabago ba ang paraan ng pag-render ng aking pahina kapag ginawang maganda?
Hindi. Ang beautifier ay nagdaragdag at nagtatanggal lamang ng whitespace at line break sa pagitan ng mga tag. Hinahayaan ng browser ang whitespace na iyon kapag binubuo ang pahina, kaya ang nire-render na resulta ay magkatulad. Ang isang bagay na dapat abalahin ay ang content na sensitibo sa whitespace sa loob ng pre, textarea, o inline na element, na sinadyang hindi naaangkop ng formatter.
Ano ang ginagawa ng toggle ng inline na CSS at JS?
Kapag naka-off ito, ang nilalaman ng mga style at script na bloke ay naiwan nang eksakto tulad ng na-paste mo ito. I-on ito at ang CSS sa loob ng bawat style na bloke ay dinadaan sa CSS formatter at ang JavaScript sa loob ng bawat script na bloke sa JS formatter, kaya ang naka-embed na code ay naka-indent para tumugma sa markup sa paligid nito.
Ano ang ginagawa ng "I-wrap sa column"?
Nagtatakda ito ng haba ng linya kung saan ang isang tag na may maraming attribute, o isang mahabang pagkakasunod ng teksto, ay nahahati sa maraming linya. Iwanang 0 para panatilihing nasa isang linya ang bawat element gaano man ito kahaba. Itakda sa 80 o 120 at ira-reformat ng formatter ang lahat ng nakarating na lampas sa column na iyon, na pinapanatiling nababasa ang malalawak na element sa isang makitid na editor.
Ang browser-side HTML beautification ay nagbibigay sa iyo ng nababasang markup nang walang build step o upload. Mag-paste ng minified o magulo na pahina, piliin ang iyong indentation at wrap width, magpasya kung ire-reformat ang inline na CSS at JS, pagkatapos ay kopyahin o i-download ang resulta. Wala itong umaalis sa iyong device, walang account, at ang library ay naglo-load lamang kapag hinilingin mo ito — kaya ang pagbubukas ng page na ito ay nagkakahalaga ng ilang kilobyte, hindi isang megabyte.