အခမဲ့ HTML လှပဆင်/ချုံ့စက်
မှန်ကန်သော nesting indentation ဖြင့် HTML ကို pretty-print သို့မဟုတ် minify ပြုလုပ်ပါ။ <pre>, <script>, <style> block အတွင်း အကြောင်းအရာ ထိန်းသိမ်းသည်。
ဖိုင်ကို ဤနေရာသို့ ချပါ သို့မဟုတ် ရွေးရန် နှိပ်ပါ
HTML, HTM · သင့်စက်ထဲတွင်သာ လုပ်ဆောင်ပါသည်
သို့မဟုတ် ကလစ်ဘုတ်မှ ကူးထည့်ရန် Ctrl+V နှိပ်ပါ
ရလဒ် ဤနေရာတွင် ပေါ်လာမည်…အသုံးများသော အသုံးပြုမှုများ
- Server-Rendered HTML ကို Debug လုပ်ပါသင့် server (PHP၊ Rails၊ Django၊ Node) မှ ထွက်လာသော raw HTML ကို indent လုပ်ထားသည့် ဖတ်ရလွယ်သော ပုံစံဖြင့် ကြည့်ပါ။
- အီးမေးလ် HTML Template များကို Format လုပ်ပါအီးမေးလ် HTML သည် ရှည်လျားသည် (table များ၊ inline style များ)။ တည်းဖြတ်ရန်နှင့် ထိန်းသိမ်းရန် လွယ်စေရန် format လုပ်ပါ။
- Static HTML စာမျက်နှာများကို Format လုပ်ပါလက်ဖြင့်တည်းဖြတ်ထားသော static HTML ဖိုင်များသည် ပူးပေါင်းတည်းဖြတ်ရာတွင် တူညီသော format ဖြင့် အကျိုးရှိပါသည်။
- CMS မှ Export လုပ်ထားသော HTML ကို သန့်ရှင်းပါWordPress၊ Wix၊ Squarespace တို့သည် မလိုအပ်သော အပိုအစအနများပါသည့် HTML ကို export လုပ်သည်။ တည်းဖြတ်ရလွယ်စေရန် format လုပ်ပါ။
- Production အတွက် HTML ကို Minify လုပ်ပါနေရာလွတ်များနှင့် မလိုအပ်သော စာလုံးများကို ဖယ်ရှားခြင်းဖြင့် HTML ဖိုင်အရွယ်ကို လျှော့ချကာ စာမျက်နှာကို ပိုမြန်စွာ ဖွင့်ပါ။
မည်သို့ အလုပ်လုပ်သည်
ဤကိရိယာသည် စာမျက်နှာထဲသို့ တိုက်ရိုက် တည်ဆောက်ထားသော ကိုယ်တိုင်ရေးထားသော tag-aware tokenizer တစ်ခုကို သုံး၍ HTML ကို ဖော်မတ်ချ (သို့) ချုံ့သည် — ပြင်ပ formatting library၊ server round-trip မပါဝင်ပါ။ သင့် markup ၏ character တိုင်းကို ရိုက်ထည့် (သို့) paste လုပ်လိုက်သည်နှင့် browser ထဲတွင် local တွင် လုပ်ဆောင်သည်။
- 1Tokenizer သည် markup ကို scan လုပ်သည်Custom character-by-character scanner တစ်ခုသည် HTML string ကို လျှောက်သွားပြီး comment များ၊ DOCTYPE declaration များ၊ ဖွင့်ထားသော tag များ၊ ပိတ်ထားသော tag များ၊ self-closing void element များ (br, img, input, etc.) နှင့် raw text node များကို ခွဲခြားသည်။ Dedicated helper တစ်ခုသည် quote လုပ်ထားသော attribute တန်ဖိုးများကို track လုပ်သဖြင့် attribute တစ်ခုအတွင်းရှိ > ကဲ့သို့ character များ (ဥပမာ value="a>b") သည် tag ကို စောစီးစွာ ခွဲသွားခြင်း ဘယ်တော့မှ မဖြစ်ပါ။
- 2Indentation depth ကို tag တစ်ခုစီအလိုက် track လုပ်ထားသည်Beautify mode အတွက် tokenizer သည် depth counter တစ်ခုကို ထိန်းထားသည်။ Block-level opening tag များသည် depth ကို တိုးပေးသည်၊ closing tag များသည် ရေးထားမီ depth ကို လျှော့ပေးသည်။ Inline element များ (span, a, strong, em, etc.) ကို ၎င်းတို့ content နှင့် တူညီသော line တွင်ထားသည် — သီးခြား indent line သို့ မတွန်းပါ။ pre, script, style, နှင့် textarea ကဲ့သို့ tag များသည် ၎င်းတို့၏ inner content ကို whitespace-sensitive သို့မဟုတ် executable code ကို မဖျက်ဆီးစေရန် အတိအကျ output လုပ်သည်။
- 3Minifier သည် whitespace ကို ဘေးကင်းစွာ ချုံ့သည်Minify mode တွင် pre, script, style, နှင့် textarea block များ၏ content ကို whitespace ချုံ့ခြင်း မလုပ်မီ ဂဏန်းတပ်ထားသော sentinel များနှင့် အစားထိုးထားသည်။ HTML comment များကို ဖယ်ရှားပြီး tag များကြား whitespace run များကို ဖယ်ရှားသည် — ကပ်လျက် inline element များကြား space တစ်ခုသည် ထိန်းထားသည်၊ ထို့ကြောင့် စကားလုံးများ ဆက်စပ်မသွားပါ။ Sentinel placeholder များကို ထို့နောက် ၎င်းတို့၏ မူရင်း content သို့ ပြန်ပြင်သည်။
- 4Output ကို ပြသပြီး ရွေးချယ်နိုင်သည့်အားဖြင့် သိမ်းသည်ဖော်မတ်ချထားသော (သို့) minify ထားသော ရလဒ်သည် size-change ရာခိုင်နှုန်းနှင့်အတူ output panel တွင် တိုက်ရိုက် ပေါ်လာသည်။ ၎င်းကို clipboard သို့ ကူးယူ (သို့) .html ဖိုင်အဖြစ် ဒေါင်းလုဒ်ဆွဲနိုင်သည်၊ browser မှ ထွက်ခွာစရာမလိုပါ။
ဆက်နွှယ်သော ကိရိယာများ
CSS လှပဆင်စက်
ချုံ့ထားသော CSS ကို တသမတ်တည်း အင်ဒင့်တင်ဖြင့် ဖတ်ရှုလွယ်အောင်ပြုပါ၊ သို့မဟုတ် ချုံ့ပါ။ ခန့်မှန်းနိုင်သော ကွာခြားချက်များအတွက် ရွေးချယ်စရာအဖြစ် property များကို အက္ခရာစဉ်စီနိုင်သည်။
CSS ချုံ့/လှပဆင်စက်
ဖိုင်အရွယ်အစား လျှော့ချရန် CSS minify ပြုလုပ်ပါ သို့မဟုတ် ဖတ်နိုင်ရေးအတွက် minified CSS ကို beautify ပြုလုပ်ပါ။ ချက်ချင်း၊ browser တွင်。
XML ဖော်မတ်ချ/စစ်ဆေးစက်
browser ၏ native DOM parser သုံး၍ XML ကို pretty-print ပြုလုပ်ကာ စစ်ဆေးပါ။ production အသုံးပြုမှုအတွက် minified output ပါဝင်သည်。