Markdown: البداية السريعة مع Markdown واختيار المحرر

لا تحتاج إلى أي برامج معقدة — يمكن لأي محرر نصوص كتابة Markdown، لكن المحرر المناسب يضاعف إنتاجيتك.

1. ما ستتعلمه

• كيفية اختيار محرر Markdown الذي يناسب احتياجاتك
• إنشاء وحفظ أول ملف .md لك
• استخدام المعاينة المباشرة
• سير العمل الأساسي لـ Markdown
• إيجابيات وسلبيات المحررات الشائعة

2. قصة حقيقية لمبتدئ

(1) نقطة الألم: لم أعرف أي برنامج أستخدم

أرادت ماري تعلم Markdown. حمّلت ثلاثة محررات لتجربتها، وكان لكل منها واجهة م��تلفة تمامًا: أحدها يعرض نصًا عاديًا، وآخر يعرض تنسيقًا مباشرًا، وثالث يشبه محرر التعليمات البرمجية. أمضت يومين في مقارنة الأدوات دون أن تكتب كلمة واحدة.

(2) الحل: اختر محررًا وابدأ الكتابة فقط

اقترح زميل: "ابدأ بـ VS Code، ثبّت إضافة Markdown، واكتب مع المعاينة." أمضت ماري 10 دقائق في الإعداد، ثم فتحت ملف .md وبدأت الكتابة. عندما رأت كتابتها على اليسار والمخرجات الجميلة تظهر على اليمين في الوقت الفعلي، فهمت فورًا جاذبية Markdown. في يومها الأول، كتبت ثلاث ملاحظات تقنية.

3. أنواع محررات Markdown

تنقسم محررات Markdown إلى ثلاث فئات، كل منها تناسب مستخدمين مختلفين:

graph TB
    A[محررات Markdown] --> B[محررات النصوص العادية]
    A --> C[المحررات المخصصة]
    A --> D[المحررات عبر الإنترنت]
    B --> E[VS Code / Sublime Text]
    C --> F[Typora / Obsidian]
    D --> G[StackEdit / محررات عربية]

graph TB
    A[محررات Markdown] --> B[محررات النصوص العادية]
    A --> C[المحررات المخصصة]
    A --> D[المحررات عبر الإنترنت]
    B --> E[VS Code / Sublime Text]
    C --> F[Typora / Obsidian]
    D --> G[StackEdit / محررات عربية]

(1) VS Code — الخيار الأول للمطور

VS Code هو محرر التعليمات البرمجية الأكثر شيوعًا اليوم، ومع الإضافات، يصبح محرر Markdown قويًا:

الإضافات الموصى بها:
- Markdown All in One (اختصارات، جدول محتويات، تنسيق تلقائي)
- Markdown Preview Enhanced (معاينة محسنة)
- Paste Image (حفظ تلقائي للصور الملصقة)

▶ مثال: ثلاثة محررات تفتح نفس ملف Markdown

VS Code: المصدر على اليسار + المعاينة المباشرة على اليمين (عرض مقسم)
Typora: ما تراه هو ما تحصل عليه، بدون عرض مقسم (المصدر مخفي)
Notepad: نص عادي، بدون تنسيق (المصدر فقط)

فهم كيفية عمل المحررات المختلفة يساعدك في اختيار أداة الكتابة المناسبة لاحتياجاتك.

(2) Typora — الخيار الأنيق لما تراه هو ما تحصل عليه

ما يميز Typora هو عدم وجود أجزاء مقسمة — تكتب مباشرة في واجهة واحدة حيث يتم عرض التنسيق مباشرة. عناوين # تصبح كبيرة وعريضة فورًا، ونص *مائل* يصبح مائلاً فورًا.

# في Typora
اكتب # عنوان → يصبح العنوان كبيرًا وعريضًا فورًا
اكتب **عريض** → يصبح النص عريضًا فورًا
اكتب --- → يظهر خط فاصل فورًا

