Markdown RTL Preview

معاينة Markdown بتنسيق RTL أنيق لـ VS Code مع كشف العربية تلقائياً

Beautiful right-to-left Markdown preview for VS Code with automatic Arabic detection

العربية • English • التركيب • الإعدادات

---

🌟 المميزات

• ✨ كشف تلقائي للغة العربية — يفعّل RTL لمّا يلقى نص عربي
• 🎨 تنسيق أنيق وحديث — ألوان مريحة للقراءة في الثيم الداكن والفاتح
• 📝 الأكواد LTR دائماً — الكود البرمجي يظل من اليسار لليمين كما يجب
• 🔤 خطوط احترافية — IBM Plex Sans Arabic للعربي و JetBrains Mono للكود
• 🎯 3 أوضاع تشغيل — تلقائي / دائماً / أبداً
• ⚙️ قابلة للتخصيص — تحكّم بنسبة الكشف وضوابط أخرى
• 🌓 تحترم ثيم VS Code — تتكيف مع الداكن والفاتح
• 📱 متجاوبة — تشتغل على شاشات بأحجام مختلفة

🚀 التركيب

الطريقة الأولى: من ملف VSIX (موصى بها)

نزّل آخر إصدار من Releases، ثم:

code --install-extension md-rtl-preview-0.1.1.vsix

أو من داخل VS Code:

1. اضغط Ctrl+Shift+P (أو Cmd+Shift+P على Mac)
2. اكتب Extensions: Install from VSIX...
3. اختر الملف اللي نزّلته
4. أعد تحميل النافذة (Developer: Reload Window)

الطريقة الثانية: من المصدر

git clone https://github.com/ikhd/md-rtl-preview.git
cd md-rtl-preview
npm install -g @vscode/vsce
vsce package
code --install-extension md-rtl-preview-*.vsix

💻 الاستخدام

افتح أي ملف .md واضغط:

• Ctrl+Shift+V — معاينة في تبويب جديد
• Ctrl+K V — معاينة جنب المحرر

الإضافة تشتغل تلقائياً — لو الملف فيه عربي بنسبة كافية، يصير RTL.

⚙️ الإعدادات

افتح إعدادات VS Code (Ctrl+,) وابحث عن mdRtlPreview:

الإعداد	النوع	الافتراضي	الوصف
mdRtlPreview.mode	string	auto	وضع التفعيل: auto / always / never
mdRtlPreview.arabicThreshold	number	0.15	نسبة الحروف العربية لتفعيل RTL تلقائياً (15%)

مثال على settings.json

{
  "mdRtlPreview.mode": "auto",
  "mdRtlPreview.arabicThreshold": 0.2
}

🔬 كيف يعمل؟

1. عند فتح معاينة Markdown، يُحقن auto-rtl.js في الصفحة
2. السكربت يحسب نسبة الحروف العربية (U+0600–U+06FF) مقابل اللاتينية
3. بلوكات الكود تُستثنى من الحساب
4. لو النسبة تجاوزت الحد، يضيف dir="rtl" على body مع class md-rtl-active
5. ملف rtl-preview.css يطبّق التنسيقات على هذا الـ class

---

🌟 Features

• ✨ Auto-detect Arabic content — RTL activates when Arabic text is found
• 🎨 Modern, elegant styling — eye-friendly colors for dark & light themes
• 📝 Code blocks stay LTR — code remains left-to-right as it should
• 🔤 Beautiful typography — IBM Plex Sans Arabic + JetBrains Mono
• 🎯 3 modes — auto / always / never
• ⚙️ Configurable — adjust detection threshold and behavior
• 🌓 Theme-aware — adapts to your VS Code theme

🚀 Installation

From VSIX (recommended)

Download the latest release from Releases:

code --install-extension md-rtl-preview-0.1.1.vsix

From source

git clone https://github.com/ikhd/md-rtl-preview.git
cd md-rtl-preview
npm install -g @vscode/vsce
vsce package
code --install-extension md-rtl-preview-*.vsix

💻 Usage

Open any .md file and press Ctrl+Shift+V (or Cmd+Shift+V on Mac). The extension automatically activates RTL when Arabic content is detected.

⚙️ Configuration

Setting	Type	Default	Description
mdRtlPreview.mode	string	auto	Activation mode: auto / always / never
mdRtlPreview.arabicThreshold	number	0.15	Min Arabic ratio to trigger auto-RTL

🔬 How it works

1. When Markdown preview opens, auto-rtl.js is injected into the page
2. The script counts Arabic characters (U+0600–U+06FF) vs Latin
3. Code blocks are excluded from the calculation
4. If ratio exceeds threshold, dir="rtl" and md-rtl-active class are added
5. rtl-preview.css applies styling based on this class

---

🧪 Development

git clone https://github.com/ikhd/md-rtl-preview.git
cd md-rtl-preview

# Open in VS Code
code .

# Press F5 to launch Extension Development Host
# Then open a .md file in the new window to test

Project structure

md-rtl-preview/
├── .github/workflows/    # GitHub Actions (auto-release)
├── docs/                 # Demo files
├── images/               # Icon and screenshots
├── scripts/
│   └── auto-rtl.js       # Auto-detection script
├── styles/
│   └── rtl-preview.css   # All styling
├── package.json          # Extension manifest
├── CHANGELOG.md          # Version history
├── LICENSE               # MIT
└── README.md             # This file

🤝 Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss.

1. Fork the project
2. Create your feature branch (git checkout -b feature/cool-thing)
3. Commit your changes (git commit -m 'Add cool thing')
4. Push to the branch (git push origin feature/cool-thing)
5. Open a Pull Request

📝 Changelog

See CHANGELOG.md for the version history.

📄 License

MIT © Khalid

🌟 Star history

If you like this extension, please consider giving it a star ⭐ — it helps a lot!

---

صُنع بـ ❤️ للمجتمع العربي

Made with ❤️ for the Arabic community