منسّخ ومصغّر HTML

ما هو منسِّق HTML؟#

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

تفعل هذه الصفحة كليهما، وبُني الاتجاهان بشكل مختلف لأنّ HTML يفرض ذلك. تنسيق يستخدم html_beautify من js-beautify، الذي يُزيح العناصر بتناسق ويحفظ فواصل الأسطر التي تريدها فعلًا. أمّا ضغط فماسح ضوئي محافظ مكتوب يدويًّا. القاعدة الأهمّ التي يتبعها هي أنّ محتوى الوسوم <pre> و<code> و<textarea> و<script> و<style> يُترَك كاملًا دون لمس — فطيّ المسافات داخل كتلة <pre> أو <script> يُفسد الصفحة، لأنّ المسافات في تلك العناصر جزء من البيانات لا زينة. والمُصغِّر الساذج الذي لا يعرف هذا هو بالضبط كيف يفقد مثال كود فجأة إزاحته على موقع حيّ.

كيفية الاستخدام#

1. الصق لغة التوصيف في لوحة HTML على اليسار، أو انقر مثال لوثيقة مثال قصيرة.
2. اختر المسافة البادئة من شريط الأدوات: 2، أو 4 (الافتراضي لـ HTML)، أو علامة جدولة. المسافات الأربع نمط شائع للّغة التوصيف لأنّ الوسوم المتعشّشة تتراكم سريعًا.
3. انقر فعلًا:
   • تنسيق — إعادة إزاحة عبر js-beautify، مع حفظ الأسطر الجديدة الموجودة كي لا تُهرس الأسطر المكسورة يدويًّا معًا.
   • ضغط — إسقاط تعليقات HTML، وطيّ المسافات بين الوسوم إلى لاشيء، وتقليم المسافات في عقد النصّ العادية — مع ترك داخل <pre> و<code> و<textarea> و<script> و<style> كما هو مكتوب تمامًا.
4. اقرأ النتيجة في لوحة الإخراج. واستخدم نسخ في ترويسة المخرج لأخذها؛ ومسح تُعيد اللوحتين.

الميزات الرئيسية#

• يحفظ ما يهمّ. يُنسَخ محتوى <pre> و<code> و<textarea> و<script> و<style> حرفيًّا أثناء التصغير. فالمسافات داخل تلك العناصر ذات معنى؛ وإزالتها تُغيّر ما يُصدِره المتصفّح.
• التعليقات مُسقَطة في التصغير، محفوظة في التنسيق. كتل <!-- ... --> تُزال فقط حين تطلب صراحةً التصغير. والتنسيق يُبقيها مكانها.
• إزاحة افتراضية ملائمة لـ HTML. أربع مسافات، لأنّ التوصيف المتعشّش بعمق يُقرأ أفضل بخطوة أعرض. بدِّل إلى 2 أو علامة جدولة إن طابق ذلك مشروعك.
• لوحتان، جاهز للنسخ. إدخال قابل للتحرير، ومخرج للقراءة فقط، ونسخة بنقرة واحدة.
• يعمل في متصفحك فقط. js-beautify مُدمَج مع الصفحة ويُحمَّل عند الطلب؛ لا خادم خلفي ولا رفع، وتبقى لغة توصيفك على جهازك.

مثال عملي#

جزء من بطاقة منتج مسحوب من قالب، مع تعليق وكتلة <pre> في الداخل:

المدخل:

<div class="card">
<!-- price shown gross -->
<span class="price">£12.00</span>
<pre data-lang="bash">npm install
npm run build</pre>
</div>

انقر تنسيق بـ 4 مسافات:

<div class="card">
    <!-- price shown gross -->
    <span class="price">£12.00</span>
    <pre data-lang="bash">npm install
npm run build</pre>
</div>

والآن انقر ضغط على المدخل نفسه:

<div class="card"><span class="price">£12.00</span><pre data-lang="bash">npm install
npm run build</pre></div>

ثلاثة أمور تجدر الإشارة إليها. التعليق اختفى. والمسافات بين الوسوم اختفت — فالوسم </span> و<pre> يجلسان الآن متجاورين مباشرةً، وهو آمن لأنّ المسافات بين الوسوم في HTML زخرفية. لكنّ السطر الجديد داخل <pre> (سطر npm install فوق npm run build) لا يزال موجودًا، كما هو مكتوب تمامًا. تلك هي القاعدة تؤدّي عملها: طيّ الزخرفة، وحفظ البيانات.

الأسئلة الشائعة#

لماذا تُحفَظ بعض المسافات المفردة بين الوسوم بعد التصغير؟#

تُسقَط بالكامل عقد النصّ التي لا تحوي سوى مسافات بين وسوم مستوى الكتلة. لكنّ مسافة مفردة داخل سطر نصّ — Hello <em>world</em> — ذات أهمّية، لأنّ إزالتها تَدْمج الكلمتين. يُبقي الماسح مسافات عقد النصّ ذات المعنى ولا يُزيل سوى المسافات بين الوسوم الزخرفية بحتة.

هل يُزيل التصغير السمات أو علامات الاقتباس أو القيم الافتراضية؟#

لا. فهو لا يُعيد كتابة صياغة السمات، ولا يُجرّد علامات الاقتباس، ولا يطوي السمات المنطقية، ولا يُزيل type="text". فتلك التحويلات تتطلّب محلِّل HTML كاملًا بمعرفة المخطّط ويسهل الخطأ فيها؛ وتبقى هذه الأداة على الجانب الآمن وتُزيل التعليقات والمسافات الزخرفية فقط.

هل سيُصغِّر JavaScript داخل وسوم <script> خاصّتي؟#

لا. يُمرَّر المحتوى الكامل لـ <script> دون لمس — جزئيًّا لأنّ تغييره قد يكسر ASI، وجزئيًّا لأنّ مُصغِّر JS منفصل يعيش في صفحة format/js. إن أردت تصغير النصّ البرمجي، فأخرجه، وشغّله عبر تلك الأداة، ثمّ الصقه مجدّدًا.

هل يَعي صياغة القوالب مثل {{ var }} أو {% if %}؟#

يُعيد التنسيق الإزاحة حول رموز القوالب ويُنتج عادةً مخرجًا مقروءًا. ويعامل التصغير وسوم القوالب بوصفها نصًّا عاديًّا، فلا يطوي المسافات داخلها بطريقة تُغيّر معناها. وللقوالب الثقيلة، تعامل مع المخرج بوصفه نقطة بداية قوية وتحقّق مقابل مُصدِّرك.