كيفية عرض Markdown على صفحة ويب باستخدام md-block

البنية البسيطة لـ Markdown تجعله بديلاً ممتازًا لـ HTML. لقد دعمت اللغة دائمًا تضمين HTML ، ولكن يمكنك الآن الذهاب في الاتجاه الآخر وتضمين Markdown في HTML.

باستخدام مكتبة بسيطة ، يمكنك استضافة Markdown مضمن في صفحات الويب الخاصة بك وتحويله إلى HTML مناسب أثناء التنقل.

ماذا تفعل md block؟

قد تتضمن عمليتك الحالية إنشاء ملفات Markdown يدويًا ، ثم تحويلها إلى HTML. هذا هو عدد تطبيقات CMS الحديثة التي تعمل. أو يمكنك استخدام إطار عمل مثل Angular لتحويل Markdown إلى صفحات.

مكتبة md-block ليست بديلاً تمامًا ؛ بدلاً من ذلك ، فإنه يفي بحالة استخدام مختلفة قليلاً. يقوم بتحويل Markdown المضمن إلى HTML المكافئ له. يمكنك تضمين Markdown في ملفات HTML الخاصة بك وعرضها على العميل ، في وقت الطلب.

إليك ما قد يبدو عليه ذلك:

<لغة البرمجة>
<رأس>...</head>
<هيئة>
<كتلة md>
# العنوان
بعض Markdown * المدمج * الذي يمكن لـ `md-block` تحويله من أجلك!
</md-block>
</body>
</html>

من الجيد إجراء محاذاة لليسار لشفرة Markdown المضمنة ، بدون أي مسافة بادئة. هذا لأن المسافة البيضاء البادئة يمكن أن تكون مهمة في Markdown ، على عكس HTML.

تقدم المكتبة عنصر HTML المخصص الخاص بها ، كتلة md. على الرغم من أن هذا العنصر ليس كذلك جزء من معيار HTML، هذه تقنية صالحة. معيار مكونات الويب (MDN) يتضمن واجهة برمجة تطبيقات تسمى Custom Elements. تدعم واجهة برمجة التطبيقات هذه التسجيل الديناميكي للعناصر المخصصة باستخدام JavaScript.

قبل تحميل مكتبة md-block ، ستعرض هذه الصفحة بطريقة مألوفة:

بالطبع ، يمكنك تصميم عنصر md-block بحيث يبدو كما لو كان في محرر نصوص. باستخدام المسافة البيضاء المنسقة مسبقًا والخط الأحادي ، يكون من الأسهل قليلاً على الأقل قراءة:

<نمط>كتلة md {مساحة بيضاء: pre؛ عائلة الخطوط: monospace ؛ }</style>

قد ترغب في هذا النوع من الإخراج إذا كنت تكتب درسًا تعليميًا عن Markdown. يسمح لك بشرح بناء جملة Markdown مع السماح لك بتحرير نموذج Markdown الخاص بك بسهولة:

لكن خدعة مجموعة md-block هي تحويل Markdown إلى HTML نهائي.

حتى مع أنماط المتصفح الافتراضية ، يتم الآن عرض المحتوى تمامًا مثل HTML المعتاد ، على الرغم من أنك أرسلته إلى المتصفح باسم Markdown:

كيفية استخدام md-block

بمجرد إضافة مكتبة md-block إلى صفحتك ، يمكنك كتابة Markdown كتلة md عناصر. ستقوم المكتبة بعد ذلك بتنسيق Markdown تلقائيًا ، ويمكنك الاستمرار في تضمين Markdown كما تريد.

ومع ذلك ، هناك بعض الاختلافات في هذه العملية.

مصدر البرنامج النصي عن بعد أو تثبيته بنفسك

أسهل طريقة للبدء هي الرجوع إلى المكتبة من موقع md-block الرسمي:

<نوع البرنامج النصي ="وحدة" src ="https://md-block.verou.me/md-block.js"></script>

قد لا يكون هذا هو الأسلوب الأكثر فعالية ، ولكنه بالتأكيد الأسرع. فقط أضف هذا الرمز إلى ملف رأس وستعرض صفحتك تلقائيًا أي شيء في عنصر md-block إلى HTML:

يمكنك بالطبع تنزيل ملف JavaScript هذا واستضافته على موقعك الخاص. أو يمكنك تثبيته عبر npm:

npm تثبيت md-الكتلة

كتل Markdown مقابل. تخفيض السعر المضمن

العنصر الافتراضي ، المسمى بعد المكتبة نفسها ، هو كتلة md. ولكن يمكنك أيضًا استخدام ملف مد- سبان عنصر Markdown المضمن ، مثل النص في منتصف الجملة:

من المحتمل أن تكون حالة استخدام Markdown المضمن أقل شيوعًا ، ولكن لا يزال بإمكانك استخدامها:

<ص>تحتوي فقرة HTML على <مد- سبان>* مائل *</md-span> نص.</ ص>

كيفية تسليط الضوء على بناء الجملة كتل كود Markdown مع المنشور

نشور زجاجي هي أداة تمييز بناء الجملة التي أنشأتها Lea Verou ، منشئ md-block ، بشكل مشترك. يمكنك استخدامه لتمييز كتل التعليمات البرمجية المنسقة مسبقًا في صفحة ويب ، بما في ذلك تلك التي ينشئها md-block.

لذلك ، باستخدام HTML هذا:

<لغة البرمجة>
<هيئة>
<كتلة md>
```جافا سكريبت
وظيفةميدان(رقم) {
إرجاع رقم * رقم ؛
}
```
</md-block>
<النصي src ="المنشور. js"></script>
</body>
</html>

سترى رمزًا بتنسيق جيد مع تمييز مدرك للبناء:

زادت خياراتك للكتابة عبر الإنترنت

إن كيفية استخدامك لـ md-block أمر متروك لك ، ولكن هناك الكثير من الإمكانات لاستخدام الحلول المبتكرة. يمكنك استخدامه لتشغيل نظام إدارة محتوى خفيف الوزن للغاية للكتاب الذين يثقون في استخدام Markdown ، ولكن ليس HTML.

Markdown هي لغة مثالية للجمهور العام. من المرجح أن يؤدي اعتماده بواسطة أدوات مثل Slack إلى زيادة الاستخدام بشكل أكبر.