عرض مصدر Bootstrap/code

<noinclude>{{DISPLAYTITLE:كتابة الشفرات البرمجيّة في إطار العمل Bootstrap}}</noinclude>
تعلّم كيفية عرض كتل تعليمات برمجيّة وحيدة السّطر أو متعدّدة الأسطر في إطار العمل Bootstrap.

== شفرة برمجيّة ذات سطر واحد ==
غلِّف فقرات الشفرة البرمجيّة المكوَّنة من سطر واحد بالوسم <code>[[HTML/code|<nowiki><code></nowiki>]]</code>. تأكّد من تهريب (escape) الأقواس الزاويّة (<code>></code> و<code><</code>) في وسوم HTML.<syntaxhighlight lang="html">
يجب أن يُكتَب العنصُر <code>&lt;section&gt;</code> على  نفس السطر.


</syntaxhighlight>

== الشفرات متعدّدة الأسطر ==
استخدم الوسم <code>[[HTML/pre|<nowiki><pre></nowiki>]]</code> لتغليف شفرة مكوَّنة من أسطر عدّة. تأكّد كذلك من من تخليص الأقواس الزاويّة في الشفرة للحصول على عرض صحيح. يمكن إضافة الصّنف <code>‎.pre-scrollable</code> الذي يحدّد ارتفاعًا أقصى قدره 350px ويوفّر شريط تمرير عمودي.<syntaxhighlight lang="html">
<pre><code>&lt;p&gt;مثال على نصّ...&lt;/p&gt;
&lt;p&gt;سطر ثان من المثال...&lt;/p&gt;
</code></pre>


</syntaxhighlight>

== المتغيّرات ==
استخدم الوسم <code>[[HTML/var|<nowiki><var></nowiki>]]</code> للإشارة إلى المتغيّرات.<syntaxhighlight lang="html">
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>


</syntaxhighlight>

== مدخلات المستخدم ==
استخدم الوسم <code>[[HTML/kbd|<nowiki><kbd></nowiki>]]</code> للإشارة إلى أنّ المُدخَل يأتي عادةً عن طريق لوحة مفاتيح:<syntaxhighlight lang="html">
نفّذ الأمر<kbd>cd</kbd> متبوعًا باسم المُجلَّد للانتقال إلى المجلّد المذكور.<br>
انقر على الزرّيْن<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> لتعديل الإعدادات
</syntaxhighlight>

== نموذج مخرجات ==
استخدم الوسم <code>[[HTML/samp|<nowiki><samp></nowiki>]]</code> للإشارة إلى أنّ المقصود نموذَج لمُخرجات برنامج.<syntaxhighlight lang="html">
<samp>هذا نصّ مُعدّ للتعامل معه على أساس أنّه نتيجة تنفيذ برنامج حاسوبيّ</samp>


</syntaxhighlight>

== مصادر ==
* [https://getbootstrap.com/docs/4.0/content/code/ صفحة Code من توثيق Bootstrap].
[[تصنيف:Bootstrap]]