Lumaktaw sa pangunahing nilalaman
LibraTool logoLibraTool

Libreng HTML Beautifier at Minifier

Mag-pretty-print o mag-minify ng HTML na may wastong nesting indentation. Pinapanatili ang nilalaman sa loob ng mga <pre>, <script>, <style> block.

Gumagana offline kapag na-load na

I-drop ang file dito, o mag-click para mag-browse

HTML, HTM Β· pinoproseso sa iyong device

o pindutin ang Ctrl+V para i-paste mula sa clipboard

I-browse ang mga file
Pinagandang HTML
Lalabas ang output dito…

Mga karaniwang gamit

  • I-debug ang Server-Rendered HTMLTingnan ang raw HTML output mula sa iyong server (PHP, Rails, Django, Node) sa readable indented format.
  • I-format ang Email HTML TemplateAng email HTML ay verbose (table, inline style). I-format upang gawing editable at maintainable.
  • I-format ang Static HTML PageAng manually-edited static HTML file ay nakikinabang mula sa consistent formatting para sa collaborative editing.
  • Linisin ang CMS-Exported HTMLAng WordPress, Wix, Squarespace export HTML na may maraming artifact. I-format upang gawing editable.
  • I-minify ang HTML para sa ProductionBawasan ang HTML file size para sa mas mabilis na page load sa pamamagitan ng pag-strip ng whitespace at hindi kinakailangang character.

Paano ito Gumagana

Fino-format o kino-compress ng tool na ito ang HTML gamit ang hand-written na tag-aware na tokenizer na nakapaloob mismo sa pahina β€” walang third-party na formatting library, walang server round-trip. Pinoproseso nang lokal sa browser ang bawat character ng markup mo sa sandaling i-type o i-paste mo ito.

  1. 1
    Sinusuri ng tokenizer ang markup
    Dinadaanan ng isang custom na character-by-character na scanner ang HTML string, tinutukoy ang mga komento, DOCTYPE declaration, opening tag, closing tag, self-closing na void element (br, img, input, atbp.), at raw na text node. Sinusubaybayan ng isang nakalaang helper ang mga quoted na attribute value kaya hindi kailanman napapaaga ang paghati ng tag dahil sa mga character gaya ng > sa loob ng attribute (hal. value="a>b").
  2. 2
    Sinusubaybayan ang lalim ng indentation bawat tag
    Para sa beautify mode, nagpapanatili ang tokenizer ng depth counter. Pinalalalim ng block-level na opening tag ang depth; binabawasan ito ng closing tag bago isulat. Pinananatili sa parehong linya ng laman nila ang mga inline element (span, a, strong, em, atbp.) sa halip na ilipat sa sariling naka-indent na linya. Ang mga tag gaya ng pre, script, style, at textarea ay inilalabas nang eksakto ang laman para hindi masira ang code na sensitibo sa whitespace o executable.
  3. 3
    Ligtas na pinagsasama ng minifier ang whitespace
    Sa minify mode, pinapalitan muna ng may numerong sentinel ang laman ng mga pre, script, style, at textarea block bago ang anumang pagsasama ng whitespace. Tinatanggal ang mga HTML comment, at inaalis ang sunud-sunod na whitespace sa pagitan ng mga tag β€” maliban sa pagitan ng magkatabing inline element, kung saan pinananatili ang isang space para hindi magdikit ang mga salita. Pagkatapos, ibinabalik ang mga sentinel placeholder sa orihinal nilang laman.
  4. 4
    Ipinapakita ang output at opsyonal na sine-save
    Lumalabas nang live sa output panel ang na-format o na-minify na resulta kasama ang porsiyento ng pagbabago ng laki. Puwede mo itong kopyahin sa clipboard o i-download bilang .html file, nang hindi umaalis sa browser.

Mga Kaugnay na Tool

🎨

CSS Beautifier

Ayusin ang minified na CSS na may pare-parehong indentation, o i-minify ang CSS. May opsyonal na alphabetical na pag-uuri ng property para mas madaling ihambing ang mga pagbabago.

Subukan
πŸ—œοΈ

CSS Minifier at Beautifier

I-minify ang CSS para bawasan ang laki ng file o i-beautify ang minified na CSS para sa pagiging madaling basahin. Mabilis, sa iyong browser.

Subukan
πŸ“°

XML Formatter at Validator

Mag-pretty-print at mag-validate ng XML gamit ang native DOM parser ng iyong browser. Kasama ang minified na output para sa production na paggamit.

Subukan

Mga Madalas na Itanong