Markdown: مقدمة إلى Markdown ومزاياه الأساسية

Markdown هي لغة ترميز خفيفة تتيح لك كتابة مستندات منظمة باستخدام نص عادي — فكّر فيها كإضافة "علامات تنسيق" إلى نصك وتترك للحاسوب مهمة التنسيق.

1. ما ستتعلمه

• ما هو Markdown والمشكلة التي يحلها
• العلاقة بين Markdown و HTML
• المزايا الأساسية الأربعة لـ Markdown
• حالات الاستخدام الشائعة لـ Markdown
• كيفية تحديد ما إذا كان Markdown يناسب احتياجاتك

2. قصة حقيقية لمطور

(1) نقطة الألم: كتابة التوثيق كانت أكثر إيلامًا من البرمجة

أليكس مطور جديد طُلب منه كتابة ملف README لمشروع. فتح Word، وقضى نصف ساعة في تعديل أحجام الخطوط وتباعد الأسطر والترقيم، ليكتشف أن التنسيق قد تفسد تمامًا عند الحفظ. والأسوأ من ذلك، أن محرر النصوص لدى زميله لم يتمكن حتى من فتح ملف docx. قضى أليكس فترة ما بعد الظهيرة بأكملها في التنسيق — بينما استغرق المحتوى الفعلي 20 دقيقة فقط.

(2) الحل: إنجاز المهمة دفعة واحدة باستخدام Markdown

رأى مايك، وهو مطور كبير في الفريق، هذا الموقف وعلّم أليكس إعادة كتابة README باستخدام Markdown. بإضافة بضعة رموز # و * فقط إلى النص العادي، تمكن أليكس من إنشاء عناوين وقوائم وكتل تعليمات برمجية نظيفة. كان حجم الملف بأكمله 3 كيلوبايت فقط، ويمكن فتحه في أي محرر، وتم عرضه كصفحة جميلة بعد رفعه إلى GitHub. منذ ذلك الحين، انخفض وقت كتابة المستندات لدى أليكس بنسبة 70%.

3. ما هو Markdown

