[Forum Guide] Markdown Tutorial 📝

Hello all!

If you aren’t aware the Vesteria forum uses Markdown, a markup language to format text. This is the same system used by Discord and TONS of other services. In this guide I’ll be teaching you how to use it to make your forum posts look even fancier and professionally done than the devs. (That’s right, shots fired)

This guide will cover things not included in this bar
Help bar

Library


Simple formatting technique

First off let’s get some of the easier stuff out of the way. Some of this is included in the help bar when writing a reply or making a new topic but it’s still good to know.

I’ll first show you the raw text and then what it looks like in a real post.

**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 an underline like style.
<abbr title> this is underlined </aabr>

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 an underline like style.
this is underlined


Sizing

Big? Small? Who am I to judge?

<small>This is a little smaller</small>
<small><small>This is even smaller
<small>If you don't close off your statements then it will just keep getting smaller!</small></small></small>

This is a little smaller
This is even smaller
If you don’t close off your statements then it will just keep getting smaller!

<big> big boi </big>
<big><big>This is as big as it gets :(</big></big>

big boi
This is as big as it gets :frowning:


Headers

Need different sized text? No problem! Headers are the way to go.

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

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 referncing.

Links

Ever wanted to get really fancy with how you format your links? Yeah, neither have I really but it’s still something you can do!

[Standard hyperlink](http://google.com)
[Hyperlink with hovertext](http://google.com "Hello There") - hover to view
[Reference defined text like this][like this]
or [how about this]
Maybe even referenced [hovertext?]

[how about this]: https://forum.playvesteria.com/
[like this]: https://google.com
[hovertext?]: https://google.com "spooky"

Standard hyperlink
Hyperlink with hovertext - hover to view
Reference defined text like this
or how about this
Maybe even referenced hovertext?


Quoting

>Standard quote

Quote with directive link
[quote="HarryIsBeast, post:1, topic:3631, full:true"]
hey dad how is it going on this lovely day?
[/quote]

Standard quote

Quote with directive link


Images

Need some spicing up? Add images, with controlable dimensions anything is possible.

:)  1
:slight_smile: 2
![image|20x20](upload://fAY0gtl5bkgsSGhr1qdOW9eTiN5.png) 3
![image|20x20](upload://fAY0gtl5bkgsSGhr1qdOW9eTiN5.png "Hover to see this text")  4
![Make this a short description of image, IE logo|20x20](https://forum.playvesteria.com/images/emoji/twitter/slight_smile.png?v=6) 5
https://forum.playvesteria.com/images/emoji/twitter/slight_smile.png?v=6 

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

You can change the dimensions to be anything you'd like
![image|354x20](upload://fAY0gtl5bkgsSGhr1qdOW9eTiN5.png)

:slight_smile: 1
:slight_smile: 2
image 3
image 4
you can name this a description of the image 5
https://forum.playvesteria.com/images/emoji/twitter/slight_smile.png?v=6

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

You can change the dimensions to be anything you’d like
image


Tables
| You               | Can              | Make  | Tables  |
| ----------------- |:----------------:| ---------:| :-------: |
| col 3 is          | right-aligned |   $300 | 1          |
| col 2 is          | centered      |      $18 | 2          |
| zebra stripes | are neat      |       $11 | 3          |
You Can Make Tables
col 3 is right-aligned $300 1
col 2 is centered $18 2
zebra stripes are neat $11 3

Fonts

For fonts I honestly suggest the lazy method, use an online generator. Coolsymbol is probably the way to go.

Ⓨⓞⓤ ⓒⓐⓝ ⓖⓔⓣ ⓢⓞⓜⓔⓣⓗⓘⓝⓖ ⓛⓘⓚⓔ ⓣⓗⓘⓢ
ØⱤ ₮Ⱨł₴
A♥n♥d♥ e♥v♥e♥n♥ w♥h♥a♥t♥e♥v♥e♥r♥ t♥h♥i♥s♥ i♥s♥…


HTML

There are A LOT of things you can do using HTML but here are a few random examples I made while testing what works on the forum.

<dl>
  <dt>Definition list</dt>
  <dd>Is something people use sometimes.</dd>

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

<sub> Look at me! I'm SUBSCRIPT! </sub>

This was my attempt at view tracking. It kinda worked?
<a href="http://www.reliablecounter.com" target="_blank"><img src="https://www.reliablecounter.com/count.php?page=143704953&digit=style/plain/26/&reloads=0" alt="" title="" border="0"></a><br /><a href="http://www.reliablecounter.com/blog/minoxidil-can-use-works" target="_blank" style="font-family: Geneva, Arial; font-size: 9px; color: #330010; text-decoration: none;">reliablecounter.com</a>
Definition list
Is something people use sometimes.
Markdown in HTML
Does *not* work **very** well. Use HTML tags.

Look at me! I’m SUBSCRIPT!

This was my attempt at view tracking. It… kinda worked?

reliablecounter.com

Things that 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: Cenering
:x: Audio yes I really tried that

Extra formatting

This is some uncatagorized stuff. It’s place is either unfinished or doesn’t exist so… it’s here.

```lua
print("hi") 

or

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

Output:

print("hi")

or

<p>Hello world!</p>

Check out this color guide made by derpypie23 here.


This post is incomplete, I will be adding more as time goes.

If you’d like to include any other fancy creations you’ve made let me know.

39 Likes

Great guide! This will be helpful to new players joining the Forums.

I only knew some stuff from Reddit and the WoW forums

I’m going to move this into spoilers for each category for extra organization soon.

I Assume You Know How To Do This Too. Since This Is Basically A Hyperlink.

Ah Yes A Blank Hyperlink, I Can Include This As Well If Someone Wants To Confuse People And Make Them Think There Is A Link To Something.

hi kevin

Nofearon

Added a new section for tables

Like This Re eeeee
Isn’t it neat? get gnomed
I think so :man_shrugging:
2 Likes

Added some HTML info

image

Nice, I didn’t know half of this stuff, this would be really helpful to new people.

you can do *** before and after something for bold and italics too. yay fun

Just wanna say this need to be revived and is very helpful deserves a pin imo!

1 Like
yes indeed

Really helpful thanks!
Edit: oops sorry for necropost.

I’ve seen multiple new forum users so I’m going to go ahead and try to bump this up by posting, in hopes that users that have never seen this great guide will witness it. Formatting helps everyone! :slight_smile:

3 Likes

And by “bump this up” you mean necropost it. HA! NECROPOSTER!! but yea all new forums ppl read this

It’s not necroposting if it was last talked about three days ago.

There’s nothing wrong with reviving a topic as long as it is still relevant. Which this guide is. What is wrong is reviving random topics that are now irrelevant. (i.e. basically every topic from last Oct.)

1 Like

Why not just pin this in the #public-announcements section