Forum Markdown Guide

Intro

Discourse, which is the platform that the World of Magic forum is on, use Markdown, a markup language to format text. This is the same system used by Discord and many other services, including Trello. This guide goes over how to use it to make your forum posts look fancier and professionally done.

This guide will cover things not included in this bar.
image

Library


Simple formatting technique

You can use some basic formatting like you would in regular documents such as bold and italics. Some of this is included in the help bar when writing a reply or making a new topic, but it is still good to know as other platforms may not show you how to use them.

You will first see the raw text (input) and then what the post shows (output) in each demonstration.

Input

**bold**
*italics*
~~Strikethrough~~
___Bold and italics___
*__or like this__*

You can also add separators easily.
***

Underlining can be done multiple ways, just pick your favorite. 
๐šƒฬฒ๐š‘ฬฒ๐šŽฬฒ ฬฒ๐šŽฬฒ๐šŠฬฒ๐šœฬฒ๐š’ฬฒ๐šŽฬฒ๐šœฬฒ๐šฬฒ ฬฒ๐š˜ฬฒ๐š™ฬฒ๐šฬฒ๐š’ฬฒ๐š˜ฬฒ๐š—ฬฒ ฬฒ๐š’ฬฒ๐šœฬฒ ฬฒ๐šฬฒ๐š˜ฬฒ ฬฒ๐šžฬฒ๐šœฬฒ๐šŽฬฒ ฬฒ๐šŠฬฒ๐š—ฬฒ ฬฒ๐š˜ฬฒ๐š—ฬฒ๐š•ฬฒ๐š’ฬฒ๐š—ฬฒ๐šŽฬฒ ฬฒ๐šžฬฒ๐š—ฬฒ๐šฬฒ๐šŽฬฒ๐š›ฬฒ๐š•ฬฒ๐š’ฬฒ๐š—ฬฒ๐šŽฬฒ ฬฒ๐šฬฒ๐šŽฬฒ๐šกฬฒ๐šฬฒ ฬฒ๐šฬฒ๐šŽฬฒ๐š—ฬฒ๐šŽฬฒ๐š›ฬฒ๐šŠฬฒ๐šฬฒ๐š˜ฬฒ๐š›ฬฒ.ฬฒ ฬฒ๐™นฬฒ๐šžฬฒ๐šœฬฒ๐šฬฒ ฬฒ๐šฬฒ๐š˜ฬฒ๐š˜ฬฒ๐šฬฒ๐š•ฬฒ๐šŽฬฒ ฬฒ๐š’ฬฒ๐šฬฒ.ฬฒ

However you can also use this method to get an underline like style.
<abbr title> Epic underlined text. </aabr>

Output

Bold
italics
Strikethrough
Bold and italics
or like this

you can also add a separator like this


Underlining can be done multiple ways, just pick your favorite.
๐šƒฬฒ๐š‘ฬฒ๐šŽฬฒ ฬฒ๐šŽฬฒ๐šŠฬฒ๐šœฬฒ๐š’ฬฒ๐šŽฬฒ๐šœฬฒ๐šฬฒ ฬฒ๐š˜ฬฒ๐š™ฬฒ๐šฬฒ๐š’ฬฒ๐š˜ฬฒ๐š—ฬฒ ฬฒ๐š’ฬฒ๐šœฬฒ ฬฒ๐šฬฒ๐š˜ฬฒ ฬฒ๐šžฬฒ๐šœฬฒ๐šŽฬฒ ฬฒ๐šŠฬฒ๐š—ฬฒ ฬฒ๐š˜ฬฒ๐š—ฬฒ๐š•ฬฒ๐š’ฬฒ๐š—ฬฒ๐šŽฬฒ ฬฒ๐šžฬฒ๐š—ฬฒ๐šฬฒ๐šŽฬฒ๐š›ฬฒ๐š•ฬฒ๐š’ฬฒ๐š—ฬฒ๐šŽฬฒ ฬฒ๐šฬฒ๐šŽฬฒ๐šกฬฒ๐šฬฒ ฬฒ๐šฬฒ๐šŽฬฒ๐š—ฬฒ๐šŽฬฒ๐š›ฬฒ๐šŠฬฒ๐šฬฒ๐š˜ฬฒ๐š›ฬฒ.ฬฒ ฬฒ๐™นฬฒ๐šžฬฒ๐šœฬฒ๐šฬฒ ฬฒ๐šฬฒ๐š˜ฬฒ๐š˜ฬฒ๐šฬฒ๐š•ฬฒ๐šŽฬฒ ฬฒ๐š’ฬฒ๐šฬฒ.ฬฒ

