شرح دليل ماركداون ومقدّمة حول Markdown
إنّ لغة ماركداون (Markdown) هي لغة ويب تنسيقية. فبدلاً من الكتابة بلغة HTML يمكن الكتابة بهذه اللغة وهي أبسط بكثير من HTML وسهلة القراءة والكتابة، وبوجود مفسر فسيتحوّل تنسيق markdown إلى HTML.
يجب العلم بأن الكثير من المواقع التي نستخدمها تدعم تفسير تنسيق markdown، فيمكن استخدام هذه اللغة في ووردبريس ومشاريع أخرى، وطبعاً هي لغة أساسية في Github.
قام كل من John Gruber و Aaron Swartz بابتكار تنسيق Markdown سنة 2004 بهدف تقديم حل لتسهيل كتابة وتنسيق النصوص على الويب. يعتمد هذا التّنسيق على بيانات نصية فقط دون أي تشفير (plain text)، كما أن استخدامها لا يتطلب تعلم أي أكواد أو اختصارات معقدة؛ حتى المبتدئين يمكنهم تعلم كيفية استخدامه بأنفسهم.
والآن، لكي نتعلم هذه اللغة فكل ما علينا تعلمه هو بعض الأكواد التي تتضمنها اللغة. هنا حاولت جمع كل الأكواد المستخدمة في هذه اللغة (فهي ليست لغة ضخمة).
النص العادي يكتب بدون الحاجة لأي أكواد. مع ملاحظة بسيطة هو أنك يجب أن تضع سطر فارغ بين الفقرة والأخرى لكي تُقرأ على أنها بداية سطر جديد. أي بدل الضغط على enter
للانتقال للسطر الجديد ستضغط على enter
مرتين لترك سطر فارغ وبالتالي ليفهم المفسر أنك تريد الانتقال لسطر جديد.
لكتابة العناوين نضع الرمز #
مرة واحدة أو أكثر قبل العنوان (لا تنس الفراغ بين الرمز والعنوان):
وما إلى ذلك .. مثلاً العنوان الرئيسي في هذه الصفحة هو "كيفية التنسيق (الأكواد)" والعنوان الفرعي الأول هو "العناوين".
لكتابة نص مقتبس بلغة markdown (أو عرض نص كملاحظة كما أفعل أنا هنا) نضع الرمز >
قبل النص المقتبس، وأيضاً يجب الانتباه للفراغ بين الرمز والكتابة:
سيكون الناتج:
هذا عبارة عن نص مقتبس
لجعل بعض الكلمات تظهر بشكل عريض أو مائل نستخدم الرمز *
كما يلي:
هذه الكلمة مكتوبة بشكل عريض وهذه مكتوبة بشكل مائل
الناتج:
هذه الكلمة مكتوبة بشكل عريض وهذه مكتوبة بشكل مائل
ملاحظة: هناك رمز آخر يستخدم لنفس الغرض وهو الشرطة السفلية _
وبنفس الطريقة المذكورة.
للقائمة المنقطة نستخدم الرمز *
ثم فراغ ثم النص. كذلك الرمز -
يستخدم لنفس الغرض
الناتج:
للقائمة المُرّقمة نستخدم الأرقام. حيث نضع بعد الرقم نقطة .
ثم فراغ ثم النص
الناتج:
ملاحظة: هناك خطأ يرتكبه البعض ولا يعرفوا السبب، مثلاً لو وضعنا نص أسفل عنصر القائمة 1 والذي يشرح هذا العنصر ثم نصاً تحت عنصر القائمة 2 ليشرحه وهكذا، عند المعاينة ستجد النتيجة على الشكل :
نص شرح للعنصر1
نص شرح للعنصر 2
نص شرح للعنصر 3
هل لاحظت أن الترقيم بات 1 وأيضاً 1 و 1 !! لماذا؟ في الواقع يجب وضع أربعة فراغات على الأقل قبل نص الشرح وذلك لكي يفهم المفسر أن النص هو تابع للعنصر 1 وبالتالي لا يعيد الترقيم من الأول وكأننا بدأنا بقائمة جديدة. عند وضع 4 فراغات قبل كل عنصر ستُحل المشكلة:
عنصر قائمة 1
نص شرح للعنصر1
عنصر قائمة 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 في محررات أخرى، يمكن تحديد ذلك من إعدادات محرر النصوص لديك (مثل المفكرة - ولكنها برنامج بدائي بعض الشيئ)
لكتابة الروابط بلغة ماركداون نضع نص الرابط بين قوسين متوسطين [ ]
وبعدها مباشرة قوسين صغيرين ( )
يكون الرابط ضمنهم.
والناتج:
ماذا عن الصورة؟
لوضع صورة نقوم بنفس الكتابة السابقة ولكن يسبقها إشارة التعجب !
، يكون الشكل:
![نص بديل للصورة](رابط الصورة "نص توضيح اختياري")
ملاحظة: يفيد النص البديل في توضيح محتوى الصورة لمحركات البحث، فلا تهمله.
لعرض الرابط نفسه للضغط عليه، نضع الرابط بين رمزي <
و >
الناتج:
لإظهار خط أفقي في الصفحة نضع ثلاث نجمات أو أكثر ***
، فيظهر :
لكتابة جدول بلغة الماركداون نستخدم الرمز |
(يُكتب هذا الرمز بالضغط على زر
<kbd> shift </kbd>
وزر
<kbd> </kbd>
والذي يكون فوق زر الـ
<kbd> Enter </kbd>
)، يجب أن تكون كل خانة في الجدول محاطة بالرمز |
من الجهتين:
الناتج:
عنوان غليظ | عنوان غليظ | عنوان غليظ |
---|---|---|
عنصر | عنصر | عنصر |
عنصر | عنصر | عنصر ما |
لاحظ أن العنوان الغليظ ظهر (بشكل غليظ) لأننا وضعنا أسفله 3 شرطات -
أو أكثر.
يمكن الكتابة بلغة html داخل لغة Markdown ، فلو وجدت أن هناك ما ينقص لغة markdown فلا بأس من استخدام أكواد html بداخل التنسيق
هل تريد عرض رموز ماركداون نفسها؟ أي كيف سأعرض مثلاً الرمز |
ضمن الجدول؟ يمكن ذلك باستخدام الرمز ` قبل رمز ماركداون المخصص.
إذا أردت طباعة الرمز `
كما تشاهد الآن فقم بإحاطته بعلامتين `
مزدوجة أي `` ``
وإذا أردت طباعة رمزين منه بالشكل هذا فقم بإحاطته برقم أكبر (أي علامتين ثلاثية) وهكذا..
تُستخدم لغة التنسيق CSS بجانب لغة ماركداون لإظهار المحتوى بالشكل المطلوب (لتلوين خانات جدول ماركدوان، لتلوين حقل الإقتباس، وما إلى ذلك ..) لو أعجبك الإظهار هنا، أي طريقة إظهار الأكواد والاقتباسات فيمكنك أخذ ملف التنسيق الخاص بالموقع الموجود هنا