Markdown هي لغة ترميز خفيفة أنشأها John Gruber في عام 2004. فلسفتها الأساسية هي "سهلة القراءة، سهلة الكتابة" — تعبّر عن التنسيق برموز بسيطة (مثل #، *، -)، ويبقى النص الخام واضحًا ومقروءًا حتى بدون تحويله إلى HTML.

graph LR
    A[ملف نصي عادي .md] --> B[محلل Markdown]
    B --> C[مخرجات HTML]
    C --> D[عرض المتصفح]
    D --> E[يرى المستخدم الصفحة المنسقة]

graph LR
    A[ملف نصي عادي .md] --> B[محلل Markdown]
    B --> C[مخرجات HTML]
    C --> D[عرض المتصفح]
    D --> E[يرى المستخدم الصفحة المنسقة]

(1) مفهوم لغة الترميز الخفيفة

تستخدم لغة الترميز رموزًا محددة لوصف بنية المستند. HTML قوي لكنه مطول — لكتابة عنوان، تحتاج إلى <h1> في البداية و </h1> في النهاية. أما مع Markdown، فرمز # واحد يمنحك عنوانًا من المستوى الأعلى:

# هذا عنوان من المستوى الأول
## هذا عنوان من المستوى الثاني

(2) العلاقة بين Markdown و HTML

Markdown ليس بديلاً عن HTML — إنه نسخة مبسطة. يتم تحليل Markdown في النهاية إلى HTML. في الواقع، يمكنك تضمين وسوم HTML مباشرة داخل Markdown:

## تحويل Markdown إلى HTML

مصدر Markdown: `# مرحبًا`
HTML المحول: `<h1>مرحبًا</h1>`

يمكنك استخدام HTML مباشرة داخل Markdown:
<span style="color: red;">هذا يستخدم وسم HTML</span>

▶ مثال: كيف يتحول مقتطف Markdown إلى HTML

# مرحبًا بك في Markdown

Markdown يجعل الكتابة **سهلة**.

* لا داعي للقلق بشأن التنسيق
* ركّز على إنشاء المحتوى

المخرجات:

<h1>مرحبًا بك في Markdown</h1>
<p>Markdown يجعل الكتابة <strong>سهلة</strong>.</p>
<ul>
  <li>لا داعي للقلق بشأن التنسيق</li>
  <li>ركّز على إنشاء المحتوى</li>
</ul>

4. المزايا الأساسية لـ Markdown

(1) موجز وقابل للقراءة

رموز Markdown بديهية — # يوحي بمستويات العناوين، * يشبه نقاط التعداد، > يبدو كمسافة بادئة للاقتباسات. حتى في محرر النصوص العادي، تكون بنية المستند واضحة من النظرة الأولى:

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

- العنصر 1
- العنصر 2

> هذا اقتباس

(2) قابلية النقل والتحويل

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

▶ مثال: تحويل Markdown إلى HTML باستخدام Pandoc

pandoc مستند.md -o مستند.html

5. حالات استخدام Markdown

(1) التوثيق التقني وملفات README

يحتوي كل مشروع تقريبًا على GitHub على ملف README.md. Markdown هو المعيار الفعلي للتوثيق التقني:

# اسم المشروع

> وصف موجز لمشروعك

## التثبيت

\`\`\`bash
npm install my-project
\`\`\`

## الاستخدام

\`\`\`javascript
const myProject = require('my-project');
myProject.start();
\`\`\`

## الترخيص

MIT

(2) المدونات والملاحظات

تستخدم مولدات المواقع الثابتة الحديثة (Jekyll، Hugo، Hexo) جميعها Markdown كتنسيق للمحتوى. كما تدعم تطبيقات تدوين الملاحظات (Notion، Obsidian، Logseq) Markdown بشكل أصلي.

▶ مثال: الروابط ثنائية الاتجاه في Obsidian

# ملاحظات الدراسة

درست اليوم [[CSS Flexbox]] و [[Grid Layout]].

Flexbox رائع لـ [[التخطيطات أحادية البعد]]، بينما Grid يتفوق في [[التخطيطات ثنائية البعد]].

مرجع: [[مسار تعلم الواجهة الأمامية]]

6. مثال كامل: كتابة نظرة عامة على مشروع باستخدام Markdown

# تطبيق المهام

> تطبيق مهام بسيط بواجهة سطر أوامر مبني باستخدام Python.

## الميزات

- إضافة وحذف ووضع علامة إكمال على المهام
- حفظ المهام في ملف JSON
- واجهة طرفية بنمط داكن

## بداية سريعة

\`\`\`bash
git clone https://github.com/alex/todo-app
cd todo-app
python main.py
\`\`\`

## بنية المشروع

\`\`\`text
todo-app/
├── main.py          # نقطة الدخول
├── todo.py          # إدارة المهام
├── storage.py       # إدخال/إخراج الملفات
└── requirements.txt # التبعيات
\`\`\`

## الترخيص

ترخيص MIT

النتيجة المتوقعة: صفحة README منظمة بشكل جيد على GitHub تحتوي على اسم المشروع، والوصف، وقائمة الميزات، وأوامر التثبيت، وبنية المجلدات.

❓ أسئلة شائعة

📖 ملخص

• Markdown هي لغة ترميز خفيفة تمثل التنسيق برموز بسيطة
• يتم تحليل Markdown في النهاية إلى HTML — الاثنان يكملان بعضهما بدلاً من التنافس
• أربع مزايا رئيسية: موجز وقابل للقراءة، قابل للنقل والتحويل، مناسب للتحكم في الإصدار، التركيز على المحتوى أولاً
• حالات الاستخدام: ملفات README على GitHub، المدونات، الملاحظات، التوثيق التقني، وغيرها
• المواصفة القياسية هي CommonMark؛ GFM هو المجموعة الفرعية الموسعة الأكثر شيوعًا

📝 تمارين

1. مبتدئ: افتح أي محرر نصوص، واكتب مقتطف Markdown يحتوي على عنوان H1، وفقرة، وقائمة غير مرتبة. احفظه كملف .md وافتحه في متصفح، أو قم بمعاينته في VS Code لرؤية التأثير.

2. متوسط: ابحث عن مشروع مفتوح المصدر على GitHub، واقرأ مصدر README.md الخاص به (انقر على زر Raw)، واذكر صيغ Markdown التي يستخدمها (5 على الأقل).

3. متقدم: استخدم Pandoc أو أداة عبر الإنترنت (مثل markdowntohtml.com) لتحويل Markdown الخاص بك إلى HTML. قارن بين المصدر والمخرجات المعروضة لفهم وسم HTML الذي يقابله كل جزء من Markdown.

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

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

من نحن