القواعد الأساسيّة

عناصر ماركداون الموضّحة في مستند تصميم جون جروبر (John Gruber) مخترع ماركداون.

لمحة

تدعم جميع تطبيقات ماركداون تقريبًا القواعد الأساسية الموضّحة في مستند التصميم الأصلي لـجون جروبر (John Gruber). هناك اختلافات وتناقضات طفيفة بين معالجات ماركداون. ستُسجّل هذه الاختلافات حيثما وُجدت.

العناوين

لإنشاء عنوان، أضف علامة المربع (#) أمام الكلمة أو العبارة التي تريد تنسيقها عنوانًا. يجب أن يتوافق عدد علامات المربع التي تستخدمها مع مستوى العنوان. مثلًا، لإنشاء عنوان من المستوى الثالث (<h3>)، استخدم ثلاث علامات مربع (مثلًا، ### هذا العنوان من المستوى الثالث).

تنسيق ماركداون HTML النتيجة النهائية
## عنوان من المستوى الأول <h1>عنوان من المستوى الأول</h1>

عنوان من المستوى الأول
## عنوان من المستوى الثاني <h2>عنوان من المستوى الثاني</h2>

عنوان من المستوى الثاني
### عنوان من المستوى الثالث <h3>عنوان من المستوى الثالث</h3>

عنوان من المستوى الثالث
#### عنوان من المستوى الرابع <h4>عنوان من المستوى الرابع</h4>

عنوان من المستوى الرابع
##### عنوان من المستوى الخامس <h5>عنوان من المستوى الخامس</h5>
عنوان من المستوى الخامس
###### عنوان من المستوى السادس <h6>عنوان من المستوى السادس</h6>
عنوان من المستوى السادس

قاعدة بديلة

بدلاً من ذلك، في السطر الموجود أسفل النص (المراد تنسيقه عنوانًا)، أضف أي عدد من الأحرف “===” لعنوان من المستوى الأول، أو أحرف الشرطة “—” لعنوان من المستوى الثاني.

تنسيق ماركداون HTML النتيجة النهائية
عنوان من المستوى الأول
===============		 <h1>عنوان من المستوى الأول</h1>

عنوان من المستوى الأول
عنوان من المستوى الثاني
---------------		 <h2>عنوان من المستوى الثاني</h2>

عنوان من المستوى الثاني

أفضل الممارسات لكتابة العناوين

لا تتفق تطبيقات ماركداون على كيفية التعامل مع المسافة الموضوعة بين علامات المربع (#) ونص العنوان. للتوافق مع كل هذه التطبيقات، ضع دائمًا مسافة بين علامات المربع (#) ونص العنوان.

✅  افعل ❌  لا تفعل
# هذا عنوان

 		#هذا عنوان

يجب أيضًا ترك أسطر فارغة قبل العنوان وبعده للتوافقية (لضمان صحة التنسيق في كل البرامج).

✅  افعل ❌  لا تفعل 
حاول ترك أسطر فارغة قبل العنوان.. 


العنوان #

...وكذلك بعد العنوان.


دون الأسطر الفارغة قبل العنوان وبعده، قد لا يبدو التنسيق صحيحًا.

العنوان #
إياك أن تفعل هذا!

الفقرات

لإنشاء فقرات، أترك سطرًا فارغًا بعد كل فقرة كي تفصل سطرًا واحدًا أو أكثر من النص.

تنسيق ماركداون HTML النتيجة النهائية
أنا حقا أحب استخدام ماركداون.

أعتقد أنني سأستخدمها لتنسيق جميع مستنداتي من الآن فصاعدًا. 		<p>أنا حقا أحب استخدام ماركداون.</p>

<p>أعتقد أنني سأستخدمها لتنسيق جميع مستنداتي من الآن فصاعدًا.</p>

أنا حقا أحب استخدام ماركداون.

أعتقد أنني سأستخدمها لتنسيق جميع مستنداتي من الآن فصاعدًا.

أفضل ممارسات كتابة الفقرات

لا تضع مسافة بادئة سواء بالمسافات (Spaces) أو بأزرار Tabs في لوحة المفاتيح، إلا في حالة أنّ الفقرة في قائمة.

✅  افعل ❌  لا تفعل
لا تضع مسافة بادئة بزر المسافة ولا بأزرار tabs قبل فقراتك.

دع الأسطر محاذية لبداية الكتابة كهذا النص.

    قد يؤدي هذا الفراغ إلى مشاكل غير متوقعة في التنسيق.

  لا تضف مسافات في بداية الفقرات سواء بزر المسافة أو أزرار الtabs.

فواصل الأسطر

لإنشاء فاصل أسطر (<br>)، انقر على زر المسافة مرتين أو أكثر في نهاية السطر، ثم انتقل للسطر الجديد بالنقر على زر الرجوع للسطر Enter/Return.

تنسيق ماركداون HTML النتيجة النهائية
هذا هو السطر الأول. 
وهذا السطر الثاني. 		<p>هذا هو السطر الأول.<br>
وهذا السطر الثاني.</p>

هذا هو السطر الأول.
وهذا السطر الثاني.

أفضل ممارسات فواصل الأسطر

يمكنك استخدام مسافتين أو أكثر (يشار إليها عادةً باسم “المسافة البيضاء الزائدة”) لفواصل الأسطر في كل تطبيق ماركداون تقريبًا، ولكنها مسألة خلافية. من الصعب رؤية مسافة بيضاء زائدة في المحرر، وقد يضع العديد من الأشخاص مسافتين عن طريق الخطأ أو عن قصد بعد كل جملة. لهذا السبب، قد ترغب في استخدام شيء آخر غير المسافة البيضاء الزائدة لفواصل الأسطر. إذا كان تطبيق ماركداون الذي تستخدمه يدعم HTML، فيمكنك استخدام علامة <br> لفواصل الأسطر المستخدمة في HTML.

للتوافقية، استخدم مسافة بيضاء زائدة أو علامة <br> الخاصة بـ HTML في نهاية السطر.

هناك خياران آخران لا أوصي باستخدامهما. تتيح لك CommonMark وبعض لغات الترميز الخفيفة الأخرى كتابة شرطة مائلة للخلف (\) في نهاية السطر، ولكن لا تدعم جميع تطبيقات ماركداون هذا الخيار، لذا فهو ليس خيارًا جيدًا من ناحية التوافقية. وهناك تنويعتا ماركداون على الأقل لا تتطلبان أي شيء في نهاية السطر؛ فبمجرد نقر Enter/Return سيُنشأ فاصل سطر.

✅  افعل ❌  لا تفعل
السطر الأول مع مسافتين في آخر السطر.  
ثم السطر الثاني.

السطر الأول مع عنصر HTML الخاص بفاصل الأسطر<br>
ثم السطر الثاني.

 		السطر الأول مع شرطة مائلة للخلف.\
ثم السطر الثاني.

السطر الأول ولا شيء بعده.
ثم السطر الثاني.

التأكيد

يمكنك إضافة تأكيد النص بجعله سميك أو مائل.

سُمْك النص

لزيادة سمك النص، أضف نجمتين (**) أو شرطة سفلية (_) قبل وبعد الكلمة أو العبارة. ولزيادة سُمْكِ منتصف الكلمة لتأكيدها، أضف نجمتين دون مسافاتٍ حول الأحرف.

تنسيق ماركداون HTML النتيجة النهائية
أحب **النص السميك**. أحب <strong>النص السميك</strong>. أحب النص السميك.
أحب __النص السميك__. أحب <strong>النص السميك</strong>. أحب النص السميك.
ضبط اسم ابن **خَلْ**دون صاحب المقدمة بفتح الخاء فتسكين اللام. ضبط اسم ابن <strong>خَلْ</strong>دون صاحب المقدمة بفتح الخاء فتسكين اللام. ضبط اسم ابن خَلْدون صاحب المقدمة بفتح الخاء فتسكين اللام.

أفضل ممارسات لِسُمْكِ النص

لا تتفق تطبيقات ماركداون على كيفية التعامل مع الشرطة السفلية (_) في وسط الكلمة. للتوافقية، استخدم النجمة (*) لزيادة سُمْكِ وسط الكلمة لتأكيدها.

✅  افعل ❌  لا تفعل
لاحظ الرَّوم والإشمام في قوله تعالى:"مَا لَكَ لَا تَأْمَ**نَّ**ا عَلَى يُوسُفَ" لاحظ الرَّوم والإشمام في قوله تعالى:"مَا لَكَ لَا تَأْمَ__نَّ__ا عَلَى يُوسُفَ"

إمالة النص

لإمالة النص، أضف نجمة واحدة (*) أو شرطة سفلية واحدة (_) قبل وبعد الكلمة أو العبارة المراد إمالتها. لإمالة وسط الكلمة لتأكيدها، أضف نجمة واحدة (*) بدون مسافات حول الأحرف، بنفس طريقة سُمْكِ النص بالأعلى.

تنسيق ماركداون HTML النتيجة النهائية
هذا النص فيه *جزء مائل*. هذا النص فيه <em>جزء مائل</em>. هذا النص فيه جزء مائل.
هذا النص فيه _جزء مائل_. هذا النص فيه <em>جزء مائل</em>. هذا النص فيه جزء مائل.
ضبط اسم *سِيْ*بويه النحوي المعروف بكسر السين فتسكين الياء. ضبط اسم <em>سِيْ</em>ويه النحوي المعروف بكسر السين فتسكين الياء. ضبط اسم سِيْويه النحوي المعروف بكسر السين فتسكين الياء.

أفضل ممارسات إمالة النص

لا تتفق تطبيقات ماركداون على كيفية التعامل مع الشرطة السفلية (_) في وسط الكلمة. للتوافقية، استخدم النجمة (*) وسط الكلمة لإمالة الكلمة لتأكيدها.

✅  افعل ❌  لا تفعل
لاحظ الإمالة في قوله تعالى: "بسم الله مجر*ا*ها ومرساها". لاحظ الإمالة في قوله تعالى: "بسم الله مجر_ا_ها ومرساها".

زيادة سُمكِ النص وإمالته معًا

لتأكيد النص بتسميكه وإمالته في نفس الوقت، أضف ثلاث نجمات (***) أو ثلاث شرطات سفلية (___) قبل وبعد الكلمة أو العبارة. وكذلك لإمالة وزيادة سُمْكِ جزء من النص أو العبارة، أضف ثلاث نجمات دون مسافات حول الأحرف.

تنسيق ماركداون HTML النتيجة النهائية
هذا النص ***مهم جدًا***. هذا النص <strong><em>مهم جدًا</em></strong>. هذا النص مهم جدًا.
هذا النص ___مهم جدًا___. هذا النص <strong><em>مهم جدًا</em></strong>. هذا النص مهم جدًا.
هذا النص __*مهم جدًا*__. هذا النص <strong><em>مهم جدًا</em></strong>. هذا النص مهم جدًا.
هذا النص **_مهم جدًا_**. هذا النص <strong><em>مهم جدًا</em></strong>. هذا النص مهم جدًا.
في قوله تعالى: "فأسقينا***ك****موه" تعرب الكاف أنها ضمير متصل في محل نصب مفعول به. في قوله تعالى: "فأسقينا<strong><em>ك</em></strong>موه" تعرب الكاف أنها ضمير متصل في محل نصب مفعول به. في قوله تعالى: "فأسقيناكموه" تعرب الكاف أنها ضمير متصل في محل نصب مفعول به.

أفضل الممارسات لزيادة سمك النص وإمالته

لا تتفق تطبيقات ماركداون على كيفية التعامل مع الشرطة السفلية (_) في وسط الكلمة. للتوافقية، استخدم النجمة (*) وسط الكلمة للإمالة وزيادة السُمك لتأكيدها.

✅  افعل ❌  لا تفعل
في المثال: "أعطي***ت***ك القلم"، نجد أن إعراب التاء في أعطيتك هو ضمير متصل في محل رفع فاعل. في المثال: "أعطي___ت___ك القلم"، نجد أن إعراب التاء في أعطيتك هو ضمير متصل في محل رفع فاعل.

الاقتباسات

لإنشاء اقتباس، أضف > أمام الفقرة.

> الأطباء رائعون، ما دمت لا تحتاجهم.

ستكون النتيجة النهائية كهذه:

الأطباء رائعون، ما دمت لا تحتاجهم

الاقتباسات مع الفقرات المتعددة

يمكن أن تحتوي الاقتباسات على فقرات متعددة. أضف > على الأسطر الفارغة بين الفقرات لكي تحسب كتلة اقتباس واحدة.

> أمهلني الطبيب ستة أشهر لكي أعيش..
>
> ولكن عندما لم أستطع دفع فاتورة العلاج، أمهلني الطبيب ستة أشهر أخرى.

ستكون النتيجة النهائية كالتالي:

أمهلني الطبيب ستة أشهر لكي أعيش..

ولكن عندما لم أستطع دفع فاتورة العلاج، أمهلني الطبيب ستة أشهر أخرى.

الاقتباسات المتداخلة

يمكن للاقتباسات أن تكون متداخلة. أضف >> أمام الفقرة التي تريد أن تكون متداخلة داخل الفقرة الكبيرة.

قال ناقد الأفلام سعيد الحاج:

في فيلم Inception تكمن الحبكة في وجود حلم

داخله حلم آخر.

ستكون النتيجة النهائية كالتالي:

قال ناقد الأفلام سعيد الحاج:

في فيلم Inception تكمن الحبكة في وجود حلم

داخله حلم آخر

الاقتباسات مع العناصر الأخرى

يمكن أن تحتوي الاقتباسات على عناصر ماركداون أخرى منسّقة. لا يمكن استخدام جميع العناصر داخل هذه الاقتباسات، وستحتاج إلى التجربة لمعرفة العناصر التي تعمل.

تبدو النتائج ربع السنوية رائعة!

  • الإيرادات كانت مرتفعة.

  • الأرباح غير مسبوقة.

    كل شيء يمضي على ما يرام.

ستكون النتيجة النهائية كالتالي: كل شيء يمضي على ما يرام.

تبدو النتائج ربع السنوية رائعة!

  • الإيرادات كانت مرتفعة.
  • الأرباح غير مسبوقة.

كل شيء يمضي على ما يرام.

أفضل ممارسات الاقتباسات

للتوافقية، ضع أسطرًا فارغة قبل وبعد الاقتباس.

✅  افعل ❌  لا تفعل
حاول أن تترك سطرًا فارغًا قبل الاقتباس..

> هنا يقع الاقتباس

وسطرًا فارغًا بعد الاقتباس... 		دون أي سطر فارغ، قد لا يبدو التنسيق صحيحًا.
> هنا يقع الاقتباس
لا تفعل هذا!

القوائم

يمكنك ترتيب العناصر إلى قوائم مرقّمة (مرتّبة) ومنقطة (غير مرتّبة).

القوائم المرقّمة (المرتّبة)

لإنشاء قائمة مرقّمة، أضف أرقام العناصر متبوعة بنقاط. لا يجب أن تكون الأرقام بالترتيب العددي، ولكن يجب أن تبدأ القائمة بالرقم “واحد”.

بمعنى آخر، يمكن أن تبدأ بأي عدد فتكون الأعداد مستمرة من النقطة التي بدأت فيها؛ ويعني هذا أنك إذا بدأت من العدد “ثلاثة”، ثم أكملت القائمة، فستكون النتيحة النهائية تبدأ من العدد ثلاثة: 3. 4. 5. وهكذا.

تنسيق ماركداون HTML النتيجة النهائية
1. العنصر الأول
2. العنصر الثاني
3. العنصر الثالث
4. العنصر الرابع 		<ol>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
<li>العنصر الرابع</li>
</ol>
  1. العنصر الأول
  2. العنصر الثاني
  3. العنصر الثالث
  4. العنصر الرابع
1. العنصر الأول
1. العنصر الثاني
1. العنصر الثالث
1. العنصر الرابع 		<ol>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
<li>العنصر الرابع</li>
</ol>
  1. العنصر الأول
  2. العنصر الثاني
  3. العنصر الثالث
  4. العنصر الرابع
1. العنصر الأول
8. العنصر الثاني
3. العنصر الثالث
5. العنصر الرابع 		<ol>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
<li>العنصر الرابع</li>
</ol>
  1. العنصر الأول
  2. العنصر الثاني
  3. العنصر الثالث
  4. العنصر الرابع
1. العنصر الأول
2. العنصر الثاني
3. العنصر الثالث
    1. عنصر فرعي
    2. عنصر فرعي آخر
4. العنصر الرابع 		<ol>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث
<ol>
<li>عنصر فرعي</li>
<li>عنصر فرعي آخر</li>
</ol>
</li>
<li>العنصر الرابع</li>
</ol>
  1. العنصر الأول
  2. العنصر الثاني
  3. العنصر الثالث
    1. عنصر فرعي
    2. عنصر فرعي آخر
  4. العنصر الرابع

أفضل ممارسات القوائم المرتّبة (المرقّمة)

تتيح لك CommonMark وبعض لغات الترميز الخفيفة الأخرى استخدام القوس “)” محددًا بعد العدد بدلًا عن النقطة مثلًا “1) العنصر الأول“، ولكن لا تدعم جميع تطبيقات ماركداون هذا الخيار، لذا فهو ليس خيارًا جيدًا من منظور التوافقية. لذلك، استخدم النقاط فقط.

