マークダウン、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 style="color:red">some red markdown text</span>
    • some red markdown text
  • bbcode: [color=red]Red color text[/color]
    • [color=red]Red color text[/color]
「いいね!」 1

はい、HTMLインラインスタイルはサポートされていないようです。

こちらのガイドをご利用ください。

(実際の動作はこちらで確認できます: https://unicyclist.com/t/wiki-schlumpf-hub-serial-numbers-reference/106130)

または、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

現在、tdおよびth要素のrowspanおよびcolspan属性がフィルタリングされるように設定されているようです。これらは安全であり(非常に役立つと信じています)、チームはこの属性を許可することに前向きでしょうか?

余談ですが、@Canapinさんが許可されているtableタグの場所について話していました。

しかし、.../discourse-markdown/table.jsファイルは、特にMarkdownテーブルに関する実装のようですが、通常のHTMLテーブルにはallowListの別の拡張が必要でしょうか?

rowspancolspanは非常に安全だと信じていますが、もう1つのマークアップについても依頼したいと思います。data-*属性をテーブル要素で許可していただけますか?これは、特にカスタムCSSのフックとして使用するための、さまざまな種類のテーブルコンテンツを指定するのに非常に役立つと思います。

「いいね!」 1

こんにちは :slight_smile:

これは予想よりも難しいと思います。
投稿でHTMLテーブルを作成し、誰かがそのテーブルを引用した場合、Markdownに変換されますが、Markdownは rowspancolspan をサポートしていません。

他にも思いつかなかった問題があると思います。

まったく同じではありませんが、テーブルを [wrap] タグで囲むことができます :slight_smile:
参照: Customize posts' contents with your own styles
ただし、HTMLテーブルの 内部data- 属性(たとえば、特定の行やセルをカスタマイズするため)を持つことはできません。

編集: テーブルがHTMLではなくMarkdownを使用している場合、次のように data- 属性を持つスパンを挿入できます。

|列1 | 列2|
|--- | ---|
|<span data-thing>テスト</span> | テスト|
|テスト | テスト|

しかし、誰かがテーブルを引用したりコピー&ペーストしたりすると削除されます。

「いいね!」 1

Discourse に追加された生の HTML で、単純で安全なインライン CSS スタイルが解釈されるようになると非常に便利です。これは、以前のフォーラムエンジンから変換された HTML 投稿や、ユーザーがテキストや画像の配置などのリッチテキストを貼り付ける場合があるためです。

以下は期待どおりに機能します。



<div align="center">
<p>Test</p>
</div>

Test

しかし、これは機能しません。


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

Test


インラインの <span style="color: ... フォーマットでも同様です。

変換されたコンテンツや、他の WYSIWYG エディターから貼り付けられたコンテンツには、このようなインラインスタイルが含まれている可能性が高いです。

style 属性は、簡単に問題を発生させる可能性があるため、Discourse では許可されていません。

また、Discourse には投稿での情報の表示方法に関する特定の哲学があり、意図的にタグや属性を制限しています。

<div> の align 属性は、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]を使用してください。それ以外は同意します。

学術論文の引用について話していました。

これはとても役に立ちました!本当にありがとうございます!:grinning_face: