Demonstration of current forum formatting codes

现在论坛帖子支持了 Markdown + BBCode + HTML 排版,我一个一个介绍吧。
首先 Markdown 应该各位很熟悉了, Hack.chat、Github、以及以前的论坛都是用的,在此简单说一下即可


Markdown 格式

文本格式

效果 源码
斜体文本 或 斜体文本 *斜体文本* 或 _斜体文本_
粗体文本 或 粗体文本 **粗体文本** 或 __粗体文本__
粗体斜体 ***粗体斜体***
删除线文本 ~~删除线文本~~
行内代码 `行内代码`

这些由于独占一行,单独拿出来

引用文本

> 引用文本

 

嵌套引用

>> 嵌套引用

列表

  • 无序列表项
  • 另一种无序列表
    • 嵌套列表项
  1. 有序列表项
  2. 有序列表项
- 无序列表项

* 另一种无序列表
   - 嵌套列表项

1. 有序列表项
2. 有序列表项

标题级别

H1 标题

H2 标题

H3 标题

H4 标题

H5 标题
H6 标题
# H1 标题
## H2 标题
### H3 标题
#### H4 标题
##### H5 标题
###### H6 标题

链接与图片

[链接文本](https://example.com)
![图片描述](https://example.com/image.jpg)

其他元素

分割线:


--- 或 ***

 
代码块:

print("Hello World!")
```python
print("Hello World!")
```

或者

~~~javascript
console.log("Hello World!");
~~~

你知道吗:代码块可以是多个 ~ 或者 ` 组成的开始/闭合,这样子就可以代码块中有代码块:

````````
```text
hello, Nodeloc
```
````````

渲染效果:

```text
hello, Nodeloc
```

表格

Markdown 的表格是这样子的

|表头1|表头2|
|:----|---:|
|a|b|
|c|d|

渲染效果:

表头1 表头2
a b
c d

这个第二行的 |:----|---:| 就决定了每个列是怎么定位(靠左、居中、靠右)

  • :- 靠左
  • :-: 居中
  • -: 靠右

-数量不影响效果

交叉引用(是这个名字吗)

你可以在一句话^[完整的一个句子]中插入交叉引用,然后会显示成上标[1],帖子底部会显示注释。

你可以在一句话[1]中插入交叉引用,然后会显示成上标[1],帖子底部会显示注释。

注:Nodeloc 的 Markdown 似乎不是完整的,部分用不了


然后就是 BBCode 了,据我所知那个 !Di什么 就是这个,还记得我当时学这个去浏览器搜,搜到了真的关于BB的……不堪入目的东西。
BBCode 的格式很统一,就是[tag=something][/tag]格式

文本格式

效果 源码
加粗文本 [b]加粗文本[/b]
斜体文本 [i]斜体文本[/i]
下划线文本 [u]下划线文本[/u]
删除线文本 [s]删除线文本[/s]
红色文本 [color=red]红色文本[/color]
ee色文本 [color=#44ff00]ee色文本[/color]

注:Nodeloc 的 BBCode 似乎不是完整的,部分用不了(比如居中文本、调整字号、列表)

链接与图片

[url=https://example.com]链接文本[/url]
[img]https://example.com/image.jpg[/img]

引用

[quote]引用的文本内容[/quote]

代码块

print("Hello World!")
[code]print("Hello World!")[/code]

最后是HTML了

文本格式

效果 源码
斜体文本 和 强调文本 <i>斜体文本</i> 和 <em>强调文本</em>
粗体文本 和 重要文本 <b>粗体文本</b> 和 <strong>重要文本</strong>
下划线文本 <u>下划线文本</u>
删除线文本 和 删除文本 <s>删除线文本</s> 和 <del>删除文本</del>
上标2 和下标2 上标<sup>2</sup> 和下标<sub>2</sub>

列表

  • 无序列表项
  • 另一个项目
    • 嵌套列表项
  1. 有序列表项
  2. 另一个项目
  <ul>
    <li>无序列表项</li>
    <li>另一个项目
      <ul>
        <li>嵌套列表项</li>
      </ul>
    </li>
  </ul>
  
  <ol>
    <li>有序列表项</li>
    <li>另一个项目</li>
  </ol>

表格

表头1 表头2
a b

链接与图片

  <a href="https://example.com">链接文本</a>
  <img src="https://example.com/image.jpg" alt="图片描述">

引用

引用的文本内容
![这是图片,不能直接复制](upload://5nZ1mu5ScqDSrcTHaVNcbr7rqQc.png)

其他元素

预格式化文本
  <pre>预格式化文本</pre>

 
代码块,但是好像会把英文撇号转中文:console.log(‘hello’)

  <code>代码块,但是好像会把英文撇号转中文:console.log('hello')</code>

 


  <hr> <!-- 分割线 -->

 
换
行

  换<br>行

除了以上这些,还可以用一些 HTML 转义字符,比如 &ensp; 是空格之类的。还有一些 Nodeloc专有的 BBCode:

附件

文件名.txt (文件大小)
这是图片,不能直接复制

 

回复可见

image

 

登录可见

这是图片,不能直接复制

 

付费可见

看在我这么辛苦写这个帖子的份上,施舍我10NL不过分吧~

这是图片,不能直接复制

这个 amount 后面的 10 就是要支付的能量

 

隐藏内容

总结

此文本将被隐藏

[details="总结"]
此文本将被隐藏
[/details]

这东西适合折叠一些很长的,非必要的文本

 

抽奖

没有这个是示范,避免帖子违规

[lottery]
title: 抽奖的标题
min_participants: 最小的开奖人数
max_participants: 最大能多少人参加
max_tickets_per_user: 每个人最多买多少奖票
min_trust_level: 要参与这个抽奖需要的信任等级
draw_at: 开奖时间,需要一个ISO 8601标准的日期时间
[level]
name: 奖品名称(一等奖、二等奖等)
prize: 奖品
quantity: 数量
[/level]
[/lottery]

  1. 完整的一个句子 ↩︎

14 Likes

很详细的教程! :xhj28:
支付10NL竟然没有让我确认就给了 :ac01:

1 Like

这个论坛特有的BBCode的优先级有点太高,比如回复可见标签,即使放入代码块内还是渲染

现在本文本实际上在代码块内,你可以看这个文本右上角有代码块的操作按钮(复制)

如果你点了上面这个代码块的复制,你会得到这个元素的 innerText:

现在本文本实际上在代码块内,你可以看这个文本右上角有代码块的操作按钮(复制)

 回复可见内容

hi

感谢分享,学习了~

回复可见优先高是因为之前引用会泄露所以提高了吧

1 Like
现在本文本实际上在代码块内,你可以看这个文本右上角有代码块的操作按钮(复制)

 回复可见内容

hi

确实哎 :xhj001:

这里不是回复可见优先性比 ```低一些吗 :xhj001:

老詹改过,现在是回复可见比``` 高

1 Like

应该是高了,如果是低的话就渲染不出来 回复后可见 这个提示

1 Like

感谢分享 很详细 辛苦了


无痕看了下没问题了,我刚才理解错了 :ac10:

1 Like

感谢分享,学习学习

学习学习

学习学习

学到了新知识

学习了

每天学点逛论坛小技巧 :xhj14:

感谢,已收藏

学习了,学习了

赞了

Very detailed tutorial!