✅  افعل ❌  لا تفعل
1. العنصر الأول
2. العنصر الثاني 		1) العنصر الأول
2) العنصر الثاني

القوائم المنقّطة (غير المرتّبة)

لإنشاء قائمة منقّطة، أضف الشرطات (-) أو النجمات (*) أو علامات الجمع (+) أمام عناصر السطر. أضف مسافة بادئة أمام العنصر أو العناصر الفرعية لإنشاء قائمة متداخلة.

تنسيق ماركداون HTML النتيجة النهائية
- العنصر الأول
- العنصر الثاني
- العنصر الثالث
- العنصر الرابع 		<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
<li>العنصر الرابع</li>
</ul>
  • العنصر الأول
  • العنصر الثاني
  • العنصر الثالث
  • العنصر الرابع
* العنصر الأول
* العنصر الثاني
* العنصر الثالث
* العنصر الرابع 		<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
<li>العنصر الرابع</li>
</ul>
  • العنصر الأول
  • العنصر الثاني
  • العنصر الثالث
  • العنصر الرابع
+ العنصر الأول
+ العنصر الثاني
+ العنصر الثالث
+ العنصر الرابع 		<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
<li>العنصر الرابع</li>
</ul>
  • العنصر الأول
  • العنصر الثاني
  • العنصر الثالث
  • العنصر الرابع
