دليل ماركداون

شرح دليل ماركداون ومقدّمة حول Markdown


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

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

قام كل من John Gruber و Aaron Swartz بابتكار تنسيق Markdown سنة 2004 بهدف تقديم حل لتسهيل كتابة وتنسيق النصوص على الويب. يعتمد هذا التّنسيق على بيانات نصية فقط دون أي تشفير (plain text)، كما أن استخدامها لا يتطلب تعلم أي أكواد أو اختصارات معقدة؛ حتى المبتدئين يمكنهم تعلم كيفية استخدامه بأنفسهم.

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

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

النص العادي

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

العناوين

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

# عنوان رئيسي

## عنوان فرعي 1

### عنوان فرعي 2

#### عنوان فرعي 3

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

الاقتباس

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

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

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

نمط النص

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

الناتج:

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

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

القوائم

قائمة منقطة

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

الناتج:

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

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

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

الناتج:

  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 فراغات قبل كل سطر برمجي وبالتالي يكون الناتج:

	This is a code line

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

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

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

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

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

الروابط

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

والناتج:

محرر دوّن

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

لوضع صورة نقوم بنفس الكتابة السابقة ولكن يسبقها إشارة التعجب ! ، يكون الشكل: ![نص بديل للصورة](رابط الصورة "نص توضيح اختياري")

صورة الترخيص

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

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

الناتج:

https://dawin.io

خط أفقي

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


الجداول

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

الناتج:

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

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

ملاحظات

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

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

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

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


المصادر وللإستفادة أكثر