كيف يعمل تجميل HTML؟
يقرأ المُجمِّل ترميزك وسماً وسماً، يتتبع عمق تداخل كل عنصر، ثم يُعيد إصداره بمسافات بادئة متسقة. لا يغير أبداً ما تُصيِّره الصفحة — فقط طريقة تخطيط المصدر.
- تحليل الوسوم. تمسح المكتبة مدخلاتك وتحوّلها إلى سلسلة من الرموز: وسوم افتتاحية وإغلاقية ومحتوى نصي وتعليقات ومحتويات كتل السكريبت والأنماط. تُعامَل قيم السمات المقتبسة ومحتوى عناصر pre وtextarea بوصفها وحدات متكاملة، فتبقى المسافات البيضاء بداخلها دون تغيير.
- تتبُّع التداخل. أثناء سير المُجمِّل في سلسلة الرموز يحتفظ بمستوى المسافة البادئة الجارية. كل وسم افتتاحي ليس ذاتي الإغلاق يزيد المستوى درجة؛ وكل وسم إغلاق مقابل يُعيده درجة. هذا العمق يحدد عدد وحدات المسافة البادئة أمام كل سطر في الناتج.
- تطبيق خياراتك. يحدد اختيار المسافة البادئة — مسافتان أو 4 مسافات أو مسافة جدولة — عرض كل مستوى. تُقسِّم قيمة الالتفاف عند العمود السطور الطويلة من السمات أو النص متى تجاوزت العمود الذي تختاره. يُقلّص حد الأسطر الفارغة التتابعات الطويلة من الأسطر الخالية إلى الحد الذي تعيّنه.
- إعادة الإصدار. أخيراً، يطبع المُنسِّق الوسوم مرةً أخرى مع المسافات البادئة وفواصل الأسطر التي حدّدها. إن فعّلت تنسيق المُضمَّن، يُمرَّر محتوى كل كتلة أنماط عبر مُنسِّق CSS ومحتوى كل كتلة سكريبت عبر مُنسِّق JS، فيُحاذى الكود المُضمَّن مع الترميز المحيط به.
لماذا نُجمِّل HTML؟
- قراءة الصفحات المضغوطة. يُشحن HTML الإنتاجي بفواصل الأسطر المحذوفة توفيراً للبايتات. يستعيد التجميل البنية حتى تستطيع العثور على القسم الذي تبحث عنه، ورصد وسم إغلاق مفقود، وتتبع كيفية تداخل المستند فعلياً.
- ترتيب القوالب غير المتسقة. الترميز الذي لمسه أشخاص متعددون ينزلق نحو مسافات بادئة متخلطة ووسوم في مواضع متباينة. مرور واحد عبر المُجمِّل يوحّد الملف بأكمله، فيُظهر التزام التالي التغيير الذي أجريته لا جداراً من المسافات المُعاد تنسيقها.
- لا تُثقل صفحتك. تحمّل معظم المُنسِّقات أونلاين مكتبتها بالكامل فور فتح الصفحة. هذه الأداة تُحمِّل js-beautify بشكل كسول فقط حين تنقر على تجميل أو تُشغّل الوضع المباشر، فيكون تحميل الصفحة الأول بضعة كيلوبايتات لا بضع مئات، ويظل التصيير الأولي سريعاً.
- لا شيء يغادر متصفحك. يعمل المُجمِّل كلياً على جهازك. لا يُرفع ترميزك إلى أي خادم، وهذا مهم حين تنتمي الصفحة إلى عميل، أو تحمل روابط داخلية، أو تخضع لاتفاقية سرية.
التطبيقات الشائعة
يظهر تجميل HTML في كل مرة يحتاج فيها أحد إلى قراءة ترميز لم يُكتب أصلاً ليُقرأ.
- فحص صفحة حية: الصق المصدر المضغوط من View Source للعثور على الترميز وراء خطأ تخطيط لا تستطيع إعادة إنتاجه محلياً.
- تنظيف إخراج نظام إدارة المحتوى: أعد تنسيق قالب صدّره منشئ الصفحات في سطر واحد قبل إعادة إيداعه في المستودع.
- مراجعات إمكانية الوصول وتحسين محركات البحث: وسِّع المستند للتحقق من ترتيب العناوين وبنية العلامات الدالة وسمات alt مقابل DOM الحقيقي.
مثال عملي
خذ مقطعاً مضغوطاً: <div><p>hi</p><span>x</span></div>. الصقه أعلاه بمسافة بادئة مضبوطة على مسافتين ثم انقر تجميل. ستحصل على كتلة مقروءة: <div> في سطره الخاص، و<p>hi</p> و<span>x</span> كلٌّ مُزاح مستوىً واحداً تحته، و</div> المطابق مصطفاً أسفله. بدِّل المسافة البادئة إلى مسافة جدولة وسيتحوّل كل مستوى من مسافتين إلى محرف جدولة. أضف كتلة <style>a{color:red}</style> وفعِّل "تنسيق CSS وJS المُضمَّنَين أيضاً" لتمتد القاعدة على سطور مُزاحة بدلاً من بقائها في سطر واحد.
FAQ
هل يُشغَّل هذا في متصفحي؟
نعم. تُحمَّل مكتبة js-beautify بشكل كسول في المرة الأولى التي تنقر فيها على تجميل أو تُفعِّل الوضع المباشر، ثم تُخزَّن. ترميزك لا يغادر الصفحة — لا رحلة إلى خادم ولا أي رفع.
هل سيُغيِّر التجميل طريقة تصيير صفحتي؟
لا. المُجمِّل يُضيف ويحذف المسافات البيضاء وفواصل الأسطر بين الوسوم فحسب. يتجاهل المتصفح تلك المسافات حين يبني الصفحة، فالناتج المُصيَّر مطابق. الشيء الوحيد الذي ينبغي مراعاته هو المحتوى الحساس للمسافات داخل pre وtextarea والعناصر المضمَّنة، وهو ما يتركه المُنسِّق دون تغيير عمداً.
ماذا يفعل مفتاح CSS وJS المُضمَّنَين؟
حين يكون مُعطَّلاً، يُترك محتوى كتل style وscript كما لصقته تماماً. فعِّله وسيُمرَّر CSS داخل كل كتلة أنماط عبر مُنسِّق CSS والشيفرة داخل كل كتلة سكريبت عبر مُنسِّق JS، فيُزاح الكود المُضمَّن ليتناسب مع الترميز المحيط.
ماذا يعني "الالتفاف عند العمود"؟
يحدد طول السطر الذي يُقسَّم عنده وسم ذو سمات كثيرة أو نص طويل إلى أسطر متعددة. اتركه عند 0 لإبقاء كل عنصر في سطر واحد مهما طال. اضبطه على 80 أو 120 وسيلتف المُنسِّق كل ما يتجاوز ذلك العمود، فتظل العناصر العريضة مقروءةً في محرر ضيق.
يمنحك تجميل HTML من جانب المتصفح ترميزاً مقروءاً دون خطوة بناء أو رفع. الصق صفحةً مضغوطةً أو غير منظَّمة، اختر المسافة البادئة وعرض الالتفاف، قرر ما إذا كنت تريد إعادة تنسيق CSS وJS المُضمَّنَين، ثم انسخ الناتج أو نزّله. لا شيء يغادر جهازك، ولا حساب مطلوب، والمكتبة لا تُحمَّل إلا حين تطلبها — فتحميل هذه الصفحة يكلّفك بضعة كيلوبايتات لا ميغابايت.