4. إنشاء أول ملف Markdown لك

(1) إنشاء ملف جديد

أبسط طريقة لإنشاء ملف .md:

# في الطرفية
touch اول-مستند-لي.md

# أو في VS Code:
# ملف ← ملف جديد ← حفظ بامتداد .md

▶ مثال: تضمين كتلة تعليمات Python في Markdown

## أول كتلة تعليمات برمجية لي

\`\`\`python
print("مرحبًا، Markdown!")
\`\`\`

▶ مثال: معاينة Markdown في VS Code

اضغط `Ctrl+K V` لفتح المعاينة جنبًا إلى جنب
اضغط `Ctrl+Shift+V` لفتح المعاينة بملء الشاشة

الجزء الأيسر: كتابة مصدر Markdown
الجزء الأيمن: رؤية المخرجات المعروضة في الوقت الفعلي

5. سير عمل Markdown

(1) سير العمل المحلي

graph LR
    A[إنشاء ملف .md] --> B[الكتابة في المحرر]
    B --> C[التحقق بالمعاينة المباشرة]
    C --> D{هل المحتوى جيد؟}
    D -->|نعم| E[حفظ / إيداع في Git]
    D -->|لا| B
    E --> F[تحويل / نشر]

graph LR
    A[إنشاء ملف .md] --> B[الكتابة في المحرر]
    B --> C[التحقق بالمعاينة المباشرة]
    C --> D{هل المحتوى جيد؟}
    D -->|نعم| E[حفظ / إيداع في Git]
    D -->|لا| B
    E --> F[تحويل / نشر]

(2) سير العمل الشائعة

▶ مثال: سير عمل كتابة كامل باستخدام VS Code

1. افتح VS Code، أنشئ `ملاحظة.md`
2. اكتب العنوان والنص
3. اضغط Ctrl+Shift+V لفتح المعاينة
4. حرّر حتى ترضى
5. Ctrl+S لحفظ الملف
6. أودع في GitHub باستخدام git

6. مثال كامل: من الصفر إلى نشر ملاحظة Markdown

عنوان الملاحظة: [ملاحظات] تخطيط CSS Flexbox

المفهوم الأساسي: Flexbox هو نموذج تخطيط أحادي البعد

ورقة مرجعية للخصائص الشائعة:
  display → flex
  justify-content → center, space-between
  align-items → center, stretch

نموذج تعليمات برمجية:
  .container { display: flex; justify-content: center; }

مرجع: دليل MDN Flexbox

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

❓ أسئلة شائعة

📖 ملخص

• اختر محررًا: VS Code للمطورين، Typora للكتابة، Obsidian لإدارة المعرفة
• إنشاء ملف .md: هو في الأساس ملف نصي عادي بامتداد .md أو .markdown
• المعاينة المباشرة: Ctrl+Shift+V في VS Code، تلقائية في Typora
• سير العمل الأساسي: كتابة ← معاينة ← حفظ ← نشر
• اصطلاحات التسمية: أحرف صغيرة مع شرطات، تجنب المسافات والأحرف الخاصة

📝 تمارين

1. مبتدئ: في VS Code، أنشئ ملف hello-markdown.md. اكتب عنوان H1، وعنوان H2، وفقرة، وكتلة تعليمات برمجية. ثم اضغط Ctrl+Shift+V لمعاينة النتيجة.

2. متوسط: قارن بين VS Code مع Markdown Preview Enhanced و Obsidian. اكتب ملاحظة قصيرة في كل منهما واشرح أي أداة تفضلها ولماذا.

3. متقدم: ثبّت النسخة التجريب��ة من Typora أو استخدم StackEdit (عبر الإنترنت). اكتب مقالة Markdown تتضمن صورًا وروابط، ثم صدّرها كـ PDF و HTML للتحقق من اتساق التنسيق.

فريق Web-Tutorial التقني

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

من نحن