A guide to decorate your posts in forum!


Decorating your posts

ʚ⸻●⸻ʚ


( I've just discovered all the forums markdowns and special symbols that will make your post look alot cleaner )

[ • ] Why should we decorate our post?

Decorating your post will make it easier to understand, and it will make your post more clean! especially if you are creating a tutorial or sharing your creation.


[ • ] Using Special Symbols

Here are few links from where you can get these symbols.

You even can use your alt keys to get these special symbols!
You have to press Alt+Numpad_Key, to get the various symbols, if you are wondering what key gives what symbol or on phone then you can visit this website


[ • ] Using lists

Using list while explaining something will make your post look cleaner and easier to understand.

For example:

How to enable Http Requests?

First, publish your experience then follow the steps below:

  • In studio, go to Home tab.
  • Click on Game Settings
  • In game settings, click on Security
  • Then turn on the Allow HTTP Requests option.

To make an list, either click on the image or type * or 1 in front of your word.


[ • ] Using quotes

Quotes help alot decorating multiple sections in your post, just like this one.
To create a quote you can click on image or can type [quote] [/quote]


[ • ] Using hr

Hr stands for horizontal ruler in HTML, this also helps in dividing sections in your posts!
Achieving a horizontal ruler in your post, just simply do <hr>. Closing tag is not required.


[ • ] Aligning your text/image

You have seen multiple posts that have images or text at center.
Just like this one, heres an example below.

Hey I am the center text!

How you can achieve that?
Well its easy, you only have to do <div align="center"> </div>, you can include anything in between the div tag! a heading, an image literary anything!
If you want to make your text/image float to right like below

hi

then you can do <div align="right"> </div>, if well devforum already makes your text align to left so you dont need to worry for that, just in case if you are wondering how to do it then you can change align = "right" to align = "left".

[ • ] Using codeblocks

The codeblocks I know that roblox supports are
lua, diff, javascript, python, if you want more then you can check this github post.

Using diff:

image

+ I am positive!
- I am negative.
*** Italic
--- Italic again

Using lua:

image

local name : string = "ROBLOX"
local age : number = 16
print("Hi! I am "..name.." and I am "..age.." years old.")

Using Javascript:

image

const hello = "world"
var numbers = 1234
let abc = "alphabets"

console.log(`Hello ${hello}, numbers: ${numbers}, abc are ${abc}`)

Using python:

image

name = "Roblox"
print(name)

[ • ] Using headings

Headings are very useful, in html the heading tag is h. Headings includes 6 types.
1 is the largest and 6 is the smallest.
You can do <h1> to get the largest heading or <h6> to get the smallest heading, you even can do <h2>,<h3>,<h4>,<h5> but this tag requires close tag. <h1> Text </h1>
If you want an easy way then you can use #
the number of hashtags determines the number of heading, example # This is the largest heading, ###### This is the smallest heading (6th heading)
Example:

1st heading

2nd heading

3rd heading

4th heading

5th heading
6th heading

[ • ] Using spoilers

You can get a spoiler by clicking image after clicking the cog (settings) icon.
or you can simply use [spoiler] Text here [/spoiler]

Hey there I am a spoiler!


[ • ] Using tables

Tables can help you in various different ways! using a table, example below is player list example in a roblox game.
|Player|Level|Cash|
|-|-|-|
|Synitx|8|4219|
|ROBLOX|9|1009|

Output:

Player Level Cash
Synitx 8 4219
ROBLOX 9 1009

A simple to-do list.

If you want to use html to make table then its possible!
you can learn more about html tables here


[ • ] Changing an image size

when you upload an image you might see image as your image url, seeing those numbers? image yeah these! these are the size in px (pixels) change them to make your image big/small.
the format goes by width x height (wxh).

If you want to change an image size through % (percentage) you can add , percentage% after the size that is in pixels

Example:

![image|500x500,15%](upload://mu9m9RGvbuZXXMQCPYEmZxE2vHt.png)

So the size is 15% of the 500x500.
Output:


[ • ] Using sub,sup and kbd

I am sub, I am sup and I am a key

Sub tag

<sub> message </sub>

Sup tag

<sup> message </sup>

Kbd tag

<kbd> message </kbd>

[ • ] Adding a popup to your text

Hover me
image

<abbr title = "your title here"> text here </abbr>

[ • ] Text tricks

I am a highlight

<mark> I am a highlight </mark>

I am a light highlight

<ins> I am a light highlight </ins>

I am a red highlight

<del>I am a red highlight</del>
Lol different font
<pre>Lol different font</pre>

Alright! that’s the end of this guide, I know there alot of more things that I’ve missed.
I am giving few links from where you can learn more about these stuff.

Markdowns
Discourse guide ( Recommended )

The Discourse guide post explains more than my post but few of the features wont work because roblox havent added those plugins in this forum, but you should check them out.

If you wish to get the raw text of any post in devforum you can easily do
http://devforum.roblox.com/raw/{topicid}/{postid}

Getting post and topic id

You can get the topic id from the url:
https://devforum.roblox.com/t/a-guide-to-decorate-your-posts-in-forum/1762987 those numbers in the end image is the topic id.

The post id is basically the number of the post
image

Tip:
Did you know? You can use variables to store image urls.
Example: [variable-name]: url_here
Do ![image|sizexsize][variable-name]

Magic

image

Souce:

![image|433x69][link]

[link]:upload://xPvQqUs3W7rXYrtzpKQdruowb4o.png

Click here to get this post source
Also If this post was helpful to you then please click the image , the button feels so empty inside click it to fill it up!

137 Likes

wow! this is really useful for people like me! thank you random guy on the internet! (Synitx)

8 Likes

thanks for the guide!

  • a random guy
2 Likes

[ • ] Update

  • Added Image sizing - Jump
  • Added tables - Jump

Very nice, I will be using this later, keep up the good work!

1 Like

This topic already exists with more detail. You should add more to your post about Discourse formatting, like kbd.

https://devforum.roblox.com/t/topic/456083/1

4 Likes

That topic does not include tables though iirc

1 Like

Hey! thanks for the reply, I’ve added more discourse formatting you can check it out!

[ • ] Update

  • Added sup, sub and kbd tags
  • Added title tag (popup hover effect)
  • Added text tricks

I just wanted to point out that a very common misconception of Discourse that they use Markdown.

They actually use Commonmark. Its a a “strongly defined, highly compatible specification of Markdown”, according to the front page of their website.

If you don’t believe me, click this link to the see the official announcement made by one of the co-founders.

1 Like

How can I add these dividers? (The small grey line)

I prefer to be straightforward rather than to use eye-catching posts to convey my point.

1 Like

Hiya, Solarianns.

To answer your question, you can use one of the following:

---
or
***
or
___

They all do the same thing.

You should use
---
Instead because it does the same but in markdown.

These should always be markdown headings. Unless you wan’t additional formatting then it’s ok to use other ways of of using headings

If the quote is not referencing a player it should be done as a markdown block quote.

2 Likes

Thank you, I was really confused at first. :heart:

2 Likes

No worries at all! :heart: Just let me know if you need help with anything else.

2 Likes

Nice tutorial! I hope this guide helps me to make posts

1 Like
Player Level Cash
Synitx 8 4219
ROBLOX 9 1009

Odd, it works fine for me (copied syntix’s sample because you put it)

nah dw i fixed it lol

How to center the text though?