تنسيق المشاركات باستخدام markdown و BBCode و HTML

:bookmark: يشرح دليل المرجع هذا جميع خيارات التنسيق المتاحة في منشورات Discourse، بما في ذلك ترميز ماركداون (markdown)، وBBCode، وHTML. ويوضح ما هو مدعوم ويوفر مصادر يمكنك من خلالها رؤية الأمثلة.

:person_raising_hand: مستوى المستخدم المطلوب: جميع المستخدمين

فهم التنسيق المدعوم في المنشورات

على الرغم من أن النص العادي كافٍ لمعظم الردود، يسمح Discourse للمستخدمين بتحسين تنسيق منشوراتهم باستخدام ترميز ماركداون، وBBCode، وHTML. يشرح هذا الدليل أنواع التنسيق المدعومة وكيفية استخدامها بفعالية.
يمكنك أيضًا التدرب على بعض الأساسيات في برنامج تعليمي تفاعلي عن طريق إرسال رسالة خاصة إلى @discobot هنا أو على أي موقع Discourse.

ملخص

يغطي هذا الدليل:

  • بناء جملة ماركداون المدعومة
  • وسوم BBCode المدعومة
  • وسوم وسمات HTML المدعومة والآمنة

أفضل الممارسات

  • استخدم ترميز ماركداون بشكل أساسي لبساطته وسهولة قراءته.
  • اخلط بين ترميز ماركداون وBBCode فقط عند الضرورة، وحافظ على اتساق الاستخدام.
  • اقتصر على استخدام HTML على الوسوم البسيطة والآمنة لتجنب مشكلات التنسيق وضمان أمان المنشورات.

ترميز ماركداون المدعوم

يستخدم Discourse markdown-it لتنفيذ ترميز ماركداون الخاص به.
تشمل بعض ميزات ترميز ماركداون الشائعة الاستخدام ما يلي:

  • نص عريض: `**text**`
  • نص مائل: `*text*`
  • رابط: `[title](https://example.com)`
  • كود مضمن: code
  • تمييز: `<mark></mark>`
  • اقتباس ككتلة: `> نص مقتبس`
  • كتلة كود:
    ```
    كتلة كود
    ```
    

في المنشورات الأطول (مثل هذا المنشور)، قد يكون من المفيد أيضًا إضافة هيكل باستخدام العناوين:

# عنوان 1
## عنوان 2
### عنوان 3

ملاحظة: عند تحميل صورة، سيتم إنشاء بناء جملة ترميز ماركداون للإشارة إلى الصورة تلقائيًا.

