使用Markdown、BBCode和HTML让您的帖子多姿多彩

Calorie · 2023 年4 月 10 日 09:53

Futarino: 在此处输入。使用 Markdown、BBCode 或 HTML 进行格式化。拖动或粘贴图片。

你：啊？什么是Markdown？什么是BBCode？什么是HTML？

Markdown

简而言之，Markdown 是一种轻量级的标记语言，可用于在纯文本文档中添加格式化元素。Markdown 由 John Gruber 于 2004 年创建，如今已成为世界上最受欢迎的标记语言之一。

专注于文字内容；
纯文本，易读易写，可以方便地纳入版本控制；
语法简单，没有什么学习成本，能轻松在码字的同时做出美观大方的排版。

让我们开始吧！

粗体（Bold）

要加粗文本，请在文本前后各添加两个星号（*）。

Markdown语法	预览效果
`我把文本加粗了。`	我把文本加粗了。
`我把一整句话加粗了。`	我把一整句话加粗了。
`标点后面必须加一个空格，否则无法识别。`	标点后面必须加一个空格，否则无法识别。
`标点后面必须加一个空格，否则无法识别。`	标点后面必须加一个空格，否则无法识别。

斜体（Italic）

要用斜体显示文本，请在文本前后各添加一个星号（*）。

Markdown语法	预览效果
`我把文本变成斜体了。`	我把文本变成斜体了。
`我把一整句话变成斜体了。`	我把一整句话变成斜体了。
`标点后面必须加一个空格，否则无法识别。`	标点后面必须加一个空格，否则无法识别。
`标点后面必须加一个空格，否则无法识别。`	标点后面必须加一个空格，否则无法识别。

同时粗体（Bold）和斜体（Italic）

要同时用粗体和斜体突出显示文本，请在单词或短语的前后各添加三个星号。

Markdown语法	预览效果
`呼呼，我*很重要*！`	呼呼，我很重要！

划去

要用划去文本，请在文本前后各添加两个半角波浪线（~）。

Markdown语法	预览效果
`我把文本~~划掉~~了。`	我把文本划掉了。
`~~我把一整句话划掉了。~~`	~~我把一整句话划掉了。~~
`~~标点后面必须加一个空格，~~否则无法识别。`	~~标点后面必须加一个空格，~~否则无法识别。
`~~标点后面必须加一个空格，~~ 否则无法识别。`	~~标点后面必须加一个空格，~~ 否则无法识别。

链接

链接文本放在中括号内，链接地址放在后面的括号中。你还可以可选地加入鼠标悬停文字。

Markdown语法	预览效果
`[百度](https://baidu.com)`	百度
`[百度](https://baidu.com "把鼠标放在链接上就能看到我")`	百度
`[链接可以和别的语法~~嵌套~~](https://baidu.com)`	链接可以和别的语法嵌套

图片

在Futarino，上传图片的最简单方法当然是直接拖动、复制粘贴（电脑版）或者点击上传按钮（手机版）

不过，偶尔你也会用到传统版本的图片插入：图片说明文本可选，放在中括号内。图片链接地址放在后面的括号中。你还可以可选地加入鼠标悬停文字。

