Markdown、BBCode、HTMLを使用した投稿のフォーマット設定

:bookmark: このリファレンスガイドでは、Discourseの投稿で利用可能なすべての書式設定オプション(マークダウン、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>

  • 引用ブロック: > quoted text

  • コードブロック:

    ```
    code block
    ```
    

(これのような)長い投稿では、見出しを使用して構造を追加することも役立ちます。

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

注:画像がアップロードされると、画像を参照するためのマークダウン構文が自動的に生成されます。

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

マークダウン機能の全リストについては、インタラクティブガイドを参照してください。

サポートされているBBCode

Discourseは、一般的なBBCodeタグのサブセットをサポートしており、その一部は、例えば返信で投稿を引用する際などに、特別な書式設定をサポートするために自動的に生成されます。

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

また、BBCodeを使用してテキストをスポイラーや詳細として非表示にすることもできます。

spoiled text

[spoiler]spoiled text[/spoiler]
details="click to expand"\]hidden text\[/details
[details="click to expand"]hidden text[/details]

マークダウンでサポートされているか、またはサポートされている単純な書式設定のためのBBCodeタグ:

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

サポートされているBBCodeタグと例の完全なリストについては、Discourse BBCodeテストを確認してください。

サポートされているHTML

Discourseは、安全なHTMLのサブセットをサポートしています。HTMLをマークダウンと混在させることはできますが、セキュリティと一貫したスタイリングを保証するために、特定のHTMLタグと属性のみが許可されています。

許可されているHTMLタグの例:

  • <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">

許可されているHTMLタグと属性の詳細なリストについては、Discourseの許可リストを参照してください。

:information_source: 注: <span style="color:red">colored text</span>のようなインラインスタイルはサポートされていません。カスタムスタイルについては、投稿内容のカスタマイズを参照してください。

一般的な問題と解決策

  • BBCodeまたはHTMLタグが機能しない: 使用しているタグがサポートされているサブセットの一部であることを確認してください。
  • インラインスタイルが削除される: Discourseはセキュリティ上の理由からインラインスタイルをサポートしていません。必要に応じて、カスタムスタイルまたはプラグインを使用してください。
  • 他のエディタからの貼り付けで書式設定が変わる: リッチテキスト形式によっては正しくレンダリングされない場合があります。一貫したテキスト書式設定にはマークダウンを使用してください。

よくある質問 (FAQ)

Q: Discourseでテーブルを使用できますか?
A: はい、マークダウンを使用してテーブルを作成できます。詳細については、テーブルに関するこのガイドを参照してください。

Q: インラインスタイルが機能しないのはなぜですか?
A: Discourseはセキュリティ上の理由からHTMLのインラインスタイルをサポートしていません。代わりに、カスタムBBCodeまたはDiscourseのカスタムスタイリングガイドの使用を検討してください。

Q: カスタムBBCodeタグを追加できますか?
A: はい、カスタムBBCodeタグを追加できます。詳細については、Discourse BBCodeプラグインを参照してください。

追加リソース

「いいね!」 31

これらの参照には、テーブルに関する言及は一切ありません。

「いいね!」 2

それは本当ですが、この他のトピックはそうです。 Adding a table to your post using markdown

「いいね!」 3

テキストの色とテキストの背景色は、<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]
「いいね!」 2

はい、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:

そのリンクは壊れています。

「いいね!」 2

ありがとうございます!これで修正されたはずです。

「いいね!」 1

8件の投稿が新しいトピックに分割されました: composerでのH1とH2の見出しの使用