Developer Forum Formatting Guide

Developer Forum Formatting Guide


The Developer Forum has three different ways of formatting posts and topics: Markdown, BBCode, and HTML. In this topic, I will be demonstrating how to format text in as many ways as possible, there may be sections without a code or two you can use.

The current simple/advanced tutorial that @discobot provides is helpful but simple, it doesn’t tell you some cool formats that you can use when creating topics.


Update Log - 02/13/2021
  • Renamed “Quotes” to “Blockquotes”



Table of Contents



If you would like anything added to this topic feel free to message me on the Developer Forum, discord, or just simply by replying to this topic with your suggestion(s).


DevForum: @Archasion
Discord: AmusingDev#2483


Text Formatting



Bold text


Markdown

**Bold**

BBCode

[b]Bold[/b]

HTML

<b>Bold</b>

Making your text italic


Markdown

*Italic* or _Italic_

BBCode

[i]Italic[/i]

HTML

<i>Italic</i>

Making your text underlined


BBCode

[u]Underlined[/u]

Making your text strikethrough


Markdown

~~Strikethrough~~

BBCode

[s]Strikethrough[/s]

HTML

<s>Strikethrough</s>

Subscript


HTML

H<sub>2</sub>O

Superscript


HTML

5<sup>3</sup> * 24

Colored text


[NOTE] It is not recommended to color your text because it may overlap the discourse backgrounds.

BBCode

[color=red]Colored[/color]

HTML

<font color=red>Color</font>

Links


Markdown