![这是图片](https://futarino.online/uploads/default/original/1X/d8f26edbcaf647e4964c49bb4138f7b5ab3ff0f2.png "Futarino")

渲染结果：

注释

要添加注释，你有两种方式：

Markdown语法	预览效果
`一段文本^[注释内容]`	一段文本^[1]
`一段文本[^1] ……（中间可以写别的东西） [^1]: 注释内容`	一段文本^[2]

注释中可以插入别的元素^[3]，比如这样：

注释中可以插入别的元素^[这是一张Futarino的图片
![这是图片](https://futarino.online/uploads/default/original/1X/d8f26edbcaf647e4964c49bb4138f7b5ab3ff0f2.png "Futarino") 
]，比如这样：

标题

要创建标题，请在单词或短语前面添加井号，记得带一个空格(# ) 。# 的数量代表了标题的级别。例如，添加三个 # 表示创建一个三级标题 (<h3>)。

Markdown语法	预览效果
`# 一级标题`	一级标题
`## 二级标题`	二级标题
`### 三级标题`	三级标题
`#### 四级标题`	四级标题
`##### 5级标题`	5级标题
`###### 6级标题`	6级标题
`####### 没有7级标题了`	####### 没有7级标题了

还可以用文本下方的一串等于号（=）或者减号（-）来表示一级标题和二级标题

Markdown语法	预览效果
`一级标题 =========`	一级标题
`二级标题 ---------`	二级标题

分隔线

要创建分隔线，请在单独一行上使用三个或更多个星号 (***)、破折号 (---) 或下划线 (___) ，并且不能包含其他内容。

Markdown语法	预览效果
`---`

块引用

要创建块引用，请在每行前添加一个 > 符号。

> 好雨知时节，当春乃发生。

渲染效果如下所示：

好雨知时节，当春乃发生。

多个段落的块引用

块引用可以包含多个段落。为段落之间的空白行添加一个 > 符号。

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

渲染效果如下：

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

嵌套块引用

块引用可以嵌套。在要嵌套的段落前重复写 > 符号。

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> > The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

渲染效果如下：

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

你可以无限重复 > 符号：

> > > > > > > 呼呼！三角形！

渲染效果如下：

呼呼！三角形！

嗯……

好大的三角形！

列表

使用 1. 2. 3. 这样的格式插入有序列表。点号后面必须插入空格。使用 - xxx 或 * xxx的格式插入无序列表。
其实有序列表只要以 1. 开始就行，不需要你自己排序，Markdown会帮你排序。
空四个空格，可以让列表缩进一个层级。
列表可以嵌套。

Markdown语法预览效果

1. First item
2. Second item
3. Third item
4. Fourth item

First item
Second item
Third item
Fourth item

1. First item
1. Second item
1. Third item
1. Fourth item

First item
Second item
Third item
Fourth item

1. First item
2. Second item
    1. Indented item
    1. Indented item
        1. Indented item
    1. Indented item
3. Third item
    1. Indented item
4. Fourth item

First item
Second item
1. Indented item
2. Indented item
  1. Indented item
3. Indented item
Third item
1. Indented item
Fourth item

Markdown语法预览效果

- First item
- Second item
- Third item
- Fourth item

First item
Second item
Third item
Fourth item

* First item
* Second item
* Third item
* Fourth item

First item
Second item
Third item
Fourth item

- First item
- Second item
    * Indented item
        1. Indented item
        1. Indented item
              * Indented item
    * Indented item
- Third item
    1. Indented item
    1. Indented item
- Fourth item

First item
Second item
- Indented item
  1. Indented item
  2. Indented item
    - Indented item
- Indented item
Third item
1. Indented item
2. Indented item
Fourth item

在列表中嵌套其他元素

要在保留列表连续性的同时在列表中添加另一种元素，请将该元素缩进四个空格或一个制表符，如下例所示：

- 这是一份代码
  ```
  print hello
  ```
- 这是一段话
  
  这是另一段

  > 还可以插入引用

它会被渲染为：

这是一份代码
```
print hello
```
这是一段话

这是另一段

还可以插入引用

代码

用左右至少各一个反引号 ` 包裹一段代码来插入行内代码。

Markdown语法	预览效果
`print("hello world")`	`print("hello world")`

三个反引号插入代码块。

```haskell
markdown = "powerful"
```

将得到

markdown = "powerful"

表格

Markdown 的表格较为复杂：请参照下列进行：

| Syntax      | Description |
| ----------- | ----------- |
| Header      | Title       |
| Paragraph   | Text        |

会被渲染为

Syntax	Description
Header	Title
Paragraph	Text

不过，futarino提供了一种额外的csv表格支持，也就是：

```csv
Syntax, Description
1, 2
3, 4
```

会被显示为：

Syntax, Description
1, 2
3, 4

数学

使用美元符号$ 插入LaTeX代码。Futarino使用的是KaTeX。注意，美元符号两边必须要是空白字符。

$e^{i\pi}=-1$

会被渲染为

e^{i\pi}=-1

转义

前面用到了许多字符，比如星号*、下划线_、减号- 等等——如果偏偏我就要写一段文字要用到原始的这些字符怎么办？

请在前面加入反斜杠\。例如

这句话\*\*不会\*\*被加粗了，因为用到了反斜杠\\

渲染结果：

这句话**不会**被加粗了，因为用到了反斜杠\

BBCode

BBCode 是 Bulletin Board Code 的缩写，属于轻量级标记语言（Lightweight Markup Language）的一种，如字面上所显示的，它主要是使用在BBS、论坛、Blog 等网络应用上。
BBCode明显比Markdown复杂，因此我们略过一些显然使用Markdown更好处理的内容。

所有的BBCode都以 [tag param] ... [/tag] 的格式进行。

BBCode 引用

BBCode风格的引用可以给你带来比Markdown更加丰富的信息。例如：

[quote="Lhc_fl, post:1, topic:279"]
要加粗文本，请在文本前后各添加两个星号（`*`）。
[/quote]

会被渲染为

BBCode 折叠

[details="摘要"]
此文本将被隐藏
[/details]

会被渲染为：

摘要

此文本将被隐藏

BBCode 打码

可以[spoiler]像这样[/spoiler]把文本打码

[spoiler]

![图片也行](https://futarino.online/uploads/default/original/1X/d8f26edbcaf647e4964c49bb4138f7b5ab3ff0f2.png "Futarino")

[/spoiler]

会被渲染为：

可以像这样把文本打码

BBCode 文字颜色与背景

可以[color=pink]像这样[/color]给文字上色，[bgcolor="yellow"]背景颜色[/bgcolor]也是如此。

会被渲染为：

可以像这样给文字上色，背景颜色也是如此。

BBCode 文字居左、居右、居中

[left]文字居左[/left]
[center]文字居中[/center]
[right]文字居右[/right]

会被渲染为：

文字居左

文字居中

文字居右

BBCode 文字大小调节

警告

请勿滥用字体大小调节

[size=50]这些字很小[/size]但是[size=200]这些字很大[/size]

会被渲染为：

这些字很小但是这些字很大

BBCode 指定字体

[font="Times"]Times New Roman[/font] 是一种衬线字体

会被渲染为：

Times New Roman 是一种衬线字体

HTML

HTML 是用来描述网页的一种语言——超文本标记语言: HyperText Markup Language。
HTML非常复杂，但是极其强大。
Futarino只支持HTML的一些安全子集。这里只列出一些很有用的内容。

HTML 上下标

这是HTML<sup>上标</sup>和<sub>下标</sub>
H<sub>2</sub>SO<sub>4</sub>

会被渲染为：

这是HTML^上标和_下标
H₂SO₄

HTML 注音

<ruby>版务志愿者<rt>Lycoris</rt></ruby> 是Futarino的小版主。

会被渲染为：

版务志愿者Lycoris 是Futarino的小版主。

注释内容 ↩︎
注释内容 ↩︎
这是一张Futarino的图片

Futarino1671×413 24.8 KB

↩︎

Calorie · 2023 年4 月 23 日 13:16

进阶：特色格式

除上面之外，Futarino还加入了一些非规范的，只有Futarino可用的特色格式，这些格式随时可能会积极变更。这里列出以供查询：

图像墙

该功能相关公告请参见新功能：图像墙。

如果您在一个帖子中发了许多图片，你现在可以让它们自动变成好看的图片墙。方法是，将它们包裹在[grid]...[/grid]标签内。这是Discourse最近添加到核心内的功能。

例如：

[grid]
![image|690x388](upload://g2RUfudApzuYduqJuWCMbJQtOJ7.jpeg)
![image|341x500](upload://1Lote0nnrKNSoc7cWQ0KjvhxNRf.jpeg)
![image|334x500](upload://m62oOUhAhws3NItaDjrxLM60Wvw.jpeg)
![image|690x438](upload://9DFwS9WM2xBDwbrPWr43WJ4B3eH.jpeg)
![image|690x302](upload://gtCtzg0OmUZajJRQqtFVTSdOBw1.jpeg)
![image|690x302](upload://oAQi7KvfH3AZYRjzIeYswu5CGfF.jpeg)
[/grid]

会显示为

csv表格

Futarino会把csv格式的代码块自动扩展为表格。表格可以指定一个单词作为标题。

```csv title=Title
表头,表头2,表头3
1,2,3
4,5,6
```

表头,表头2,表头3
1,2,3
4,5,6

Font Awesome 5 图标

使用 [wrap=icon id="font-awesome-5-icon-id"][/wrap] 插入Font Awesome 5 图标

例如，可以使用 [wrap=icon id="cog"][/wrap] 插入图标。

按钮

使用 <span data-theme-name="button"> </span> 或 <div data-theme-name="button"> </div> 框起来链接以插入按钮。其中，“button” 还可以写作 “button-normal”

按钮插入较为复杂，这里给出两个示例：

<span data-theme-name="button"> [ [wrap=icon id="home"][/wrap] 点我返回主页](/)</span>

点我返回主页

<span data-theme-name="button-normal"> [ [wrap=icon id="home"][/wrap] 点我返回主页](/)</span>

点我返回主页

突出框

[wrap=block]
如果你写了一大段想要突出的内容
并且这些内容和你的上下文有一些显著的需要区分的地方

[wrap=block]
你可以试试这样
把你的内容框起来
[/wrap]

支持嵌套
[/wrap]

如果你写了一大段想要突出的内容
并且这些内容和你的上下文有一些显著的需要区分的地方

你可以试试这样
把你的内容框起来

支持一定程度上的嵌套

[wrap=block]
# 说明
第一个标题会成为整个block的标题
# Title 2
第二个不会
[/wrap]

说明

第一个标题会成为整个block的标题

Title 2

第二个不会
但是可以通过加上 titles=true 参数打开多标题开关

[wrap=block titles=true]
# Title 1
This is the begin of this block.
# Title 2
This is the begin of the second block 
[/wrap]

Title 1

This is the begin of this block.

Title 2

This is the begin of the second block

提示

可以通过形如下面的格式书写提示

[wrap=tips]
这是一条提示
[/wrap]

这是一条提示

提示有三种类别，提示、成功提示(success)和警告(warn)

[wrap=tips type=success]
这是一条成功提示
[/wrap]
[wrap=tips type=warn]
这是一条警告
[/wrap]

这是一条成功提示

这是一条警告

提示可以加入标题。欲加入标题，你还需要加上title=true声明。
使用 # 书写标题。

[wrap=tips title=true]
# 标题1
这是一条带标题的提示
[/wrap]
[wrap=tips type=warn title=true]
# 标题2
这是一条带标题的提示
[/wrap]
[wrap=tips type=success title=true]
# 标题3
这是一条带标题的提示
[/wrap]

标题1

这是一条带标题的提示

标题2

这是一条带标题的提示

标题3

这是一条带标题的提示

首行缩进

可以通过形如下面的格式声明某个段落是需要首行缩进的

[wrap="首行缩进"]
简而言之，Markdown 是一种轻量级的标记语言，可用于在纯文本文档中添加格式化元素。Markdown 由 John Gruber 于 2004 年创建，如今已成为世界上最受欢迎的标记语言之一。
[/wrap]

简而言之，Markdown 是一种轻量级的标记语言，可用于在纯文本文档中添加格式化元素。Markdown 由 John Gruber 于 2004 年创建，如今已成为世界上最受欢迎的标记语言之一。

Calorie · 2023 年5 月 17 日 08:12

如果您需要使用传统的方式显示注释，而非现在的内联模式^[1]，请在帖子任何您喜欢的位置插入声明：

<div data-inline-footnote=false></div>

正如现在这个帖子一样，现在注释将显示在全文的最下方。

将注释显示成可展开的按钮，例如上面的教程 ↩︎

使用Markdown、BBCode和HTML让您的帖子多姿多彩

Markdown

粗体（Bold）

斜体（Italic）

同时粗体（Bold）和斜体（Italic）

划去

链接

图片

注释

标题

一级标题

二级标题

三级标题

四级标题

5级标题

6级标题

一级标题

二级标题

分隔线

块引用

多个段落的块引用

嵌套块引用

列表

在列表中嵌套其他元素

代码

表格

数学

转义

BBCode

BBCode 引用

BBCode 折叠

BBCode 打码

BBCode 文字颜色与背景

BBCode 文字居左、居右、居中

BBCode 文字大小调节

警告

BBCode 指定字体

HTML

HTML 上下标

HTML 注音

进阶：特色格式

图像墙

csv表格

Font Awesome 5 图标

按钮

突出框

说明

Title 2

Title 1

Title 2

提示

标题1

标题2

标题3

首行缩进