- العنصر الأول
- العنصر الثاني
- العنصر الثالث
    - عنصر فرعي
    - عنصر فرعي آخر
- العنصر الرابع 		<ul>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث
<ul>
<li>عنصر فرعي</li>
<li>عنصر فرعي آخر</li>
</ul>
</li>
<li>العنصر الرابع</li>
</ul>
  • العنصر الأول
  • العنصر الثاني
  • العنصر الثالث
    • عنصر فرعي
    • عنصر فرعي آخر
  • العنصر الرابع

بدء عناصر القائمة المنقّطة بالأرقام

إذا كنت بحاجة إلى بدء عنصر قائمة منقّطة برقم متبوعًا بنقطة (دون أن تُعالَج كأنّها قائمة مرقّمة)، فيمكنك استخدام شرطة مائلة للخلف (\) لتخطي النقطة.

تنسيق ماركداون HTML النتيجة النهائية
- 1962\. ما أجمله من عام!
- أزعم أن عام 1963 كان ثاني الأعوام روعة. 		<ul>
<li>1962. ما أجمله من عام!</li>
<li>أزعم أن عام 1963 كان ثاني الأعوام روعة.</li>
</ul>
  • 1962. ما أجمله من عام!
  • أزعم أن عام 1963 كان ثاني الأعوام روعة.

