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

:bookmark: This reference guide details all the formatting options available in Discourse posts, including markdown, BBCode, and HTML. It specifies what is supported and provides resources where you can see examples.

:person_raising_hand: Required user level: All users

Understanding supported formatting in posts

While plain text is sufficient for most replies, Discourse allows users to enhance the formatting of their posts by using markdown, BBCode, and HTML. This guide explains what types of formatting are supported and how you can use them effectively.

You can also practice some of the basics in an interactive tutorial by sending a personal message to @discobot here or on any Discourse site.

Summary

This guide covers:

  • Supported markdown syntax
  • Supported BBCode tags
  • Supported and safe HTML tags and attributes

Best practices

  • Use markdown primarily for its simplicity and readability.
  • Mix markdown and BBCode only when necessary, and keep usage consistent.
  • Limit the use of HTML to simple, safe tags to avoid formatting issues and ensure posts are secure.

Supported markdown

Discourse uses markdown-it for its markdown implementation.

Some commonly used markdown features include:

  • Bold: **text**
  • Italic: *text*
  • Link: [title](https://example.com)
  • Inline code: `code`
  • Highlight: <mark></mark>
  • Code block:
    ```
    code block
    ```
    

In longer posts (like this one), it can also be helpful to add structure using headings:

# Heading 1
## Heading 2
### Heading 3

Note: when an image is uploaded, the markdown syntax to reference the image will automatically be generated.

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

For a full list of markdown features, please refer to the interactive guide.

Supported BBCode

Discourse supports a subset of common BBCode tags, some of which are generated automatically to support special formatting, for example when you quote a post in your reply:

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

You can also use BBCode to mark hide text as a spoiler or as details

spoiled text

[spoiler]spoiled text[/spoiler]
click to expand

hidden text

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

BBCode tags for simple formatting supported by markdown or are also supported:

  • [b]strong[/b]
  • [i]emphasis[/i]
  • [u]underlined[/u]
  • [s]strikethrough[/s]
  • [ul][li]option one[/li][/ul]
  • [img]http://example.com/image.png[/img]
  • [url]http://example.com[/url]
  • [code]code[/code]

For a complete list of supported BBCode tags and examples, check the Discourse BBCode tests.

Supported HTML

Discourse supports a safe subset of HTML. While you can mix HTML with markdown, only specific HTML tags and attributes are allowed to ensure security and consistent styling.

Some of the allowed HTML tags include:

  • <a href="https://example.com">link</a>
  • <strong>bold text</strong>
  • <em>italic text</em>
  • <ul><li>list item</li></ul>
  • <img src="https://example.com/image.png" alt="description">

For a detailed list of allowed HTML tags and attributes, refer to Discourse’s allow-list.

:information_source: Note: Inline styles, like <span style="color:red">colored text</span>, are not supported. For custom styles, see customize post contents.

Common issues and solutions

  • BBCode or HTML tags not working: Ensure the tags you are using are part of the supported subset.
  • Inline styles being stripped: Discourse does not support inline styles for security reasons. Use custom styles or plugins if necessary.
  • Formatting changes on pasting from other editors: Some rich-text formats may not render correctly. Use markdown to format text consistently.

FAQs

Q: Can I use tables in Discourse?
A: Yes, you can use markdown to create tables. For more information, see this guide on tables.

Q: Why isn’t my inline style working?
A: Discourse does not support inline styles in HTML for security reasons. Consider using custom BBCode or the Discourse custom styling guide.

Q: Can I add custom BBCode tags?
A: Yes, you can add custom BBCode tags. Refer to the Discourse BBCode plugin for more information.

Additional resources

Last edited by @MarkDoerr 2024-07-11T00:31:08Z

Check documentPerform check on document:
31 إعجابًا

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

إعجابَين (2)

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

إعجابَين (2)

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

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

نعم، يبدو أن نمط 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]. بخلاف ذلك، أتفق معك.

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

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