[Word](https://roblox.com)

BBCode

[url=https://roblox.com]Word[/url]

HTML

<a href="https://roblox.com">Word</url>

Buttons/Keyboard shortcuts


Ctrl + C Ctrl + V

HTML

<kbd>Ctrl + C</kbd>

Code blocks


Markdown

Add 4 spaces before typing
Or
```Code```

BBCode

[code]Code[/code]

Blockquotes


Markdown

> Quote

BBCode

[quote]Quote[/quote]
or
[quote=A simple quote]Quote[/quote] #You can do this to name the quote

Headings


Examples

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Markdown

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

BBCode

[size=1]Heading[/size]
[size=2]Heading[/size]
[size=3]Heading[/size]
[size=4]Heading[/size]
[size=5]Heading[/size]
[size=6]Heading[/size]
[size=7]Heading[/size]

HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Blurring text spoiler


BBCode

[spoiler]Spoiler[/spoiler]

Add an emoji :slight_smile:


:emoji name: 

Mentioning Users


@Username -- e.g. @discobot

Decoration



Dividers


Markdown

---
or
***
or
___

HTML

<hr>

Table of Contents


Example
Shopping List Check
Bread :heavy_check_mark:
Milk :heavy_check_mark:
Butter -
Chocolate -
Ramen :heavy_check_mark:

Markdown

| Title 1 | Title 2 |
| --- | --- |
| Item 1 | Item 2 |
| Item 3 | Item 4 |

BBCode

[table]
  [tr]
    [th]Title 1[/th]
    [td]Item 1[/td]
    [td]Item 3[/td]
  [/tr]

  [tr]
    [th]Title 2[/th]
    [td]Item 2[/td]
    [td]Item 4[/td]
  [/tr]

[/table]

HTML

<table>
  <tr>
    <th>Title 1</th>
    <td>Item 1</td>
    <td>Item 3</td>
  </tr>

  <tr>
    <th>Title 2</th>
    <td>Item 2</td>
    <td>Item 4</td>
  </tr>

</table>

Bullet Points


Example
  • Item 1
  • Item 2
  • Item 3

Markdown

- Item 1
- Item 2
- Item 3
or
* Item 1
* Item 2
* Item 3

BBCode

[list]
  [li]Item 1[/li]
  [li]Item 2[/li]
  [li]Item 3[/li]
[/list]

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Drop Down Section


Drop Down Section

BBCode

[details=Drop Down]
Secret
[/details]

HTML

<details>
<summary>Drop Down</summary>
Secret
</details>

Calendar


2020-02-11T00:00:00Z

BBCode

[date=Year-Month-Day timezone=Continent/City]

Poll


  • Option 1
  • Option 2

0 voters

BBCode

[poll type=regular results=on_close/on_vote chartType=pie/bar close=Year-Month-DayTHours-Minutes-Seconds-MillisecondsZ]
* Option 1
* Option 2
[/poll]

Images


You can do it by uploading it from your computer or using one of these methods.

BBCode

[img]https://imageaddress.com[/img]

HTML

<img src="Image.png"></img>

Resizing images [%]


BBCode

![Image name|Image scale, 100%](Image link) 

HTML

<img src="Image.png" style="max-width:100%;max-height:100%;"></img>

Gap


HTML

<br>

Other



Anchor points


[NOTE] When creating an anchor, the anchor’s name has to be different from all the other anchors that were created on the topic you are replying to, if not, the link will send the user to the first anchor that was created with that name.


[Anchor](#AnchoredPoint) -- Change 'Anchor' to something else (Anchor=Link)

## <a name="AnchoredPoint">Anchor</a> -- Change 'Anchor' to something else

Aligning Text


HTML

<div align="center">Text</div>
or
<div align="left">Text</div>
or
<div align="right">Text</div>

Attaching emails


BBCode

[email]support@roblox.com[/email]

Attaching YouTube videos


BBCode

[youtube]{ID}[/youtube]

Viewing raw topics


In order to view the raw version of topics you need to replace “devforum.roblox.com/t/topic-name/ID” with “devforum.roblox.com/raw/ID”.

Example

Original: https://devforum.roblox.com/t/developer-forum-formatting-guide/456083
Raw: https://devforum.roblox.com/raw/456083

As you see, the number 456083 is the ID.


Back to Start

207 Likes

This is a very comprehensive and helpful post, especially to those new to the forum and doesn’t have much knowledge on the different types of text encoding on the forum. This resource has been much needed for quite a long time. Thank you for taking the time to make this guide :slightly_smiling_face:

10 Likes

Only thing I would add is that for longer code blocks it’s a lot easier to do three backticks (```) at the start and optionally at the end if you want to type more normal text below it. Easier than adding four spaces to every line of code.

7 Likes

This is a very helpful post, thank you.

2 Likes

Oh my gosh, I can’t believe that the Devforum supports colors, I didn’t know that!

Thank you so much!

2 Likes

Should be noted: please do not color significant parts of your post and keep in mind that if you use coloring, your post will likely break across current and future Discourse themes because the colors may overlap with background, be hard to read w.r.t. contrast on certain themes, etc. Generally would advise not to color text and use other constructs to highlight sentences (bolding, italics, headers, etc).

8 Likes

Woah, thanks!
Always wondered how they made tables :thinking:

Anywho, instead of using three dashes (---) to create a divider, you can also use three asterisks (***) or three underscores (___).

1 Like

Hello!

First of all, thanks for the guide, explaining step for step, how to properly format.

I think this was a very important thing that necessary to do on the forums, since not every member knows how formatting works.

We want all of our developers on the platform, to understand each other, imagine and create. Organizing your post, is an important factor of the Developer Forums, to understand, imagine and create.

1 Like

I’d just like to add the kbd tag

<kbd>Hamburger</kbd>

Example

To see a list of Keyboard Shortcuts for the forum, click the “hamburger” menu and click on Keyboard Shortcuts

Although this tag is nearing deprecation and better effects can be made with CSS or custom labels, this is still easier to input.

2 Likes

How do I add a blank space seporating parts like Welcome to Bloxburg’s update log has that.




Never mind.

1 Like

How can I increase the size of the text in my topic?

Yes

No

Ok yes

Actually, no

Uhh nvm, yes
NO NVM NO

####### Nothing new

Add hashtags then a space to size your text.

# Biggest
## Bigger
### Big
#### Small
##### Smaller
###### Smallest
####### Nothing new

1 Like

Okay thank you so much! I will try it and see if it works! Thanks.
Update: it worked. Thank you so much!

1 Like

This is a very informative post! I actually have been wondering how you strike your word and now I know thanks to you!

1 Like

This is honestly really useful! Learned alot of stuff from this Guide!

3 Likes

Thanks! I used this in my portfolio, thanks for the format! I always wondered how they did these stuff in the first place.

3 Likes

another good tip for any other formatting is you can get the raw contents of a post (e.g https://devforum.roblox.com/raw/456083/) so you can copy the format

10 Likes