أفضل ممارسات القوائم المنقطة

لا تتفق تطبيقات ماركداون على كيفية التعامل مع المحدّدات المختلفة (كالنجمة والشرطة ونحوهما) في نفس القائمة. للتوافقية، لا تخلط المحددات في نفس القائمة، بل اختر واحدة والتزم بها. <table class="table table-bordered">

✅  افعل ❌  لا تفعل - العنصر الأول
- العنصر الثاني
- العنصر الثالث
- العنصر الرابع + العنصر الأول
* العنصر الثاني
- العنصر الثالث
+ العنصر الرابع

</table>

إضافة العناصر للقوائم

لإضافة عنصر آخر في قائمة مع الحفاظ على استمرارية القائمة، أزح العنصر بإضافة مسافة بادئة تُقدّر بأربع مسافات (Spaces) أو زر Tab واحدة، كما هو موضّح في الأمثلة التالية.

تلميح: إذا لم تظهر الأشياء كما هو متوقّع، فتحقّق مرة أخرى من إزاحة العناصر في القائمة بإضافة مسافة بادئة بأربع مسافات (Spaces) أو نقرة Tab واحدة.

الفقرات

* هذا هو العنصر الأول في القائمة.
* وهذا العنصر الثاني في القائمة.
   وهنا أضيف فقرة تحت العنصر الثاني من القائمة.
