منسّق HTML
جمّل HTML بـ Prettier: مسافات بادئة متسقة وعنصر في كل سطر مع تنسيق CSS وJavaScript المضمّنين. اختر مسافتين أو 4 أو Tab.
يعمل بالكامل في متصفحك. لا يتم رفع بياناتك أبدًا.
أدوات ذات صلة
عرض الكلما هو منسّق HTML؟
يعيد منسّق HTML كتابة HTML بمسافات بادئة نظيفة ومتسقة باستخدام Prettier، المنسّق الذي تعتمده أغلب مشاريع الواجهات الأمامية. وتُنسَّق كتل <style> و<script> المضمّنة أيضًا بوصفها CSS وJavaScript.
كيفية استخدام منسّق HTML
- الصق HTML في مربع الإدخال أو اضغط تحميل مثال.
- اختر المسافة البادئة.
- اضغط التنسيق (يتحدّث الناتج أيضًا أثناء الكتابة).
- انسخ النتيجة أو نزّلها.
مثال
<div><p>Hi<b>x</b></p><img src=a.png alt=""></div>
<div> <p>Hi<b>x</b></p> <img src="a.png" alt="" /> </div>
متى تستخدم منسّق HTML
استخدمه لتنظيف HTML المصدَّر من أنظمة المحتوى أو قوالب البريد أو الوسوم المولَّدة قبل التحرير أو المراجعة. هو منسّق وليس مدقّقًا: للوسوم غير المغلقة أو المعرّفات المكررة استخدم مدقّق HTML. وقد تستغرق المستندات الكبيرة جدًا لحظات لأن Prettier يعمل في متصفحك.
كيف يعمل منسّق HTML
يُنسَّق الكود بـ Prettier 3 (النسخة المستقلة) مع إضافاته لـ HTML وCSS وBabel، وتُحمَّل عند الطلب. يحلّل Prettier الوسوم إلى شجرة ثم يطبعها بحيث تتسع الأسطر في 80 عمودًا، فيضع علامات اقتباس حول السمات ويضيف /> للعناصر الفارغة. وتُبقى العناصر السطرية الحساسة للمسافات متجاورة كي لا تتغير الصفحة المعروضة. وتُعرض أخطاء الصياغة بسطر وعمود Prettier.
حالات الاستخدام الشائعة
- جعل HTML المضغوط أو ذي السطر الواحد مقروءًا
- توحيد القوالب قبل مراجعة الكود
- تنسيق مقاطع HTML للتوثيق
- تنظيف الوسوم المنسوخة من محرر WYSIWYG
ملاحظة أمنية
كل شيء يعمل محليًا داخل متصفحك؛ الكود الذي تلصقه لا يُرفع إلى أي خادم.
الأسئلة الشائعة
ما قواعد الأسلوب المستخدمة؟
الإعدادات الافتراضية في Prettier: عرض طباعة 80 حرفًا وسمات بعلامات اقتباس مزدوجة والمسافة البادئة التي تختارها.
هل سيغيّر التنسيق شكل الصفحة؟
يحترم Prettier حساسية العناصر السطرية للمسافات، لذا يُفترض أن يبقى العرض كما هو.
هل يصلح HTML غير الصالح؟
لا. ينسّق ما تحلّله المتصفحات؛ استخدم مدقّق HTML لإيجاد الأخطاء البنيوية.