HTML ਬਿਊਟੀਫਿਕੇਸ਼ਨ ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ
ਬਿਊਟੀਫਾਇਰ ਤੁਹਾਡੇ markup ਨੂੰ tag-ਦਰ-tag ਪੜ੍ਹਦਾ ਹੈ, ਹਰ element ਕਿੰਨੀ ਡੂੰਘਾਈ ਤੇ nested ਹੈ ਇਹ ਟ੍ਰੈਕ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਸ ਨੂੰ ਇਕਸਾਰ ਇੰਡੈਂਟੇਸ਼ਨ ਨਾਲ ਮੁੜ ਛਾਪਦਾ ਹੈ। ਪੇਜ ਕੀ ਰੈਂਡਰ ਕਰਦਾ ਹੈ ਇਹ ਇਹ ਕਦੇ ਨਹੀਂ ਬਦਲਦਾ — ਸਿਰਫ਼ ਇਹ ਕਿ source ਕਿਵੇਂ ਵਿਛਾਇਆ ਗਿਆ ਹੈ।
- tags ਨੂੰ ਪਾਰਸ ਕਰੋ. ਲਾਇਬ੍ਰੇਰੀ ਤੁਹਾਡੇ ਇਨਪੁੱਟ ਨੂੰ token ਦੀ ਇੱਕ ਧਾਰਾ ਵਿੱਚ ਸਕੈਨ ਕਰਦੀ ਹੈ: ਖੁੱਲ੍ਹਣ ਵਾਲੇ tags, ਬੰਦ ਹੋਣ ਵਾਲੇ tags, ਟੈਕਸਟ content, comments, ਅਤੇ script ਤੇ style blocks ਦੇ ਅੰਦਰਲਾ। Quoted attribute values ਅਤੇ pre ਤੇ textarea elements ਦੇ ਅੰਦਰਲਾ ਇੱਕ ਇਕਾਈ ਵਜੋਂ ਗਿਣਿਆ ਜਾਂਦਾ ਹੈ, ਇਸ ਲਈ ਉਹਨਾਂ ਦੇ ਅੰਦਰਲੀ ਖਾਲੀ ਥਾਂ ਉਵੇਂ ਹੀ ਰਹਿੰਦੀ ਹੈ।
- nesting ਟ੍ਰੈਕ ਕਰੋ. ਜਿਵੇਂ ਇਹ token ਧਾਰਾ ਉੱਤੇ ਚੱਲਦਾ ਹੈ, ਬਿਊਟੀਫਾਇਰ ਇੱਕ ਚਾਲੂ indent level ਰੱਖਦਾ ਹੈ। self-closing ਨਾ ਹੋਣ ਵਾਲਾ ਹਰ ਖੁੱਲ੍ਹਣ ਵਾਲਾ tag level ਨੂੰ ਇੱਕ ਪੌੜੀ ਡੂੰਘਾ ਧੱਕਦਾ ਹੈ; ਹਰ ਮੇਲ ਖਾਂਦਾ ਬੰਦ ਹੋਣ ਵਾਲਾ tag ਉਸ ਨੂੰ ਵਾਪਸ ਪੌਪ ਕਰਦਾ ਹੈ। ਉਹ ਡੂੰਘਾਈ ਤੈਅ ਕਰਦੀ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਵਾਪਸ ਮਿਲਣ ਵਾਲੀ ਹਰ ਲਾਈਨ ਅੱਗੇ ਕਿੰਨੀਆਂ indent ਇਕਾਈਆਂ ਬੈਠਦੀਆਂ ਹਨ।
- ਆਪਣੇ ਵਿਕਲਪ ਲਾਗੂ ਕਰੋ. ਤੁਹਾਡੀ indent ਚੋਣ — 2 ਸਪੇਸ, 4 ਸਪੇਸ, ਜਾਂ ਇੱਕ ਟੈਬ — ਇੱਕ level ਦੀ ਚੌੜਾਈ ਸੈੱਟ ਕਰਦੀ ਹੈ। wrap-at-column ਮੁੱਲ attributes ਜਾਂ ਟੈਕਸਟ ਦੀਆਂ ਲੰਮੀਆਂ ਲਾਈਨਾਂ ਨੂੰ ਉਦੋਂ ਤੋੜਦਾ ਹੈ ਜਦੋਂ ਉਹ ਤੁਹਾਡੇ ਚੁਣੇ ਕਾਲਮ ਨੂੰ ਪਾਰ ਕਰਦੀਆਂ ਹਨ। ਖਾਲੀ-ਲਾਈਨ ਹੱਦ ਖਾਲੀ ਲਾਈਨਾਂ ਦੀ ਲੰਮੀ ਕਤਾਰ ਨੂੰ ਤੁਹਾਡੀ ਸੈੱਟ ਕੀਤੀ ਹੱਦ ਤੱਕ ਸੁੰਗੇੜਦੀ ਹੈ।
- markup ਮੁੜ ਛਾਪੋ. ਅੰਤ ਵਿੱਚ formatter tags ਨੂੰ ਉਸ ਇੰਡੈਂਟੇਸ਼ਨ ਅਤੇ line breaks ਨਾਲ ਵਾਪਸ ਛਾਪਦਾ ਹੈ ਜੋ ਉਸ ਨੇ ਕੱਢੇ। ਜੇ ਤੁਸੀਂ inline formatting ਚਾਲੂ ਕੀਤੀ ਹੋਵੇ, ਤਾਂ ਹਰ style block ਦਾ content CSS formatter ਵਿੱਚੋਂ ਅਤੇ ਹਰ script block JS formatter ਵਿੱਚੋਂ ਲੰਘਦਾ ਹੈ, ਤਾਂ ਜੋ embedded code ਆਲੇ-ਦੁਆਲੇ ਦੇ markup ਨਾਲ ਕਤਾਰ ਵਿੱਚ ਆਵੇ।
HTML ਕਿਉਂ ਬਿਊਟੀਫਾਈ ਕਰੋ
- ਮਿਨੀਫਾਈਡ ਪੇਜ ਪੜ੍ਹੋ. ਉਤਪਾਦਨ HTML bytes ਬਚਾਉਣ ਲਈ line breaks ਹਟਾ ਕੇ ਭੇਜੀ ਜਾਂਦੀ ਹੈ। ਬਿਊਟੀਫਾਈ ਕਰਨ ਨਾਲ ਬਣਤਰ ਵਾਪਸ ਆਉਂਦੀ ਹੈ ਤਾਂ ਜੋ ਤੁਸੀਂ ਜੋ section ਲੱਭ ਰਹੇ ਹੋ ਉਹ ਮਿਲੇ, ਕੋਈ ਗੁੰਮ closing tag ਫੜਿਆ ਜਾਵੇ, ਅਤੇ document ਅਸਲ ਵਿੱਚ ਕਿਵੇਂ nest ਹੁੰਦਾ ਹੈ ਇਹ ਅਨੁਸਰਣ ਕਰ ਸਕੋ।
- ਬੇਮੇਲ templates ਸੁਥਰੇ ਕਰੋ. ਜਿਸ markup ਨੂੰ ਕਈ ਲੋਕਾਂ ਨੇ ਸੰਪਾਦਿਤ ਕੀਤਾ ਹੋਵੇ ਉਹ ਮਿਲਵੀਂ ਇੰਡੈਂਟੇਸ਼ਨ ਅਤੇ tag ਥਾਂ ਵਿੱਚ ਭਟਕ ਜਾਂਦਾ ਹੈ। ਬਿਊਟੀਫਾਇਰ ਰਾਹੀਂ ਇੱਕ ਪਾਸ ਪੂਰੀ ਫਾਈਲ ਨੂੰ ਆਮ ਬਣਾਉਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਅਗਲਾ commit ਤੁਹਾਡੀ ਕੀਤੀ ਤਬਦੀਲੀ ਦਿਖਾਉਂਦਾ ਹੈ, ਮੁੜ ਫਾਰਮੈਟ ਹੋਈ ਖਾਲੀ ਥਾਂ ਦੀ ਕੰਧ ਨਹੀਂ।
- ਤੁਹਾਡੇ ਪੇਜ ਨੂੰ ਹੌਲੀ ਨਹੀਂ ਕਰਦਾ. ਜ਼ਿਆਦਾਤਰ ਔਨਲਾਈਨ formatters ਪੇਜ ਖੋਲ੍ਹਦੇ ਹੀ ਆਪਣੀ ਪੂਰੀ ਲਾਇਬ੍ਰੇਰੀ ਖਿੱਚ ਲੈਂਦੇ ਹਨ। ਇਹ js-beautify ਨੂੰ ਸਿਰਫ਼ ਉਦੋਂ fetch ਕਰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਬਿਊਟੀਫਾਈ ਕਲਿੱਕ ਕਰਦੇ ਹੋ ਜਾਂ Live mode ਚਾਲੂ ਕਰਦੇ ਹੋ, ਇਸ ਲਈ ਪਹਿਲਾ load ਕੁਝ ਸੌ ਦੀ ਬਜਾਏ ਕੁਝ ਕਿਲੋਬਾਈਟ ਖਰਚਦਾ ਹੈ ਅਤੇ ਪੇਜ ਤੇਜ਼ ਰਹਿੰਦਾ ਹੈ।
- ਕੁਝ ਵੀ ਤੁਹਾਡਾ ਬ੍ਰਾਊਜ਼ਰ ਨਹੀਂ ਛੱਡਦਾ. ਪੂਰੀ ਚੀਜ਼ ਤੁਹਾਡੇ device ਉੱਤੇ ਚੱਲਦੀ ਹੈ। ਤੁਹਾਡਾ markup ਕਦੇ ਵੀ server ਉੱਤੇ upload ਨਹੀਂ ਹੁੰਦਾ, ਜੋ ਉਦੋਂ ਮਾਅਨੇ ਰੱਖਦਾ ਹੈ ਜਦੋਂ ਪੇਜ ਕਿਸੇ client ਦਾ ਹੋਵੇ, ਅੰਦਰੂਨੀ URLs ਰੱਖਦਾ ਹੋਵੇ, ਜਾਂ ਤੁਹਾਡੇ ਦਸਤਖਤ ਕੀਤੇ ਗੁਪਤਤਾ ਸਮਝੌਤੇ ਅਧੀਨ ਆਉਂਦਾ ਹੋਵੇ।
ਆਮ ਵਰਤੋਂ
HTML ਬਿਊਟੀਫਾਈ ਕਰਨਾ ਉਦੋਂ ਆਉਂਦਾ ਹੈ ਜਦੋਂ ਕਿਸੇ ਨੂੰ ਅਜਿਹਾ markup ਪੜ੍ਹਨਾ ਪਵੇ ਜੋ ਪੜ੍ਹਨ ਲਈ ਨਹੀਂ ਲਿਖਿਆ ਗਿਆ ਸੀ।
- ਜੀਵੰਤ ਪੇਜ ਜਾਂਚਣਾ: ਉਸ layout bug ਪਿੱਛੇ ਵਾਲਾ markup ਲੱਭਣ ਲਈ View Source ਵਿੱਚੋਂ ਮਿਨੀਫਾਈਡ source ਪੇਸਟ ਕਰੋ ਜੋ ਤੁਸੀਂ ਸਥਾਨਕ ਤੌਰ 'ਤੇ ਮੁੜ ਪੈਦਾ ਨਹੀਂ ਕਰ ਸਕਦੇ।
- CMS ਆਉਟਪੁੱਟ ਸਾਫ਼ ਕਰਨਾ: page builder ਨੇ ਇੱਕ ਲਾਈਨ ਉੱਤੇ export ਕੀਤੇ template ਨੂੰ repository ਵਿੱਚ ਵਾਪਸ commit ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਮੁੜ ਫਾਰਮੈਟ ਕਰੋ।
- Accessibility ਅਤੇ SEO ਰਿਵਿਊ: document ਨੂੰ expand ਕਰੋ ਤਾਂ ਜੋ ਤੁਸੀਂ ਅਸਲ DOM ਖਿਲਾਫ਼ heading order, landmark ਬਣਤਰ, ਅਤੇ alt attributes ਜਾਂਚ ਸਕੋ।
ਇੱਕ ਕੰਮ ਕੀਤੀ ਉਦਾਹਰਣ
ਇੱਕ ਮਿਨੀਫਾਈਡ snippet ਲਓ: <div><p>hi</p><span>x</span></div>। ਇਸ ਨੂੰ ਉੱਪਰ ਇੰਡੈਂਟੇਸ਼ਨ 2 ਸਪੇਸ ਸੈੱਟ ਕਰਕੇ ਪੇਸਟ ਕਰੋ, ਫਿਰ ਬਿਊਟੀਫਾਈ ਕਲਿੱਕ ਕਰੋ। ਤੁਹਾਨੂੰ ਪੜ੍ਹਨਯੋਗ block ਵਾਪਸ ਮਿਲਦਾ ਹੈ: <div> ਆਪਣੀ ਵੱਖਰੀ ਲਾਈਨ ਉੱਤੇ, <p>hi</p> ਅਤੇ <span>x</span> ਹਰ ਇੱਕ ਉਸ ਦੇ ਹੇਠਾਂ ਇੱਕ level ਇੰਡੈਂਟ ਹੋਏ, ਅਤੇ ਮੇਲ ਖਾਂਦਾ </div> ਹੇਠਾਂ ਕਤਾਰ ਵਿੱਚ। ਇੰਡੈਂਟੇਸ਼ਨ ਨੂੰ ਟੈਬ ਉੱਤੇ ਬਦਲੋ ਅਤੇ ਹਰ level ਦੋ ਸਪੇਸ ਤੋਂ ਇੱਕ ਟੈਬ ਉੱਤੇ ਖਿਸਕਦਾ ਹੈ। ਇੱਕ <style>a{color:red}</style> block ਜੋੜੋ, "inline CSS ਅਤੇ JS ਵੀ ਫਾਰਮੈਟ ਕਰੋ" ਚਾਲੂ ਕਰੋ, ਅਤੇ ਨਿਯਮ ਇੱਕ ਲਾਈਨ ਉੱਤੇ ਰਹਿਣ ਦੀ ਬਜਾਏ ਆਪਣੀਆਂ ਇੰਡੈਂਟ ਹੋਈਆਂ ਲਾਈਨਾਂ ਉੱਤੇ ਫੈਲਦਾ ਹੈ।
FAQ
ਕੀ ਇਹ ਮੇਰੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਚੱਲਦਾ ਹੈ?
ਹਾਂ। js-beautify ਲਾਇਬ੍ਰੇਰੀ ਪਹਿਲੀ ਵਾਰ ਬਿਊਟੀਫਾਈ ਕਲਿੱਕ ਕਰਨ ਜਾਂ Live mode ਸਮਰੱਥ ਕਰਨ ਤੇ fetch ਹੁੰਦੀ ਹੈ, ਫਿਰ cache ਹੁੰਦੀ ਹੈ। ਤੁਹਾਡਾ markup ਕਦੇ ਪੇਜ ਨਹੀਂ ਛੱਡਦਾ — ਕੋਈ server round-trip ਨਹੀਂ ਅਤੇ ਕੋਈ upload ਨਹੀਂ।
ਕੀ ਬਿਊਟੀਫਾਈ ਕਰਨ ਨਾਲ ਮੇਰਾ ਪੇਜ ਕਿਵੇਂ ਰੈਂਡਰ ਹੁੰਦਾ ਹੈ ਉਹ ਬਦਲੇਗਾ?
ਨਹੀਂ। ਬਿਊਟੀਫਾਇਰ ਸਿਰਫ਼ tags ਵਿਚਕਾਰ ਖਾਲੀ ਥਾਂ ਅਤੇ line breaks ਜੋੜਦਾ ਅਤੇ ਹਟਾਉਂਦਾ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਪੇਜ ਬਣਾਉਂਦੇ ਸਮੇਂ ਉਸ ਖਾਲੀ ਥਾਂ ਨੂੰ ਅਣਡਿੱਠ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ ਰੈਂਡਰ ਹੋਇਆ ਨਤੀਜਾ ਇੱਕੋ ਜਿਹਾ ਰਹਿੰਦਾ ਹੈ। ਧਿਆਨ ਰੱਖਣ ਵਾਲੀ ਇੱਕ ਚੀਜ਼ pre, textarea, ਜਾਂ inline elements ਦੇ ਅੰਦਰਲਾ whitespace-sensitive content ਹੈ, ਜਿਸ ਨੂੰ formatter ਜਾਣ-ਬੁੱਝ ਕੇ ਉਵੇਂ ਹੀ ਛੱਡ ਦਿੰਦਾ ਹੈ।
inline CSS ਅਤੇ JS ਟੌਗਲ ਕੀ ਕਰਦਾ ਹੈ?
ਇਹ ਬੰਦ ਹੋਣ 'ਤੇ, style ਅਤੇ script blocks ਦਾ content ਠੀਕ ਉਵੇਂ ਹੀ ਰਹਿੰਦਾ ਹੈ ਜਿਵੇਂ ਤੁਸੀਂ ਪੇਸਟ ਕੀਤਾ। ਇਸ ਨੂੰ ਚਾਲੂ ਕਰੋ ਅਤੇ ਹਰ style block ਦੇ ਅੰਦਰਲੀ CSS CSS formatter ਵਿੱਚੋਂ ਅਤੇ ਹਰ script block ਦੇ ਅੰਦਰਲੀ JavaScript JS formatter ਵਿੱਚੋਂ ਲੰਘਦੀ ਹੈ, ਤਾਂ ਜੋ embedded code ਆਲੇ-ਦੁਆਲੇ ਦੇ markup ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਇੰਡੈਂਟ ਹੋਵੇ।
"ਇਸ ਕਾਲਮ ਉੱਤੇ wrap ਕਰੋ" ਕੀ ਕਰਦਾ ਹੈ?
ਇਹ ਉਹ ਲਾਈਨ ਲੰਬਾਈ ਸੈੱਟ ਕਰਦਾ ਹੈ ਜਿੱਥੇ ਕਈ attributes ਵਾਲਾ tag, ਜਾਂ ਟੈਕਸਟ ਦੀ ਲੰਮੀ ਕਤਾਰ, ਕਈ ਲਾਈਨਾਂ ਉੱਤੇ ਟੁੱਟ ਜਾਂਦੀ ਹੈ। ਹਰ element ਭਾਵੇਂ ਕਿੰਨਾ ਵੀ ਲੰਮਾ ਹੋਵੇ ਇੱਕ ਲਾਈਨ ਉੱਤੇ ਰੱਖਣ ਲਈ ਇਸ ਨੂੰ 0 ਉੱਤੇ ਰਹਿਣ ਦਿਓ। ਇਸ ਨੂੰ 80 ਜਾਂ 120 ਉੱਤੇ ਸੈੱਟ ਕਰੋ ਅਤੇ formatter ਉਸ ਕਾਲਮ ਨੂੰ ਪਾਰ ਕਰਨ ਵਾਲੀ ਹਰ ਚੀਜ਼ wrap ਕਰਦਾ ਹੈ, ਜੋ ਚੌੜੇ elements ਨੂੰ ਤੰਗ editor ਵਿੱਚ ਪੜ੍ਹਨਯੋਗ ਰੱਖਦਾ ਹੈ।
ਬ੍ਰਾਊਜ਼ਰ-ਸਾਈਡ HTML ਬਿਊਟੀਫਿਕੇਸ਼ਨ ਤੁਹਾਨੂੰ build step ਜਾਂ upload ਤੋਂ ਬਿਨਾਂ ਪੜ੍ਹਨਯੋਗ markup ਦਿੰਦੀ ਹੈ। ਮਿਨੀਫਾਈਡ ਜਾਂ ਗੜਬੜ ਪੇਜ ਪੇਸਟ ਕਰੋ, ਆਪਣੀ ਇੰਡੈਂਟੇਸ਼ਨ ਅਤੇ wrap ਚੌੜਾਈ ਚੁਣੋ, inline CSS ਅਤੇ JS ਮੁੜ ਫਾਰਮੈਟ ਕਰਨੀ ਹੈ ਜਾਂ ਨਹੀਂ ਇਹ ਤੈਅ ਕਰੋ, ਫਿਰ ਨਤੀਜਾ ਕਾਪੀ ਜਾਂ ਡਾਊਨਲੋਡ ਕਰੋ। ਕੁਝ ਵੀ ਤੁਹਾਡਾ device ਨਹੀਂ ਛੱਡਦਾ, ਕੋਈ account ਨਹੀਂ, ਅਤੇ ਲਾਇਬ੍ਰੇਰੀ ਸਿਰਫ਼ ਉਦੋਂ ਲੋਡ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਕਹੋ — ਇਸ ਲਈ ਇਹ ਪੇਜ ਖੋਲ੍ਹਣਾ ਤੁਹਾਨੂੰ ਇੱਕ megabyte ਨਹੀਂ, ਕੁਝ ਕਿਲੋਬਾਈਟ ਪੈਂਦਾ ਹੈ।