* وهذا العنصر الثالث في القائمة.

ستكون النتيجة النهائية كالتالي:

  • هذا هو العنصر الأول في القائمة.
  • وهذا العنصر الثاني في القائمة. > سيدو الاقتباس في غاية الجمال أسفل العنصر الثاني

  • وهذا العنصر الثالث في القائمة.

    • _ هذا هو العنصر الأول في القائمة. • _ وهذا العنصر الثاني في القائمة. • وهنا أضيف فقرة تحت العنصر الثاني من القائمة. • * وهذا العنصر الثالث في القائمة.

الاقتباسات

* هذا هو العنصر الأول في القائمة.
* وهذا العنصر الثاني في القائمة.
    > سيبدو الاقتباس في غاية الجمال أسفل العنصر الثاني.
* وهذا العنصر الثالث في القائمة.

ستكون النتيجة النهائية كالتالي: • _ هذا هو العنصر الأول في القائمة. • _ وهذا العنصر الثاني في القائمة. • > سيبدو الاقتباس في غاية الجمال أسفل العنصر الثاني. • * وهذا العنصر الثالث في القائمة.

الكتل البرمجية

عادةً، توضع مسافة بادئة قبل الكتل البرمجية تقدّر بأربع مسافات (Spaces) أو زر Tab واحدة. عندما تكون النصوص البرمجية في قائمة، ضع مسافة بادئة لها ثماني مسافات (Spaces) أو علامَتَيْ Tab.

1. افتح الملف.
2. ابحث عن هذه القطعة البرمجية في السطر 21:

        <html>
          <head>
            <title>Test</title>
          </head>

3. عدّل العنوان ليناسب اسم موقعك.

ستكون النتيجة النهائية كالتالي:

  1. افتح الملف.

  2. ابحث عن هذه القطعة البرمجية في السطر 21:

    <html>
  <head>
    <title>Test</title>
  </head>
  3. عدّل العنوان ليناسب اسم موقعك.

الصور

