使用 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>

  • 代码块:

    ```
    code block
    ```
    

在较长的帖子(如本帖)中,使用标题来添加结构也很有帮助:

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

注意:上传图片时,引用图片的 Markdown 语法会自动生成。

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

有关 Markdown 功能的完整列表,请参阅交互式指南

支持的 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]

支持与 Markdown 兼容的简单格式的 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 与 Markdown 混合使用,但只允许特定的 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>colored text</span>。有关自定义样式,请参阅使用您自己的样式自定义帖子内容

常见问题和解决方案

  • BBCode 或 HTML 标签不起作用: 确保您使用的标签是受支持子集的一部分。
  • 内联样式被移除: 出于安全原因,Discourse 不支持内联样式。如有必要,请使用自定义样式或插件。
  • 从其他编辑器粘贴时格式发生变化: 某些富文本格式可能无法正确渲染。使用 Markdown 来保持格式一致性。

常见问题解答 (FAQs)

问:我可以在 Discourse 中使用表格吗?
答:是的,您可以使用 Markdown 创建表格。有关更多信息,请参阅此表格指南

问:为什么我的内联样式不起作用?
答:出于安全原因,Discourse 不支持 HTML 中的内联样式。请考虑使用自定义 BBCode 或 Discourse 自定义样式指南。

问:我可以添加自定义 BBCode 标签吗?
答:是的,您可以添加自定义 BBCode 标签。有关更多信息,请参阅Discourse BBCode 插件

附加资源

31 个赞

这些参考资料均未提及表格。

2 个赞

但是这个话题是真的。 Adding a table to your post using markdown

2 个赞

文本颜色和文本背景颜色似乎无法与 <span> 或 bbcode 一起使用,我是否遗漏了什么?

  • <span><span>一些红色的 markdown 文本</span>
    • 一些红色的 markdown 文本
  • bbcode:[color=red]红色文本[/color]
    • [color=red]红色文本[/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 个赞

看起来目前过滤器设置如下:tdth 元素上的 rowspancolspan 属性被过滤掉了。我的理解是这些是安全的(而且我认为它们非常有用):团队是否愿意允许这些属性?

顺便说一下,@Canapin 谈到了允许列表 table 标签的位置。

但是,.../discourse-markdown/table.js 文件似乎是专门围绕 Markdown 表格实现的;常规 HTML 表格是否需要一个单独的 allowList 扩展?

我相信 rowspancolspan 是相当安全的,但我也想请求另一种标记。我们能否允许 table 元素上的 data-* 属性?我认为这对于指定不同类型的表格内容非常有用,特别是可以作为自定义 CSS 的钩子。

1 个赞

你好 :slight_smile:

我认为这会比预期的要棘手。
如果你在帖子中创建了一个 HTML 表格,有人引用了你的表格,它会被转换为 Markdown,而 Markdown 不支持 rowspancolspan

我怀疑还会出现其他我没想到的问题。

这不完全一样,但你可以用 [wrap] 标签包裹你的表格 :slight_smile:
参见:Customize posts' contents with your own styles
但你无法在 HTML 表格 内部 使用 data- 属性(例如,用于自定义特定行或单元格)。

编辑:如果你的表格使用的是 Markdown 而不是 HTML,你可以像这样插入带有 data- 属性的 span:

|列 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: ... 格式也存在同样的问题。

从其他所见即所得编辑器转换/粘贴的内容中,更有可能包含类似的内联样式。

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 个赞