منشور

أساسيات لغة ماركداون Markdown

تعلّم لغة Markdown في خمس دقائق بشكل كامل، جميع أكواد لغة ماركداون ستجدها هنا

نُشر حُدّث
Moeditor by Schockwellenreiter is licensed under CC BY-NC-ND 2.0
Moeditor by Schockwellenreiter is licensed under CC BY-NC-ND 2.0
بواسطة ملهم الإبراهيم
6 دقائق قراءة

إنّ لغة ماركداون (Markdown) هي لغة وب تنسيقية. فبدلاً من الكتابة بلغة HTML يمكن الكتابة بهذه اللغة وهي أبسط بكثير من html وسهلة القراءة والكتابة، وبوجود مفسر فسيتم تحويل تنسيق markdown إلى html.

يجب العلم بأن الكثير من المواقع التي نستخدمها تدعم تفسير تنسيق markdown، فيمكن استخدام هذه اللغة في ووردبريس ومشاريع أخرى، وطبعاً هي لغة أساسية في github.

كيفية التنسيق

والآن، لكي نتعلم هذه اللغة فكل ما علينا تعلمه هو بعض الأكواد التي تتضمنها اللغة. هنا حاولت جمع كل الأكواد المستخدمة في هذه اللغة (فهي ليست لغة ضخمة)

النص العادي

النص العادي يكتب بدون الحاجة لأي أكواد. مع ملاحظة بسيطة هو أنك يجب أن تضع سطر فارغ بين الفقرة والأخرى لكي تُقرأ على أنها بداية سطر جديد. أي بدل الضغط على enter للانتقال للسطر الجديد ستضغط على enter مرتين لترك سطر فارغ وبالتالي ليفهم المفسر أنك تريد الانتقال لسطر جديد.

العناوين

لكتابة العناوين نضع الرمز # مرة واحدة أو أكثر قبل العنوان (لا تنس الفراغ بين الرمز والعنوان):


# عنوان رئيسي
## عنوان فرعي 1
### عنوان فرعي 2
#### عنوان فرعي 3

وما إلى ذلك .. مثلاً العنوان الرئيسي في هذه الصفحة هو “كيفية التنسيق (الأكواد)” والعنوان الفرعي الأول هو “العناوين”.

الاقتباس

لكتابة نص مقتبس بلغة markdown (أو عرض نص كملاحظة كما أفعل أنا هنا) نضع الرمز > قبل النص المقتبس، وأيضاً يجب الانتباه للفراغ بين الرمز والكتابة:

> هذا عبارة عن نص مقتبس

سيكون الناتج:

هذا عبارة عن نص مقتبس

نمط النص

لجعل بعض الكلمات تظهر بشكل عريض أو مائل نستخدم الرمز * كما يلي:

هذه الكلمة مكتوبة بشكل **عريض** وهذه مكتوبة بشكل *مائل*

الناتج:

هذه الكلمة مكتوبة بشكل عريض وهذه مكتوبة بشكل مائل

ملاحظة: هناك رمز آخر يستخدم لنفس الغرض وهو الشرطة السفلية _ وبنفس الطريقة المذكورة.

القوائم

قائمة منقطة

للقائمة المنقطة نستخدم الرمز * ثم فراغ ثم النص. كذلك الرمز - يستخدم لنفس الغرض

* عنصر قائمة
* عنصر قائمة
* عنصر قائمة

الناتج:

  • عنصر قائمة
  • عنصر قائمة
  • عنصر قائمة

قائمة مُرقّمة

للقائمة المُرّقمة نستخدم الأرقام. حيث نضع بعد الرقم نقطة . ثم فراغ ثم النص

1. عنصر قائمة 1
2. عنصر قائمة 2
3. عنصر قائمة 3

الناتج:

  1. عنصر قائمة 1
  2. عنصر قائمة 2
  3. عنصر قائمة 3

ملاحظة: هناك خطأ يرتكبه البعض ولا يعرفوا السبب، مثلاً لو وضعنا نص أسفل عنصر القائمة 1 والذي يشرح هذا العنصر ثم نصاً تحت عنصر القائمة 2 ليشرحه وهكذا، عند المعاينة ستجد النتيجة على الشكل :

  1. عنصر قائمة 1

نص شرح للعنصر1

  1. عنصر قائمة 2

نص شرح للعنصر 2

  1. عنصر قائمة 3

نص شرح للعنصر 3

هل لاحظت أن الترقيم بات 1 وأيضاً 1 و 1 !! لماذا؟ في الواقع يجب وضع أربعة فراغات على الأقل قبل نص الشرح وذلك لكي يفهم المفسر أن النص هو تابع للعنصر 1 وبالتالي لا يعيد الترقيم من الأول وكأننا بدأنا بقائمة جديدة. عند وضع 4 فراغات قبل كل عنصر ستُحل المشكلة:

  1. عنصر قائمة 1

    نص شرح للعنصر1

  2. عنصر قائمة 2

    نص شرح للعنصر 2

  3. عنصر قائمة 3

    نص شرح للعنصر 3

قوائم متداخلة

		1. عنصر 1
			1. عنصر مُرقّم تابع للعنصر 1
			2. عنصر مرقم تابع للعنصر 1
		2. عنصر 2
			* عنصر غير مرقم تابع للعنصر 2
			  * عنصر غير مرقم تابع للعنصر الذي يسبقه
			  * عنصر غير مرقم تابع لقبل سابقه
		3. عنصر 3

الناتج:

  1. عنصر 1
    1. عنصر مُرقّم تابع للعنصر 1
    2. عنصر مرقم تابع للعنصر 1
  2. عنصر 2
    • عنصر غير مرقم تابع للعنصر 2
      • عنصر غير مرقم تابع للعنصر الذي يسبقه
      • عنصر غير مرقم تابع لقبل سابقه
  3. عنصر 3