![caption|500x500](upload://image.jpeg)

للحصول على قائمة كاملة بميزات ترميز ماركداون، يرجى الرجوع إلى الدليل التفاعلي.

BBCode المدعوم

يدعم Discourse مجموعة فرعية من وسوم BBCode الشائعة، يتم إنشاء بعضها تلقائيًا لدعم التنسيق الخاص، على سبيل المثال عند اقتباس منشور في ردك:
[quote=“user”]النص المقتبس[/quote]

[quote="user"]quoted text[/quote]

يمكنك أيضًا استخدام BBCode لإخفاء النص كـ “سبويلر” (مفسد للأحداث) أو كـ “تفاصيل”

نص مفسد

[spoiler]spoiled text[/spoiler]

[details=“انقر للتوسيع”]نص مخفي[/details]

[details="click to expand"]hidden text[/details]

تُدعم أيضًا وسوم BBCode للتنسيق البسيط الذي يدعمه ترميز ماركداون أو يتم دعمه:

  • [b]نص غامق[/b]
  • [i]تأكيد[/i]
  • [u]تسطير[/u]
  • [s]تخطي[/s]
  • [ul][li]الخيار الأول[/li][/ul]
  • [img]http://example.com/image.png[/img]
  • [url]http://example.com[/url]
  • [code]كود[/code]
    للحصول على قائمة كاملة بوسوم BBCode المدعومة والأمثلة، تحقق من اختبارات Discourse BBCode.

HTML المدعوم

يدعم Discourse مجموعة فرعية آمنة من HTML. بينما يمكنك مزج HTML مع ترميز ماركداون، يُسمح فقط بوسوم وسمات HTML محددة لضمان الأمان والتنسيق المتسق.
تشمل بعض وسوم HTML المسموح بها ما يلي:

  • <a>link</a>
  • <strong>نص عريض</strong>
  • <em>نص مائل</em>
  • <ul><li>عنصر قائمة</li></ul>
  • <img src="https://example.com/image.png" alt="description">
    للحصول على قائمة مفصلة بالوسوم والسمات المسموح بها في HTML، راجع قائمة السماح في Discourse.
    :information_source: ملاحظة: الأنماط المضمنة (Inline styles)، مثل <span>نص ملون</span>، غير مدعومة. للحصول على أنماط مخصصة، راجع تخصيص محتويات المنشورات.

المشكلات الشائعة والحلول

  • عدم عمل وسوم BBCode أو HTML: تأكد من أن الوسوم التي تستخدمها جزء من المجموعة الفرعية المدعومة.
  • إزالة الأنماط المضمنة: لا يدعم Discourse الأنماط المضمنة لأسباب أمنية. استخدم أنماطًا مخصصة أو إضافات (plugins) إذا لزم الأمر.
  • تغيير التنسيق عند اللصق من محررين آخرين: قد لا يتم عرض بعض تنسيقات النص الغني بشكل صحيح. استخدم ترميز ماركداون لتنسيق النص بشكل متسق.

الأسئلة الشائعة

س: هل يمكنني استخدام الجداول في Discourse؟
ج: نعم، يمكنك استخدام ترميز ماركداون لإنشاء جداول. لمزيد من المعلومات، راجع هذا الدليل حول الجداول.
س: لماذا لا يعمل النمط المضمن الخاص بي؟
ج: لا يدعم Discourse الأنماط المضمنة في HTML لأسباب أمنية. فكر في استخدام BBCode مخصص أو دليل الأنماط المخصص لـ Discourse.
س: هل يمكنني إضافة وسوم BBCode مخصصة؟
ج: نعم، يمكنك إضافة وسوم BBCode مخصصة. راجع إضافة Discourse BBCode لمزيد من المعلومات.

موارد إضافية

31 إعجابًا

لا تذكر أي من هذه المراجع الجداول.

إعجابَين (2)

هذا صحيح ولكن هذا الموضوع الآخر يفعل ذلك. Adding a table to your post using markdown

3 إعجابات

يبدو أن لون النص ولون خلفية النص لا يعملان مع <span> أو bbcode، هل فاتني شيء؟

  • <span>نص تنسيق أحمر</span>
    • نص تنسيق أحمر
  • bbcode: [color=red]نص بلون أحمر[/color]
    • [color=red]نص بلون أحمر[/color]
إعجابَين (2)

نعم، يبدو أن نمط HTML المضمن غير مدعوم

يمكنك الاستفادة من هذا الدليل:

(وشاهده أثناء العمل هنا: 📜 [Wiki] Schlumpf hub serial numbers reference - Unicycles and Equipment - Unicyclist.com)

أو استخدم هذه الإضافة التي توسع دعم BBcode:

بالنسبة لوسوم HTML المسموح بها، أعتقد أن هذا هو المرجع:
https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#L115

على الرغم من أنني لا أجد وسوم HTML للجدول (وهي مسموح بها) بالداخل لسبب ما.

ربما لأنها مشار إليها هنا:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/engines/discourse-markdown/table.js#L31

5 إعجابات

شكراً جزيلاً على المراجع المفيدة!

إعجاب واحد (1)

يبدو أن المرشح مُعد حاليًا بحيث يتم تصفية سمات rowspan و colspan على عناصر td و th. فهمي هو أن هذه آمنة (وأعتقد أنها مفيدة جدًا): هل سيكون الفريق منفتحًا للسماح بهذه السمات؟

كملاحظة جانبية، تحدث @Canapin عن موقع القائمة المسموح بها لعلامات table.

الملف .../discourse-markdown/table.js، على الرغم من ذلك، يبدو أنه تطبيق حول جداول Markdown تحديدًا؛ هل ستحتاج جداول HTML العادية إلى امتداد منفصل لـ allowList؟

أعتقد أن rowspan و colspan آمنان جدًا، ولكني أرغب أيضًا في طلب قطعة أخرى من الترميز. هل يمكننا السماح بسمات data-* على عناصر الجدول؟ أعتقد أن هذا سيكون مفيدًا جدًا لتحديد أنواع مختلفة من محتويات الجدول، وخاصة لاستخدامها كخطافات لتنسيق CSS مخصص.

إعجاب واحد (1)

مرحباً :slight_smile:

أعتقد أن هذا سيكون أصعب مما كان متوقعاً.
إذا قمت بإنشاء جدول HTML في مشاركتك، وقام شخص ما باقتباس جدولك، فسيتم تحويله إلى Markdown الذي لا يدعم rowspan و colspan.

أشك في أنه ستكون هناك مشاكل أخرى لم أفكر فيها.

إنه ليس بالضبط نفس الشيء، ولكن يمكنك تغليف جدولك بعلامات [wrap] :slight_smile:
انظر: Customize posts' contents with your own styles
ولكن لن تتمكن من الحصول على سمات data- داخل جدول HTML (على سبيل المثال، لتخصيص صفوف أو خلايا معينة).

تعديل: إذا كان جدولك يستخدم Markdown بدلاً من HTML، يمكنك إدراج spans بسمات data- مثل هذا:

|العمود 1 | العمود 2|
|--- | ---|
|<span data-thing>اختبار</span> | اختبار|
|اختبار | اختبار|

ولكن سيتم إزالتها إذا قام شخص ما باقتباس أو نسخ ولصق جدولك.

إعجاب واحد (1)

سيكون من المفيد جدًا لو تم الالتزام ببعض أنماط CSS المضمنة البسيطة والآمنة في HTML الخام المضاف إلى منشورات Discourse. يمكن تحويل منشورات HTML من محرك منتديات سابق و/أو يقوم المستخدمون أحيانًا بلصق نص منسق مع أشياء مثل محاذاة النص و/أو الصور.

يعمل ما يلي كما هو متوقع:



<div>
<p>Test</p>
</div>

Test

ولكن هذا لا يعمل:


<p style="text-align: center;">Test</p>

Test


وينطبق الشيء نفسه على تنسيق <span> style="color: ... المضمن.

من المرجح أن تكون هناك أنماط مضمنة مثل هذه في المحتوى المحول / الملصق من محررات WYSIWYG أخرى.

السمة style غير مسموح بها في Discourse لأنها قد تسبب مشاكل بسهولة.

أيضًا، لدى Discourse فلسفة معينة حول كيفية تقديم المعلومات في المشاركات، وتحد من العلامات والسمات عن قصد.

السمة align على <div مسموح بها صراحة هنا: https://github.com/discourse/discourse/blob/main/app/assets/javascripts/pretty-text/addon/allow-lister.js#LL147C2-L147C16

إذا كنت ستقوم بترحيل منتدى وترغب في الاحتفاظ ببعض التنسيقات الخاصة مثل الألوان، فسأختار Discourse BBCode وتعديل المستورد إذا لزم الأمر :slight_smile:

3 إعجابات

هل هناك سبب لعدم تضمين علامة الاقتباس > في قسم Markdown؟ هذا هو، حسب تجربتي، الشيء الأكثر شيوعًا الذي لا يستخدمه الناس عندما يجب عليهم ذلك.

أعلم أنه لا يمكنك سرد كل شيء، ولكن في المنتديات حيث يقتبس الناس غالبًا من مصادر أخرى، يعد هذا أمرًا ضروريًا.

@one1، يجب تثبيط الاقتباس داخل المنتدى. البديل له هناك هو [quote]. بخلاف ذلك، أتفق معك.

كنت أتحدث عن الاقتباس من الأوراق الأكاديمية.

هذا مفيد للغاية! شكراً جزيلاً لك! :وجه_ضاحك:

هذا الرابط معطوب.

إعجابَين (2)

شكرًا لك! يجب أن يكون قد تم إصلاحه الآن.

إعجاب واحد (1)

تم تقسيم 8 مشاركات إلى موضوع جديد: استخدام عناوين H1 مقابل H2 في المنشئ