1. افتح الملف الذي يحتوي الصورة المميزة للينكس.
2. تعجّب من جمالها.

    ![Tux, the Linux pinguin](https://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Tux_Classic_flat_look_v1.1.svg/414px-Tux_Classic_flat_look_v1.1.svg.png)

3. أغلق الملف.

ستكون النتيجة النهائية كالتالي:

  1. افتح الملف الذي يحتوي الصورة المميزة للينكس.
  2. تعجّب من جمالها. Tux, the Linux pinguin
  3. أغلق الملف.

القوائم

يمكنك الإزاحة للداخل بإضافة مسافة بادئة لقائمة منقّطة داخل قائمة مرقّمة، أو العكس.

1. العنصر الأول
2. العنصر الثاني
3. العنصر الثالث
    - عنصر فرعي
    - عنصر فرعي آخر
4. العنصر الرابع

ستكون النتيجة النهائية كالتالي:

  1. العنصر الأول
  2. العنصر الثاني
  3. العنصر الثالث
    • عنصر فرعي
    • عنصر فرعي آخر
  4. العنصر الرابع

الأكواد البرمجية

لتحديد كلمة أو عبارة أنها كود برمجي، ضعها بين الفاصلة العليا المائلة (`).

تنسيق ماركداون HTML النتيجة النهائية
في سطر الأوامر، اكتب `nano`. في سطر الأوامر، اكتب <code>nano</code>. في سطر الأوامر، اكتب nano.

تخطي الفاصلة العليا المائلة (Backticks)

إذا تضمّنت الكلمة أو العبارة التي تريد تحديدها أنها كود برمجي واحد أو أكثر من الفواصل العليا المائلة (backticks)، فيمكنك تجاوزها باحتواء الكلمة أو العبارة في بفاصلتين مزدوجتين (``).

تنسيق ماركداون HTML النتيجة النهائية
``استخدام `code` في ملف ماركداون الخاص بك.`` <code>استخدام `code` في ملف ماركداون الخاص بك.</code> استخدام `code` في ملف ماركداون الخاص بك.

الكتل البرمجية

لإنشاء كتل أكواد برمجية، ضع مسافة بادئة لكل سطر من الكتلة برمجية، بأربع مسافات (Spaces) على الأقل أو بزر Tab واحد.

   <html>
     <head>
     </head>
   </html>

[لاحظ الإزاحة قبل كتلة الأكواد البرمجية]

ستكون النتيجة النهائية كالتالي:

<html>
 <head>
 </head>
</html>
ملاحظة: لإنشاء كتل الأكواد البرمجية دون مسافة بادئة للأسطر، استخدم fenced code blocks. التي تحاط بعلامات الفاصلة العليا المائلة (```) أو هذه العلامات (~~~) لتمييزها عن بقية النص.

السطور الأفقية (الفواصل السطرية)

لإنشاء سطر أفقي، أضف ثلاث أو أكثر من النجمات (***)، أو الشرطات (---)، أو الشرطات السفلية (___)، وتكون أيًا من هذه العلامات على سطر بمفردها.

ستكون النتيجة النهائية متطابقة كالتالي:

أفضل ممارسات السطر الأفقي

للتوافقية اترك سطرًا فارغًا قبل وبعد السطر الأفقي.

✅  افعل ❌  لا تفعل
حاول ترك سطر فارغ قبل..

---

...وسطر آخر بعد السطر الأفقي. 		دون السطر الفارغ، سيُنسّق هذا عنوانًا.
---
لا تفعل هذا!

الروابط

لإنشاء رابط، ضع نص الرابط بين قوسين. مثلًا، [Google] ثم أتبعه فورًا بالرابط الفعلي بين قوسين (https://google.com).

محرك البحث المفضل لديّ هو [Google]‏(https://google.com)

ستكون النتيجة النهائية كالتالي: محرك البحث المفضل لديّ هو Google.

ملاحظة: لإنشاء رابط يصل بعنصر في نفس الصفحة، طالع الارتباط مع معرفات العناوين.

إضافة العناوين (للروابط)

يمكنك اختياريًا إضافة عنوان للرابط. سيظهر هذا تلميحًا (Tooltip) عندما يحوم مؤشر الماوس على الرابط (Hover). لإضافة عنوان، ضَمّنه بين قوسين بعد الرابط.

محرك البحث المفضل لديّ هو [Google](http://google.com "أشهر محركات البحث على الإطلاق").

ستكون النتيجة النهائية كالتالي: محرك البحث المفضل لديّ هو Google.

الروابط وعناوين البريد الإلكتروني

لأجل التحويل السريع لمسار ويب أو عنوان بريد إلكتروني إلى رابط، ضمّنه بين قوسي زاوية (<>). https://guide.dawin.io fake@example.com ستكون النتيجة النهائية كالتالي: ​​https://guide.dawin.io
fake@example.com

تنسيق الروابط

للتأكيد على الروابط (بإمالة الخط أو زيادة سُمْكِه)، أضف النجمات قبل الأقواس وبعدها. لتنسيق الروابط كالأكواد، أضف الفاصلة العليا المائلة (Backticks) بين القوسين المربعين.

أحب هذا الموقع **[EFF](https://eff.org)**.<br/>
هذا هو *[دليل ماركداون](https://guide.dawin.io)*.<br/>
راجع قسم [`الكود البرمجي`](#code).

ستكون النتيجة النهائية كالتالي: أحب هذا الموقع EFF.
هذا هو دليل ماركداون.
راجع قسم الكود البرمجي.

الروابط ذات الأسلوب المرجعي

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

تنسيق الجزء الأول من الرابط

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

التسمية الموجودة في المجموعة الثانية من الأقواس (التي تشير للرابط الأصلي الموجود في مكان ما على المستند) ليست حسّاسة لحالة الأحرف (الكبيرة والصغيرة في الأحرف اللاتينية) ويمكن أن تتضمن أحرفًا أو أرقامًا أو مسافات أو علامات ترقيم. هذا يعني أن تنسيقات المثالَين التالِيَين متكافئة من ناحية الجزء الأول من الرابط: • [محرر دوّن][1] • [محرر دوّن] [1]

تنسيق الجزء الثاني من الرابط

يُنسّق الجزء الثاني من الروابط ذات الأسلوب المرجعي بالِسمَات الآتية:

  1. التسمية، بين قوسين مربعين، متبوعة مباشرة بنقطتين ومسافة واحدة على الأقل. مثلًا، “[مثال على التسمية]: ”.
  2. الرابط، والذي يمكنك (اختياريًا) وضعه بين قوسي زاوية.
  3. العنوان الاختياري للرابط، والذي يمكن تضمينه بين علاماتي اقتباس مزدوجة “” أو مفردة ‘’ أو قوسين ().

هذا يعني أن تنسيقات الأمثلة التالية جميعها مكافئة تقريبًا للجزء الثاني من الرابط:

  • [1]: https://www.dawin.io/
  • [1]: https://www.dawin.io/ "اكتب وحرّر مستنداتك بحروف عربية"
  • [1]: https://www.dawin.io/ 'اكتب وحرّر مستنداتك بحروف عربية'
  • [1]: https://www.dawin.io/ (اكتب وحرّر مستنداتك بحروف عربية)
  • [1]: <https://www.dawin.io/> "اكتب وحرّر مستنداتك بحروف عربية"
  • [1]: <https://www.dawin.io/> 'اكتب وحرّر مستنداتك بحروف عربية'
  • [1]: <https://www.dawin.io/> (اكتب وحرّر مستنداتك بحروف عربية)

بإمكانك وضع هذا الجزء الثاني من الرابط في أي مكان في مستند ماركداون الخاص بك. يضعها بعض الناس مباشرةً بعد الفقرة التي تظهر فيها، ويضعها آخرون في نهاية المستند (كالحواشي السفلية).

مثال مكتمل يضع الأجزاء معًا

لنفترض أنك أضفت رابطًا فعليًا لفقرة، فإنها ستبدو هكذا في ماركداون:

مُحرّر [دَوِّن](<https://www.dawin.io> "أوّل محرّر نصوص ماركداون عربي بمعاينة مباشرة") صُمّم بأيادٍ عربية ليكون مخصصًا للكتاب والمدونين، يساعدهم على الإلهام ويمَكّنهم من تحرير مقالات باللغة العربية ذات جودة عالية.

بالرغم من أن الرابط يضيف معلومات مثيرة للاهتمام، إلا أنه لا يضيف كثيرًا للنص العادي كما أنه يجعل النص أصعب في القراءة. لإصلاح ذلك، يمكنك تنسيق الرابط مثل هذا بدلاً من التنسيق السابق:

مُحرّر [دَوِّن][1] صُمّم بأيادٍ عربية ليكون مخصصًا للكتاب والمدونين، يساعدهم على الإلهام ويمَكّنهم من تحرير مقالات باللغة العربية ذات جودة عالية.

[1]: <https://www.dawin.io> "أوّل محرّر نصوص ماركداون عربي بمعاينة مباشرة"

في كلتا الحالتين أعلاه، سيكون الناتج المعروض متطابقًا: مُحرّر دوّن صُمّم بأيادٍ عربية ليكون مخصصًا للكتاب والمدونين، يساعدهم على الإلهام ويمَكّنهم من تحرير مقالات باللغة العربية ذات جودة عالية.

وسيكون ترميز HTML للرابط كالتالي:

<a href="https://www.dawin.io/" title="أوّل محرّر نصوص ماركداون عربي بمعاينة مباشرة">دَوِّن</a>

أفضل ممارسات الروابط

لا تتفق تطبيقات ماركداون على كيفية التعامل مع المسافات في الرابط. للتوافقية، حاول استبدال أي مسافات برمز %20.

✅  افعل ❌  لا تفعل
[عنوان الرابط](https://www.example.com/my%20great%20page) [عنوان الرابط](https://www.example.com/my great page)

الصور

لإضافة صورة، أضف علامة تعجب (!)، متبوعة بنص بديل بين قوسين (يظهر في حالة تعذر ظهور الصورة)، ثم مسار الصورة بين قوسين مربعين. يمكنك اختياريًا إضافة عنوان للصورة بعد الأقواس؛ الذي يظهر عندما يحوم مؤشر الماوس (Hover) على الصورة.

![صورة يوغرطة بن علي رحمه الله](https://i.suar.me/9AdO8/ "صورة المبرمج والناشط التقني الراحل يوغرطة بن علي")

ستكون النتيجة النهائية كالتالي:

صورة يوغرطة بن علي

إضافة الروابط للصور

لإضافة الروابط للصور، أحط تنسيق ماركداون للصور بالأقواس المربعة []، ثم أضف الرابط بالأقواس الهلالية ().

[![شعار شركة صخر](https://upload.wikimedia.org/wikipedia/commons/5/53/Sakhr.jpg "من أكبر الشركات البرمجية العربية")](https://ar.wikipedia.org/wiki/%D8%B5%D8%AE%D8%B1_(%D8%B4%D8%B1%D9%83%D8%A9))

ستكون النتيجة النهائية كالتالي:

شعار شركة صخر

تخطي الحروف

لعرض حرف (من الحروف المفتاحية التي تُعَالج مباشرة في ماركداون) دون أن يكون له أثر على التنسيق وإنما يظهر كما هو، أضف شرطة مائلة للخلف (\) أمام الحرف.

\* لولا الشرطة المائلة للخلف، لكان هذا النص جزءًا من قائمة منقطة

ستكون النتيجة النهائية كالتالي: * لولا الشرطة المائلة للخلف، لكان هذا النص جزءًا من قائمة منقطة.

الحروف التي يمكنك تخطيها

يمكنك استخدام الشرطة المائلة للخلف لتخطي الأحرف التالية.

الحرف الاسم
\ شرطة مائلة للخلف
` الفاصلة العليا المائلة (انظر أيضًا تخطي الفاصلة العليا في الكود)
* نجمة
_ شرطة سفلية
{ } أقواس معقوفة / مزخرفة
[ ] أقواس مربعة
< > أقواس الزاوية
( ) أقواس هلالية
# علامة المربع (أو الشبّاك)
+ علامة الجمع
- علامة الطرح (الشرطة)
. نقطة
! علامة التعجب
| علامة الأنبوب (انظر أيضًا تخطي علامة الأنبوب في الجداول)

HTML

تسمح لك العديد من تطبيقات ماركداون باستخدام وسوم HTML في نص منسق بماركداون. هذا مفيد إذا كنت تفضل بعض علامات HTML على قواعد ماركداون. مثلًا، يجد بعض الناس أنه من الأسهل استخدام وسوم HTML للصور. يعد استخدام HTML مفيدًا أيضًا عندما تحتاج إلى تغيير خصائص العنصر، مثل تحديد لون النص أو تغيير عرض الصورة.

لاستخدام HTML، ضع الوسوم مع النص في ملف ماركداون الخاص بك.

هذه الكلمة **سميكة**، وهذه الكلمة <em>مائلة</em>.

ستكون النتيجة النهائية كالتالي: هذه الكلمة سميكة، وهذه الكلمة مائلة.

أفضل ممارسات HTML

لأسباب تتعلق بالحماية، لا تدعم جميع تطبيقات ماركداون HTML في مستندات ماركداون. عند الشك، تحقّق من توثيق تطبيق ماركداون الخاص بك. تدعم بعض التطبيقات مجموعة محدودة فقط من وسوم HTML.

استخدم أسطرًا فارغة لفصل عناصر HTML على التي تأتي قطعًا كاملة (Block-level HTML) من المحتوى المحيط بها مثل وسوم <div> و <table> و <pre> و <p>. حاول ألا تضع مسافة بادئة للوسوم بأزرار Tab أو مسافات (Spaces)؛ فقد تتداخل مع التنسيق.

لا يمكنك استخدام قواعد ماركداون داخل علامات HTML على التي تأتي قطعًا كاملة. مثلًا، لن يعمل المثال التالي:

<p> *هذا نص مائل* وهذا ** نص غامق ** </p>.

وإنما سيظهر بالشكل الآتي: <p> *هذا نص مائل* وهذا ** نص غامق ** </p>. لاحظ أنه لم يعرض إلا تنسيق الفقرة <p> وأما ما بداخلها من علامات عُرضت كما هي.

هل تريد معرفة المزيد عن Markdown؟

لا تتوقف الآن! 🚀 قم بتمييز مستودع GitHub بنجمة ثم أدخل عنوان بريدك الإلكتروني أدناه لتلقي دروس Markdown التعليمية الجديدة عبر البريد الإلكتروني. نحن لا نرسل بريدا مزعجا!