<pre>

وسم النص المنسق مسبقًا <pre>

وسم pre يعرض النص كما كتبته حرفيًّا — بمسافاته وأسطره — بخط أحادي المسافة: أساس كتل الكود وفن ASCII.

المتصفح عادة «يبتلع» المسافات المتكررة ويطوي الأسطر كما يشاء. pre يعطّل هذا السلوك كليًّا: كل مسافة وكل سطر جديد يظهران كما في المصدر تمامًا. لهذا هو الحاوية الطبيعية للكود متعدد الأسطر (مع code داخله)، ومخرجات الطرفية، وأي نص هندسي التنسيق.

انتبه لفخّه الشهير على الجوال: سطر طويل داخله لا يلتف بل يمدد الصفحة عرضيًّا — الحل الدائم overflow-x:auto.

الصياغة

<pre><code>const x = 1;
const y = 2;</code></pre>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<pre style="background:#12101a; color:#5ED49A; padding:12px; border-radius:8px; overflow-x:auto">
$ npm run build
✓ Compiled successfully
✓ 1031 pages generated
</pre>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
—	لا خصائص مميزة — سلوكه كله في حفظ التنسيق

💡 نصائح عملية

overflow-x:auto عليه دائمًا — يحمي صفحتك من التمدد الأفقي على الجوال
احذر المسافة البادئة في كودك المصدري — ستظهر حرفيًّا داخل pre

⚠️ أخطاء شائعة

كتل كود بـ div عادي فتنهار الأسطر والمحاذاة
ترك أسطر طويلة بلا لف ولا تمرير فتكسر تخطيط الجوال

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs