تجميل وتصغير HTML - نسّق HTML عبر الإنترنت مجاناً

الصق أي كود HTML — حتى الناتج المصغَّر في سطر واحد من خط إنتاج الإنشاء — وتعيد الأداة تنسيقه بمسافات بادئة مناسبة، ووسم واحد في كل سطر، ومسافات بيضاء متناسقة. اختر مسافة بادئة من 2 أو 4 أو 8 مسافات. الناتج جاهز لإسقاطه في محرِّرك أو لصقه في تعليق مراجعة الكود.

يوسّع التنسيق الجميل شيفرة HTML لتسهيل قراءتها: كل وسم في سطر منفصل، والعناصر المتداخلة بمسافات بادئة، مع الحفاظ على الأسطر الفارغة بين الأقسام. أما التصغير فيزيل التعليقات ويضغط سلاسل المسافات ويحذف فواصل الأسطر ليصبح الملف بحجم أقل من البايتات. استخدم التنسيق الجميل للتحرير والمراجعة، والتصغير للنشر في بيئة الإنتاج.

لا — يكتشف js-beautify (المحرك الذي يعمل خلف الكواليس) كتل البرامج النصية والأنماط وينسّق محتوياتها بقواعد JS أو CSS المناسبة، لذا تبقى البرامج النصية المضمّنة صالحة وتبقى أوراق الأنماط قابلة للقراءة. تتم معالجة الوسوم ذاتية الإغلاق والعناصر الفارغة والسمات ذات النطاقات (svg:xmlns، xlink:href) بشكل صحيح.

تتعامل الأداة جيداً مع HTML العادي والقوالب الشبيهة بـ HTML، لكن JSX الخالص (تعبيرات الأقواس المعقوفة، والأجزاء، ووسوم المكوّنات التي تبدأ بحرف كبير) يُحلَّل على أنه HTML وقد تظهر فيه مشكلات تجميلية طفيفة. للشيفرات الخاصة بإطار عمل معيّن نوصي باستخدام Prettier المهيّأ للهجتك؛ أما لملفات HTML الخام و.htm والقوالب فإن أداتنا مثالية.

لا يحدث أي رفع. يعمل المنسّق بالكامل داخل متصفحك باستخدام js-beautify، لذا يمكنك بأمان لصق قوالب الصفحات الداخلية، أو مسودات رسائل البريد الإلكتروني، أو كود HTML المحتوي على بيانات خاصة دون أن يغادر أي شيء جهازك.

يزيل التصغير تعليقات HTML، ويُحوّل أي تسلسل من المسافات بين الوسوم إلى مسافة واحدة، ويحذف فواصل الأسطر. والنتيجة هي كود HTML يُعرض بشكل مطابق تمامًا وأصغر عادةً بنسبة 10-30%. وبدمجه مع ضغط gzip على الخادم، يقلّ الوزن الأولي للصفحة بشكل ملحوظ في الصفحات الغنية بالمحتوى.

نعم — انقر تنزيل لحفظ المخرج المنسّق كملف output.html أو المخرج المُصغَّر كملف output.min.html. والملف مُرمَّز بترميز UTF-8، لذا يعمل بنفس الكفاءة مع المحتوى الإنجليزي والسيريلي والمحتوى بلغات CJK والمحتوى من اليمين إلى اليسار.

إنها أداة صغيرة تعمل في المتصفح فقط — بلا أي تكلفة استضافة — لذا نقدّمها مجاناً كجزء من مجموعة أدوات المطوّرين لدينا. بلا إعلانات، وبلا تتبّع للمخرجات، وبلا حدود على حجم الملف سوى ما يستطيع متصفحك الاحتفاظ به في الذاكرة.

يتيح لك وضع Prettify اختيار مسافة بادئة من 2 أو 4 أو 8 مسافات. اختر العرض الذي يستخدمه محرّرك أو نمط الكود لديك، ثم انسخ النتيجة أو نزّلها كملف output.html لينتقل التنسيق مباشرةً إلى مشروعك.

لا ينطبق منتقي المسافة البادئة (‏2 أو 4 أو 8 مسافات) إلا في وضع Prettify، إذ يزيل Minify كل المسافات وفواصل الأسطر بحكم تصميمه — فلا يبقى شيء لوضع مسافة بادئة له. عُد إلى Prettify لترى عرض المسافة البادئة يسري مفعوله من جديد.

أثناء اللصق أو التعديل، تجري الأداة تلقائيًا فحصًا هيكليًا وتسرد أي وسوم غير مغلقة أو غير متطابقة أو وسوم إغلاق شاردة مباشرةً أسفل لوحة الإخراج — دون الحاجة إلى زرّ منفصل. وتؤكّد رسالة خضراء «لم يُعثر على مشكلات هيكلية» أن الترميز سليم البنية.

استخدم وضع التنسيق الجميل بمسافة بادئة من مسافتين — فهو الاصطلاح الأكثر شيوعًا ويبقي الفروقات (diffs) مضغوطة — ثم تحقق من لوحة المشكلات البنيوية للتأكد من أنهم لم يتركوا وسمًا غير مغلق. بعد المراجعة، بدّل إلى وضع التصغير قبل النشر إلى بيئة الإنتاج لإزالة المسافات البيضاء الزائدة مجددًا.

نعم — اسحب ملف .html أو .htm أو .xhtml إلى منطقة الرفع، أو انقر عليها للتصفح، فتُحمَّل محتوياته مباشرة في مربع الإدخال تمامًا كما لو لصقتها. من هناك، تعمل أدوات التجميل والتصغير وعرض المسافة البادئة ومدقّق البنية كلها بالطريقة نفسها سواء أتى الترميز من ملف أو من لصق.

نعم — بمجرد وجود إخراج، يظهر زر نسخ بجوار لوحة الإخراج ومنطقة الإجراء الأساسي. النقر عليه ينسخ نتيجة التجميل أو التصغير الحالية إلى حافظتك فورًا (يعرض لوهلة 'Copied!' للتأكيد)، فيمكنك اللصق مباشرة في محرّرك أو في تعليق مراجعة كود دون حفظ ملف .html وسيط.