A Beginner's Guide to post styling


#1

Good timezone fellow players!

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. :smiley:

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:


Notes

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

h1

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.
Like this:

This is h1 using #

This is h1 using =

This is h1 using < h1 >


h2

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.
Like this:

This is h2 using ##

This is h2 using -

This is h2 using < h2 >


h3

You can create h3 text using <h3>This is h3</h3> or ### This is h3.
Like this:

This is h3 using ###

This is h3 using < h3 >


h4

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.
Like this:

This is h4 using ####

This is h4 using < h4 >


h5

You can create h5 text using <h5>This is h5</h5> or ##### This is h5.
Like this:

This is h5 using #####
This is h5 using < h5 >

Italic

You can create italic text using <i>This is italic</i> or *This is italic* and even with _This is italic_.
Like this:

This is italic


Bold

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***.
Like this:

This is bold
This is bold and italic


Links

You can create links using inline links ([inline links](https://forum.playuncharted.com)) or using identifiers ([identifier links][1]) and then defining [1] 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.

Identifier links: [1]: https://forum.playuncharted.com

Ex:
Uncharted using inline
Uncharted using reference
Start of the post


Images

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

Ex:
25491df4697f36c494a408c23d5d456f

25491df4697f36c494a408c23d5d456f


Blockquotes

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.

Ex:

This is my nice blockquote.

This is a nested blockquote.

Empty blockquote


Lists

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.


Code

You can support inline code with a `. Replace test with your code `test` and it’ll get formatted like this: code.

You can also create a code paragraph, using three ` characters, or indent the code with four spaces, like this:
```
Paragraph code.
```

And it will then get formatted to, with automatic syntax highlighting:

Paragraph code
Code
More code

Sub and sup

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.

Sub:
Normal This is sub text text.

Sup:
Normal This is sup text text.


Div

The <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 <div> tag.

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

Ex:

This is left-aligned, which is the default.

This is centered. You can even use markdown inside of it!

This is right-aligned.


Tables

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 - like so: |-| 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.

Tables Are Awesome
Column 3 Is Centered
Column 2 Is Right-aligned
Column 1 Is Left-aligned

Table:

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.

1 1 1 1 1
1 1 1 1 1
1 1 1 1 1
1 1 1 1 1


Get markdown

Wondering what kind of markdown someone is using? There’s a cool little trick for that.

  1. Select the markdown you want to see.

  2. Click quote.

  3. The markdown will then appear in the write area, where you can see the raw markdown the user has used.
    Screenshot%20from%202018-06-05%2011-31-14


Updates

Date Description Updater
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. :smile:


#2

Very well done again!


#3

Very useful for people who like to make their posts all pretty like me! Nice job!