<code>

وسم الكود السطري <code>

وسم code يميز مقتطف كود داخل الجملة بخط أحادي المسافة — لأسماء الدوال والأوامر والمتغيرات وسط النص.

عندما تذكر console.log أو npm install وسط جملة، لفّها بـ code: تظهر بخط monospace مميز، وتفهم الآلات أنها كود لا كلامًا. للسطور المتعددة زاوجه مع pre: الأب pre يحفظ الأسطر والمسافات، والابن code يعلن المحتوى كودًا — الوصفة القياسية لكل كتل الكود (وهي المستخدمة في دروس هذا الموقع).

لعرض وسوم HTML نفسها كنص اكتب أقواسها ككيانات: &lt; لـ < و&gt; لـ >.

الصياغة

<p>استخدم دالة <code>getElementById()</code> للوصول للعنصر.</p>

⚡ جرّب بنفسك

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

🎨 محرّر HTML/CSS

<p>ثبّت الحزم بأمر <code style="background:#ede9fe; padding:2px 6px; border-radius:4px">npm install</code> ثم شغّل المشروع.</p>
<pre style="background:#12101a; color:#e2e0ea; padding:12px; border-radius:8px"><code>function greet(name) {
  return `أهلًا ${name}`;
}</code></pre>

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

أهم الخصائص

الخاصية	الوظيفة
class	العرف الواسع لتلوين الصياغة: class="language-js" مع مكتبات الإبراز

💡 نصائح عملية

كتلة كود كاملة = pre + code معًا — سطري وسط جملة = code وحده
خلفية خفيفة عبر CSS تجعل الكود السطري مقروءًا فورًا

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

كتابة أسطر كود متعددة بـ code وحده — تنهار في سطر واحد بلا pre
وضع وسوم HTML خام داخله فيفسرها المتصفح بدل عرضها — استخدم الكيانات

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

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