However, you can also use this method to get a dotted underline-like style.
Epic underlined text.


Text Sizing

You can make your text varying sizes, to a point where it is so small that it is barely readable or even bigger than a header.

Small Text

Input

<small>This is a little smaller.</small>
<small><small>This is even smaller.
<small>If you don't close off your statements then the text will get smaller with more commands.
<small><small>Can you even read this?</small></small></small></small></small>

Output

This is a little smaller.
This is even smaller.
If you donโ€™t close off your statements then the text will get smaller with more commands.
Can you even read this?


Large Text

Input

<big> This is text is larger than usual. </big>
<big><big><big> This is the max size you can have for normal text.</big></big>

Output

This is text is larger than usual.
This is the max size you can have for normal text.


Headers

Resizing text for headers is very easy. No need to input size commands; just use hashtags right before.

Input

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Output

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

References

Need to know how to properly reference other sources? Here are some tips for different types of referencing.


Links

This may not be something you will do often, but situationally, referencing links can be pretty neat if you want to be reallllyyyy specific on something in a discussion.

Input

[Standard hyperlink](https://forum.worldofmagic.dev/t/information-guide-to-all-23-elemental-magics/386)
[Hyperlink with hovertext](https://forum.worldofmagic.dev/t/information-guide-to-all-23-elemental-magics/386 "World of Magic is a great game") - hover to view
[Reference defined text like this][like this]
or [how about this]
Maybe even referenced [hovertext?]
Or maybe even bring you to a keyword of a post? Did you want to review what [flagging](https://forum.worldofmagic.dev/t/official-forum-rules-and-guidelines/26192#flagging) is on the rules page?

[how about this]: https://roblox.com/
[like this]: https://forum.worldofmagic.dev
[hovertext?]: https://forum.worldofmagic.dev "One of the best Internet forums of 2020"

Output

Standard hyperlink
Hyperlink with hovertext - hover to view
Reference defined text like this
or how about this
Maybe even referenced hovertext?
Or maybe even bring you to a keyword of a post? Did you want to review what flagging is on the rules page?

Quoting

This can easily be utilized by highlighting text and clicking Quote, which will automatically reference and source the highlighted text from the user who posted it. You can change the contents of the quote in your post, but only do so to make it clear to what the user is referring to.

Input

> Standard quote

Quote with directive link
[quote="system, post:1, topic:26192"]
Every reply should be meaningful and on-topic in a thread.
[/quote]

Output

Standard quote

Quote with directive link


Images

Want to spice things up even more in your post? Add some images. With controllable dimensions and references, anything is possible.

Input

:)  1
:slight_smile: 2
![image|72x72, 69%](upload://fAY0gtl5bkgsSGhr1qdOW9eTiN5.png)  3
![image|72x72](upload://fAY0gtl5bkgsSGhr1qdOW9eTiN5.png "Hello there! Nice to meet you!")  4
![Make this a short description of image, IE logo|20x20](https://forum.worldofmagic.dev/images/emoji/twitter/slight_smile.png?v=6) 5
https://forum.worldofmagic.dev/images/emoji/twitter/slight_smile.png?v=6 

Image that links to another page on click ([HTML](https://www.w3schools.com/html/ "Click if you'd like to learn more about HTML") element)
[<img src="https://forum.worldofmagic.dev/images/emoji/twitter/slight_smile.png?v=6" width=20>](http://google.com)

You can change the dimensions to your own pleasure.
![image|42x69](upload://fAY0gtl5bkgsSGhr1qdOW9eTiN5.png)

Output

:slight_smile: 1
:slight_smile: 2
image 3
image 4
Make this a short description of image, IE logo 5
https://forum.worldofmagic.dev/images/emoji/twitter/slight_smile.png?v=6

Image that links to another page on click (HTML element)

You can change the dimensions to your own pleasure.
image


Tables

Creating tables can be useful for setting up an organized, orderly, easy-to-read market in #marketplace.

Input

| You               | Can              | Make  | Tables  |
| ----------------- |:----------------:| ---------:| :-------: |
| col 3 is          | right-aligned |   300 Crowns | 1          |
| col 2 is          | centered      |      550 Crowns | 2          |
| zebra stripes | are neat      |       25 Crowns | 3          |

Output

You Can Make Tables
col 3 is right-aligned 300 Crowns 1
col 2 is centered 550 Crowns 2
zebra stripes are neat 25 Crowns 3

Polls

You can do quite a bit of stuff with polls, such as giving them a title, changing the way the data is shown, and more. However, they seem to not work properly on this topic, so you will just have to settle with using the help bar.


Fonts

Iโ€™m not sure how to use different fonts with Markdown, so you will have to use an online generator. Coolsymbol is a good website for this.

โ“Žโ“žโ“ค โ“’โ“โ“ โ“–โ“”โ“ฃ โ“ขโ“žโ“œโ“”โ“ฃโ“—โ“˜โ“โ“– โ“›โ“˜โ“šโ“” โ“ฃโ“—โ“˜โ“ข
ร˜โฑค โ‚ฎโฑงล‚โ‚ด
Aโ™ฅnโ™ฅdโ™ฅ eโ™ฅvโ™ฅeโ™ฅnโ™ฅ wโ™ฅhโ™ฅaโ™ฅtโ™ฅeโ™ฅvโ™ฅeโ™ฅrโ™ฅ tโ™ฅhโ™ฅiโ™ฅsโ™ฅ iโ™ฅsโ™ฅโ€ฆ


HTML

There are quite a bit of things you can do using HTML for formatting.

What works and doesnโ€™t work with HTML markdown

Supported
:white_check_mark: Images
:white_check_mark: Indentation
:white_check_mark: Basic formatting
:white_check_mark: Subscript
:x: Font size
:x: Centering
:x: Audio

image

<dl>
  <dt>Definition list</dt>
  <dd>is something you can use from time to time.</dd>

  <dt>Markdown in HTML</dt>
  <dd>Does *not* work **very** well. Use HTML <em>tags</em>.</dd>
</dl>

<sub> This text is in subscript. </sub>

Definition list
is something you can use from time to time.
Markdown in HTML
Does *not* work **very** well. Use HTML tags.

This text is in subscript.


Code Blocks

You can make code blocks for when presenting scripts if you happen to need help in some malfunctioning code or presenting code.

Input

```lua
print("hi") 

or

```html
<p>Hello world!</p>

Output

print("hi")

or

<p>Hello world!</p>

Huge thanks to Vesteria forum user @HarryIsBeast for the majority of the formatting techniques.

If you know of any other formatting techniques, let me know in replies.

5 Likes

I still donโ€™t know how to go back to a normal sized text after making it smaller or bigger. Like you can alternate between the 2 but the effect applies to all the text after the < small > or < big > thing, which forces me to only use it at the end of my posts.

alright lemme test one sec
guess that works
Also I just realized it was shown, I didnโ€™t understant that < /small > was actually closing the statements

its like this

<small> hi this is a small text lol </small>
OR
<big> hi this is a big text lol </big>

you only have to put / for the second one

1 Like

Ayo the table was extremely needed. Thanks so much!

when adding the polls do you have to add every single group that can interact with it or is there a short cut

1601905206489

image long

IMG_20200729_111448_981

IMG_20200729_111448_981


supreme vibe check
godammit why does the image keep cropping
THE FORUMS ARE TRYING TO STOP ME FROM INSERTING THIS IMAGE IN ITS FULL GLORY BUT I WILL NOT BE DETERRED

My brain is too smol to comprehend this.

EhnlFdNXkAArbH9
nice

1 Like

image

5 Likes

ah yes
BECOME A RACIST

dammit, Iโ€™m out of likes

time to abuse those seperators

โ€ฆohhh boyyy this is gonna be

Wait, how do you add those dropdown things, the ones where you click and the text appears