COMMUNITY - FORUMS - GENERAL DISCUSSION
Forum Code (Markdown) Quick Reference Cheetsheet
+86

Hey Everyone! As part of the new website update, we now support Markdown syntax! For an overview of Markdown see here.

A basic guide to Markdown for those who don't understand it and simply for ease and reference.


Useful Tools

Markdown Live Preview - Check over your markdown post code here; just copy and past into the left hand field and it will preview on the right. Huge thanks to Rhaegys for finding this!

HTML to Markdown Converter - Convert HTML to Markdown - Ideal for re-organising threads since Markdown was implemented.


Just copy and paste the text below the "CODE" sections in this thread into your post and change the relevant sections.

Guides

General Text Editing
Adding Headers
How to Add Italics and Bold to Text
How to Post a Link

Images
How to Insert an Image With and Without Link

Lists
Simple Bullet Point and Ordered Lists With Paragraphs
Simple Bullet Point and Ordered Lists With Sub-Lists

Code Highlighting
Inline Code
Block Code

Other
Create a Horizontal Rule


Found my guide helpful? Show your love by adding my Friend Code:1996D8

...
9/2/2015 11:23:30 AM #1
+13

Headers

# is used to identify text used as headers; the quantity of # before the text you wish to be the header directly corresponds to the header strength.

Replace H1, H2, H3 etc with your text.

CODE:
# H1

## H2

### H3

#### H4

##### H5

###### H6


Result:

H1

H2

H3

H4

H5
H6

Found my guide helpful? Show your love by adding my Friend Code:1996D8

9/2/2015 11:23:45 AM #2
+13

Emphasis

A single * or _ either side of text will place it in italics.

Double up so you have ** or __ either side and the text and it will display as strong/bold.

CODE:
Italics emphasis = *asterisks* or _underscores_.

Strong emphasis aka bold = **asterisks** or __underscores__.

Combined emphasis with **asterisks and _underscores_**.


Result:

italics emphasis = asterisks or underscores.

Strong emphasis aka bold = asterisks or underscores.

Combined emphasis with asterisks and underscores.


Found my guide helpful? Show your love by adding my Friend Code:1996D8

9/2/2015 11:24:04 AM #3
+17

Links

The text within the square brackets [ ] will be as the link displays in the post so replace the “Link” text in the example below with your own text and the URL with the destination of your link.

CODE
[Link](http://www.chroniclesofelyria.com)


Result:

Link


Found my guide helpful? Show your love by adding my Friend Code:1996D8

9/2/2015 11:24:15 AM #4
+14

Images

Example 1 is a simple image within a post. Simply replace the URL within the brackets ( ) with the location of the image you want displayed.

Example 2 is an image post with a link. Replace the URL within the first set of brackets ( ) with the location of the image you want displayed and replace the URL within the second set of brackets ( ) with the link destination.

You can enter alt text in the square brackets [ ] if you like, though I’d recommend just leaving it blank so your code would look like example 3 (if your image isn't a link) or 4 (if your image is a link).

Example 1

CODE:
![Alt text - can be left blank](https://chroniclesofelyria.com/Content/Images/logo.png)

Example 2

CODE:
[![Alt text - can be left blank](https://chroniclesofelyria.com/Content/Images/logo.png)](http://www.chroniclesofelyria.com)

Example 3

CODE:
![](https://chroniclesofelyria.com/Content/Images/logo.png)

Example 4

CODE:
[![](https://chroniclesofelyria.com/Content/Images/logo.png)](http://www.chroniclesofelyria.com)


Result:

Examples 1 and 3

Alt text - can be left blank

Examples 2 and 4

Alt text - can be left blank


Found my guide helpful? Show your love by adding my Friend Code:1996D8

9/2/2015 11:24:26 AM #5
+12

Inline Code

Code highlighting (though it doesn't highlight...) is mainly used to help display the code being used to attain certain effects without the effects being applied. All the “CODE” sections in this thread have been displayed using inline and block code highlighting.

CODE:
Inline `code` has `black-ticks` around it.


Result:

Inline code has black-ticks around it.


Found my guide helpful? Show your love by adding my Friend Code:1996D8

9/2/2015 11:24:51 AM #6
+14

Block Code

Code highlighting (though it doesn't highlight...) is mainly used to help display the code being used to attain certain effects without the effects being applied. All the “CODE” sections in this thread have been displayed using inline and block code highlighting.

Block code can be done in a couple of ways, either fenced by lines with ``` (three black-ticks) or indented with four spaces. I recommend using only the fenced code blocks.


Found my guide helpful? Show your love by adding my Friend Code:1996D8

9/2/2015 3:42:23 PM #7
+11

Simple Bullet Point and Ordered Lists With Paragraphs

Below are two examples of lists with paragraphs. Example 1 being a bullet point list and Example 2 being an ordered list.

For a bullet point list begin each point with a * and replace the dots ·· leading the paragraphs in CODE Example 1 with spaces.

For an ordered list simply begin each point with a number instead of a * and replace the dots ··· leading the paragraphs in CODE Example 2 with spaces.

Example 1

CODE:
* This is a simple bullet point list item with three paragraphs.

··This is the second paragraph in the list item. You only need to indent the first line.

··You can add additional paragraphs too if you want by following the same steps as for the second paragraph. And remember, you only need to indent the first line.

* Another bullet point item in the same list.

Example 2

CODE:
1. This is a simple ordered list item with three paragraphs.

···This is the second paragraph in the list item. You only need to indent the first line.

···You can add additional paragraphs too if you want by following the same steps as for the second paragraph. And remember, you only need to indent the first line.

2. Another item in the same list.


Result:

Example 1

  • This is a simple bullet point list item with three paragraphs.

    This is the second paragraph in the list item. You only need to indent the first line.

    You can add additional paragraphs too if you want by following the same steps as for the second paragraph. And remember, you only need to indent the first line.

  • Another bullet point item in the same list.

Example 2

  1. This is a simple ordered list item with three paragraphs.

    This is the second paragraph in the list item. You only need to indent the first line.

    You can add additional paragraphs too if you want by following the same steps as for the second paragraph. And remember, you only need to indent the first line.

  2. Another item in the same list.


Found my guide helpful? Show your love by adding my Friend Code:1996D8

9/2/2015 4:03:34 PM #8
+13

Horizontal Rule

CODE:
---

OR

CODE:
***

OR

CODE:
___


Result:


Hyphens


Asterisks


Underscores


Found my guide helpful? Show your love by adding my Friend Code:1996D8

9/2/2015 5:37:09 PM #9
+1

For a coding noob like me, this helps alot. THANKS!

9/2/2015 6:29:59 PM #10
+3

You're very welcome, Nameless!

I've added 3rd and 4th examples to Images to show what the code would look like without the alt text because I know a few of you were getting a bit confused about that section. Hope it helps.


Found my guide helpful? Show your love by adding my Friend Code:1996D8

9/2/2015 6:32:18 PM #11
+2

Thanks, It sure helps with trying to get the signature. Someone should mention the 600x to make it fit as well.


9/2/2015 6:37:38 PM #12
+0

How do you do that? Could you post the code or PM me the method and I'll sort out a post please?


Found my guide helpful? Show your love by adding my Friend Code:1996D8

9/2/2015 11:01:59 PM #13
+2

This is gorgeous Silv, thank you!


:3

9/2/2015 11:02:52 PM #14
+1

Thanks dood, give him 100 IP for helping me ;33


9/2/2015 11:11:17 PM #15
-1

Liking the Siggy.


...