ملاحظة: لقد وضعت هنا فراغين فقط بدلاً من 4 بين العنصر الفرعي والعنصر التابع له، وذلك لكي لا يسبق العنصر الذي من الدرجة الثالثة 8 فراغات وبالتالي يُفهم بشكل آخر، اقرأ الفقرة التالية

الأكواد

نحتاج أحياناً لتضمين الأكواد في المقال وذلك عند كتابة شرح للغة برمجة معينة أو ما شابه. لتضمين أسطر برمجية نضع 8 فراغات قبل كل سطر برمجي وبالتالي يكون الناتج:

1

	This is a code line

ولكن أحياناً نحتاج أيضا لإظهار كلمة واحدة ضمن النص على أنه وسم أو جزء من كود، أي ماذا عن هذه الكلمة التي على شكل كود . كيف كتبتها؟

ماذا عن هذه الكلمة التي على شكل `كود` . كيف كتبتها؟

هل وصلت الفكرة؟

ملاحظة: ألم تجد الرمز ` في لوحة المفاتيح؟ سأوفر عليك عناء البحث .. إنه الزر ذ ولكن عندما تكون لغة الكتابة الإنجليزية.

ملاحظة2: لوضع 4 أو 8 فراغات يمكن استخدام زر الـ Tab والذي يكون 4 فراغات في بعض محررات النصوص على جهازك أو 8 في محررات أخرى، يمكن تحديد ذلك من إعدادات محرر النصوص لديك (مثل المفكرة - ولكنها برنامج بدائي بعض الشيئ)

الروابط

لكتابة الروابط بلغة ماركداون نضع نص الرابط بين قوسين متوسطين [ ] وبعدها مباشرة قوسين صغيرين ( ) يكون الرابط ضمنهم.

[موقع ملهم](http://mulham.github.io)

والناتج:

موقع ملهم

ماذا عن الصورة؟

لوضع صورة نقوم بنفس الكتابة السابقة ولكن يسبقها إشارة التعجب ! ، يكون الشكل:

![نص بديل للصورة](رابط الصورة "نص توضيح اختياري")


![صورة الترخيص](https://mulham.github.io/assets/ccl.png "رمز رخصة الموقع")

الناتج:

صورة الترخيص

ملاحظة: يفيد النص البديل في توضيح محتوى الصورة لمحركات البحث، فلا تهمله.

لعرض الرابط نفسه للضغط عليه، نضع الرابط بين رمزي < و > أي:

<http://mulham.github.io>

الناتج:

http://mulham.github.io

خط أفقي

لإظهار خط أفقي في الصفحة نضع ثلاث نجمات أو أكثر *** ، فيظهر :

الجداول

لكتابة جدول بلغة الماركداون نستخدم الرمز | (يُكتب هذا الرمز بالضغط على زر shift وزر \ والذي يكون فوق زر الـ Enter )، يجب أن تكون كل خانة في الجدول محاطة بالرمز | من الجهتين:


| عنوان غليظ | عنوان غليظ | عنوان غليظ |
|------------| ---------- | ---------- |
| عنصر | عنصر | عنصر |
| عنصر | عنصر | عنصر ما |

الناتج:

عنوان غليظ عنوان غليظ عنوان غليظ
عنصر عنصر عنصر
عنصر عنصر عنصر ما

لاحظ أن العنوان الغليظ ظهر (بشكل غليظ) لأننا وضعنا أسفله 3 شرطات - أو أكثر.

التعليقات

يمكن كتابة تعليق في الملف النصي بحيث يظهر فقط للمحرر، ولكنه لن يظهر عن التنفيذ على صفحة الوب مثلًا. يُكتب التعليق بالشكل التالي:

[comment]: # (هذا عبارة عن تعليق لا يظهر للقارئ)

ملاحظات

  • يمكن الكتابة بلغة html داخل لغة Markdown ، فلو وجدت أن هناك ما ينقص لغة markdown فلا بأس من استخدام أكواد html بداخل التنسيق

  • هل تريد عرض رموز ماركداون نفسها؟ أي كيف سأعرض مثلاً الرمز | ضمن الجدول؟ يمكن ذلك باستخدام الرمز \ قبل رمز ماركداون المخصص.

  • لكتابة تعليق في لغة ماركداون بحيث لا يتم إظهاره في العرض

[//]: # (التعليق هنا)

  • إذا أردت طباعة الرمز ` كما تشاهد الآن فقم بإحاطته بعلامتين ` مزدوجة أي `` `` وإذا أردت طباعة رمزين منه بالشكل هذا فقم بإحاطته برقم أكبر (أي علامتين ثلاثية) وهكذا..

  • لتجربة كود ماركداون ومعاينته مباشرة يمكن استخدام صفحة مارك داون بالعربي مع العلم أنها غير فعالة تماما فهناك بعض الأمور لا يتم تفسيرها في حين أن ماركداون يقبلها ويفهمها. (تحديث: يمكن استخدام مُحرّر دَوِّن لهذا الغرض أيضًا)

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

  • تُستخدم لغة التنسيق CSS بجانب لغة ماركداون لإظهار المحتوى بالشكل المطلوب (لتلوين خانات جدول ماركدوان، لتلوين حقل الإقتباس، وما إلى ذلك ..) لو أعجبك الإظهار هنا، أي طريقة إظهار الأكواد والاقتباسات فيمكنك أخذ ملفات التنسيق الخاصة بالموقع. ستجد القالب كله هنا

Markdown
هذا المنشور تحت ترخيص CC BY 4.0 بواسطة المؤلف.