Markdown、BBCode、HTMLを使った投稿の書式設定

:bookmark: このリファレンスガイドでは、markdown、BBCode、HTMLを含む、Discourseの投稿で利用可能なすべての書式設定オプションについて詳しく説明します。サポートされている内容と、例を確認できるリソースを示します。

:person_raising_hand: 必須ユーザーレベル: 全ユーザー

投稿でサポートされている書式設定の理解

ほとんどの返信ではプレーンテキストで十分ですが、Discourseではユーザーがmarkdown、BBCode、HTMLを使用して投稿の書式設定を強化できます。このガイドでは、サポートされている書式設定の種類と、それらを効果的に使用する方法について説明します。

また、@discobot にプライベートメッセージを送信するか、Discourseサイトのいずれかで送信することで、インタラクティブなチュートリアルで基本的な操作を練習することもできます。

要約

このガイドでは、以下の内容を扱います。

  • サポートされているmarkdown構文
  • サポートされているBBCodeタグ
  • サポートされている安全なHTMLタグと属性

ベストプラクティス

  • 主にmarkdownのシンプルさと可読性を利用します。
  • markdownとBBCodeは必要な場合にのみ混在させ、使用法を一貫させます。
  • HTMLの使用は、書式設定の問題を回避し、投稿の安全性を確保するために、シンプルで安全なタグに限定します。

サポートされているmarkdown

Discourseは、markdownの実装に markdown-it を使用しています。

一般的に使用されるmarkdown機能には以下のようなものがあります。

  • 太字: **text**

  • 斜体: *text*

  • リンク: [title](https://example.com)

  • インラインコード: `code`

  • ハイライト: <mark></mark>

  • コードブロック:

    ```
    code block
    ```
    

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

# Heading 1
## Heading 2
### Heading 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]

markdownによってサポートされている、またはサポートされている単純な書式設定のためのBBCodeタグ:

  • [b]強調[/b]
  • [i]強調表示[/i]
  • [u]下線付き[/u]
  • [s]取り消し線[/s]
  • [ul][li]オプション1[/li][/ul]
  • [img]http://example.com/image.png[/img]
  • [url]http://example.com[/url]
  • [code]コード[/code]

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

サポートされているHTML

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

許可されているHTMLタグには以下のようなものがあります。

  • <a href="https://example.com">リンク</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を使用してください。

FAQ

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

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

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

追加リソース

「いいね!」 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:

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

「いいね!」 2

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

「いいね!」 1