Today I will share with you the magic that is called Markdown. Markdown is used to format text in a way that’s easy to understand and use. Markdown supports limited HTML as well, which makes it a lot easier to create things which are not accessible with Markdown.
I’ll now introduce you to the wonderful world of Markdown.
Each feature that is currently available for you to use on this forum will be listed down below. If you know of a feature which is not listed here, please edit it so it stays up to date and add it to updates.
The features will be divided in-between two
--- tags, which each add a horizontal rule on the line they are used on. Keep in mind, you have to have a white line above that tag, otherwise, you will end up with this.
This can also be used as a cheatsheet:
- Sub and sup
- Get markdown
- Everything that is a <> tag is HTML.
- To stop accidentally making text bold or italic while typing, use
\before the symbol. Like
\*. This is called an escape sequence.
You can create h1 text using
<h1>This is h1</h1> or
# This is h1 and even by putting a
= below the line you want to have converted.
This is h1 using #
This is h1 using =
This is h1 using < h1 >
You can create h2 text using
<h2>This is h2</h2> or
## This is h2 and even by putting a
- below the line you want to have converted.
This is h2 using ##
This is h2 using -
This is h2 using < h2 >
You can create h3 text using
<h3>This is h3</h3> or
### This is h3.
This is h3 using ###
This is h3 using < h3 >
The h4 tag is exactly the same as using bold.
You can create h4 text using
<h4>This is h4</h4> or
#### This is h4.
This is h4 using ####
This is h4 using < h4 >
You can create h5 text using
<h5>This is h5</h5> or
##### This is h5.
This is h5 using #####
This is h5 using < h5 >
You can create italic text using
<i>This is italic</i> or
*This is italic* and even with
_This is italic_.
This is italic
Bold text is exactly the same as h4 text.
You can create bold text using either the h4 methods or
<strong>This is bold</strong> or
**This is bold** and even with
__This is bold__. You can also mix italic and bold using
___This is bold and italic___ or
***This is bold and italic***.
This is bold
This is bold and italic
You can create links using inline links (
[inline links](https://forum.playuncharted.com)) or using identifiers (
[identifier links]) and then defining
 somewhere in the page, like at the bottom.
You can also create links for headers using
<a name ="link"></a> and referencing it by using
[header](#link). This can also be done using the identifier method.
Images work in almost exactly the same way as links. Except images require an exclamation mark (!) in front of their syntax. Images also have some special attributes to them. Instead of specifying the text you want the link to have, you specify the text you want to appear when the image is not available. Like so:
![Alternate text](image link "title"). You can also specify a title like I just did, which will show whenever you hover over the image.
Nesting your image in a link is also possible, which creates a clickable image. Like so:
[![Alternate text](image link)](link).
You can create blockquotes using
> This is a blockquote. The space and the text are optional. You can also nest blockquotes, by repeating the
>. Like so:
> > This is a nested blockquote.
This is my nice blockquote.
This is a nested blockquote.
There are two types of lists, the ordered lists and the unordered lists.
You can create an ordered list like this:
1. First element 2. Second element 3. Third element
Or like this:
1) First element 2) Second element 3) Third element
The first number of the ordered list will determine where it starts. The following numbers can be any number you want.
You can create an unordered list like this:
* Element * Element * Element
Or you can replace the
* with either a
+ or a
-. A space is required after the list character.
You can nest any other feature inside a list, and even mix ordered and unordered lists.
You can support inline code with a `. Replace test with your code `test` and it’ll get formatted like this:
You can also create a code paragraph, using three ` characters, or indent the code with four spaces, like this:
And it will then get formatted to, with automatic syntax highlighting:
Code More code
You can create sub text by using
<sub>This is sub</sub> and sup text by using
<sup>This is sup</sup>. Sub text is rendered below the normal line, in a much smaller font. Sup text is rendered above the normal line, in a much smaller font.
Normal This is sub text text.
Normal This is sup text text.
<div> tag can be used to left-align, center or right-align your text. You can do that by changing the
align attribute of the
This is left-aligned, which is the default.
This is centered. You can even use markdown inside of it!
This is right-aligned.
You can create tables by yourself, or use this site to generate tables.
To create a table you will need two things:
- The first row/the headers. Defined by the first row of
| text |of a table.
- A row with
|-|which generates the line below the headers.
Of course you can add to that with:
- More rows, more columns. Every new line is a new column. Every new pair of
| text |is a new row in that column.
There are rules to tables, such as:
- For every row in your table, you will need to add another
|-|below the header.
- You cannot add columns with a row without having a header for that column.
- Little style guide, most of the tables used have got the same amount of dashes under their headers, as the amount of letters their header has got. (To make it have the same width)
You can align the text of your table to be centered, left-aligned or right-aligned with colons. You put these colons right at the beginning or at the end of your line tags. Like this:
|-:| is right-aligned,
|:-:| is centered. The default (
|-|) is left-aligned.
Test | 1 | 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 | 1 |
This is the code for a generic table, of course without the test in it.
Wondering what kind of markdown someone is using? There’s a cool little trick for that.
Select the markdown you want to see.
The markdown will then appear in the write area, where you can see the raw markdown the user has used.
|June 5 ,2018||Added get markdown, sub and sup and updates.||@Bram|
|June 7, 2018||Added table documentation and the div tag.||@Bram|
That’s all for today. I hope you learned something from this and look forward to setting sail with you again!
If you have any suggestions and/or additions, feel free to do so as long as it adds something worthwhile. Remember to add it to updates.