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

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

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

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

في حين أن النص العادي كافٍ لمعظم الردود، يسمح Discourse للمستخدمين بتحسين تنسيق مشاركاتهم باستخدام markdown و BBCode و HTML. يشرح هذا الدليل أنواع التنسيق المدعومة وكيفية استخدامها بفعالية.

يمكنك أيضًا ممارسة بعض الأساسيات في برنامج تعليمي تفاعلي عن طريق إرسال رسالة خاصة إلى @discobot هنا أو على أي موقع Discourse.

ملخص

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

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

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

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

markdown المدعوم

يستخدم Discourse markdown-it لتنفيذ markdown الخاص به.

تتضمن بعض ميزات markdown شائعة الاستخدام ما يلي:

  • غامق: **text**

  • مائل: *text*

  • رابط: [title](https://example.com)

  • رمز مضمن: `code`

  • تمييز: <mark></mark>

  • كتلة التعليمات البرمجية:

    ```
    كتلة التعليمات البرمجية
    ```
    

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

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

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

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

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

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 للتنسيق البسيط الذي يدعمه markdown أو:

  • [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[/code]

للحصول على قائمة كاملة بعلامات BBCode المدعومة والأمثلة، تحقق من اختبارات Discourse BBCode.

HTML المدعوم

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

تتضمن بعض علامات HTML المسموح بها ما يلي:

  • <a href="https://example.com">link</a>
  • <strong>نص عريض</strong>
  • <em>نص مائل</em>
  • <ul><li>عنصر القائمة</li></ul>
  • <img src="https://example.com/image.png" alt="description">

للحصول على قائمة مفصلة بعلامات وسمات HTML المسموح بها، راجع قائمة السماح الخاصة بـ Discourse.

:information_source: ملاحظة: الأنماط المضمنة، مثل <span style="color:red">نص ملون</span>، غير مدعومة. للحصول على أنماط مخصصة، راجع تخصيص محتويات المشاركة.

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

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

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

س: هل يمكنني استخدام الجداول في Discourse؟
ج: نعم، يمكنك استخدام markdown لإنشاء جداول. لمزيد من المعلومات، راجع هذا الدليل حول الجداول.

س: لماذا لا يعمل النمط المضمن الخاص بي؟
ج: لا يدعم 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)

عند استخدام عنوان ماركداون من المستوى الأول (#) في موضوع، هل سيؤدي ذلك إلى إنتاج h1 أم h2 في مخرجات HTML؟

سيُخرج <h1> :slight_smile:

إذًا هل هذا يعني أن ديسكورس يفترض أنه من الجيد وجود علامات <h1> متعددة في الصفحة؟ ألا يبدو أنه إذا كان عنوان الموضوع هو h1، فيجب أن تكون العناوين من المستوى الأول داخل هذا الموضوع h2 افتراضيًا، أليس كذلك؟