MDX تنسيق النص: دليل شامل

Tech
MDX
Syntax

١. تنسيق النص الأساسي

يدعم MDX تنسيق النص القياسي في Markdown:

  • النص الغامق يتم إنشاؤه باستخدام **نجمتين مزدوجتين** أو __شرطتين سفليتين مزدوجتين__
  • النص المائل يستخدم *نجمة واحدة* أو _شرطة سفلية واحدة_
  • النص الغامق والمائل يجمع بين الاثنين: ***ثلاث نجمات*** أو ___ثلاث شرطات سفلية___
  • ~~النص المشطوب~~ يستخدم ~~شرطتين مائلتين مزدوجتين~~

٢. العناوين

يدعم MDX ستة مستويات من العناوين، تمامًا مثل Markdown:

عنوان ١

عنوان ٢

عنوان ٣

عنوان ٤

عنوان ٥
عنوان ٦

٣. القوائم

القوائم غير المرتبة

  • عنصر ١
  • عنصر ٢
    • عنصر فرعي ٢.١
    • عنصر فرعي ٢.٢
  • عنصر ٣

القوائم المرتبة

  1. العنصر الأول
  2. العنصر الثاني
    1. العنصر الفرعي ٢.١
    2. العنصر الفرعي ٢.٢
  3. العنصر الثالث

٤. الروابط

يدعم MDX أنواعًا مختلفة من الروابط:

٥. الصور

يمكن إضافة الصور في MDX باستخدام صيغة Markdown:

نص بديل

٦. الاقتباسات

هذا اقتباس. يمكن أن يمتد على عدة أسطر ويمكن أن يحتوي على عناصر Markdown أخرى.

٧. الشيفرة البرمجية

الشيفرة الداخلية

استخدم علامات الاقتباس العكسية للـ شيفرة الداخلية.

كتل الشيفرة

لكتل الشيفرة، استخدم ثلاث علامات اقتباس عكسية مع محدد لغة اختياري:

function تحية(اسم) {
  console.log(`مرحبًا، \${اسم}!`);
}

تحية('العالم');

٨. الخطوط الأفقية

قم بإنشاء خطوط أفقية باستخدام ثلاث شرطات أو نجمات أو شرطات سفلية أو أكثر:


٩. الجداول

| العنوان ١ | العنوان ٢ | |-----------|-----------| | الصف ١، العمود ١ | الصف ١، العمود ٢ | | الصف ٢، العمود ١ | الصف ٢، العمود ٢ |

١٠. قوائم المهام

  • [x] مهمة مكتملة
  • [ ] مهمة غير مكتملة

١١. الحواشي السفلية

يدعم MDX الحواشي السفلية[^1] للمعلومات الإضافية.

[^1]: هذه حاشية سفلية.

١٢. HTML في MDX

يسمح MDX باستخدام HTML مباشرة في الـ markdown الخاص بك:

<div style="padding: 20px; background-color: #f0f0f0; border-radius: 5px;">
  <h3>هذه كتلة HTML مخصصة</h3>
  <p>يمكنك استخدام HTML لإنشاء تخطيطات أو أنماط مخصصة داخل MDX الخاص بك.</p>
</div>

١٣. استيراد واستخدام JavaScript

يسمح MDX باستيراد واستخدام وحدات JavaScript:

import { اسم_المكون} from './اسم_المكون'

# الشيفرة الخاص بي
 

<اسم_المكون data={[1, 2, 3]} />

١٤. البيانات الوصفية

يدعم MDX البيانات الوصفية للبيانات التعريفية:

---
title: MDX
author:الاسم
date: السنة-الشهر-اليوم
---

١٥. المعادلات الرياضية

تدعم بعض معالجات MDX معادلات رياضية بأسلوب LaTeX:

معادلة داخلية: $E = mc^2$

الخاتمة

MDX باللغة العربية

Saif Saidi (Saif Al-Saidi)

Software Engineer

I'm a Software Engineer and a passionate learner. Full Stack Dotnet Developer, C#/JS Developer.