Markdown Support
Markdown
Crystal Forge Games allows the use of Markdown formatting for styling text on some parts of our website (such as forums and gamer directory listings). For those not familiar with markdown syntax, this page serves as a quick reference of the format, including certain additional elements unique to our website. You can view John Gruber's Original Markdown Specification or the Github-flavored Markdown (GFM) info pages for additional information.
Note that some pages may limit the type of markdown that can be used by removing certain elements, or only allowing inline formatting.
Inline Elements
In almost all of the locations where we allow the use of markdown formatting, basic inline elements such as italics and bold are permitted. In such cases links are also permitted, as long as they link to a page on Crystal Forge Games. External links are permitted in certain areas, such as forums, where content can be easily moderated.
Emphasis and Text Styling
Markdown
Emphasis, aka italics, with *asterisks* or _underscores_.
Strong emphasis, aka bold, with **asterisks** or __underscores__.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~
Output
Emphasis, aka italics, with asterisks or underscores.
Strong emphasis, aka bold, with asterisks or underscores.
Combined emphasis with asterisks and underscores.
Strikethrough uses two tildes. Scratch this.
Code & Spoilers
Code may be included in inline text by surrounding the code sample in backticks (e.g. `). Text rendered as code will be rendered in monospace font with a shaded background. Inline code never uses syntax highlighting. If you wish to use syntax highlighting, see "Code Blocks" later in this document. Spoilers are not part of the markdown specification, but are something we've added for Crystal Forge Games. Spoiler text is hidden by default, and only revealed when a user interacts with it (hover, click, touch). Spoiler text is surrounded by carats (e.g. ^).
Markdown
Inline `code` has `back-ticks` around it.
^Spoiler text has carats around it.^
Output
Inline code
has back-ticks
around it.
Spoiler text has carats around it.
Links
In most cases where linking is permitted you can create a link simply by including the URL such as: https://crystalforge.com. This is the simplest way to include a link, but it can be made more explicit by surrounding the URL in angle brackets (e.g. <https://crystalforge.com>
) which has the same result. In many cases, however, you may want to change the text of the link, and that can be done with markdown link formatting.
To include a link via markdown, you insert the text of the link in square brackets immediately followed by the target URL in parenthesis. You can also include a title that can be seen when hovering on the link with a mouse. These links can be created as follows:
Markdown
[Link Text](https://www.crystalforge.com)
[Link with Title](https://www.crystalforge.com "Crystal Forge Games")
[Relative Link](/info/markdown)
It is also possible to include links via a named or numeric reference. This allows links to be included multiple times, or in different areas of the document. Instead of specifying the link target in parenthesis, the reference name is included after the link text in square brackets:
Markdown
[A Reference-Style Link][reference name]
[A Numeric Reference Link][1]
Or you can just use the [link text itself].
In order for reference style links to render, you must include the reference somewhere in the document. This can come before or after the reference-style link, but it must be included using the same name and the reference must appear on its own line. A reference uses the reference name or number in square brackets followed by a colon, a space, and then the link URL. References will not be rendered to the page.
Markdown
[reference name]: https://crystalforge.com/tools
[1]: https://crystalforge.com/products
[link text itself]: https://crystalforge.com/blog
Output
There is no output as the references are not rendered, but you can see them linked in the example above.
Images
Images work much like regular markdown links but are preceded by an exclamation point. The link text acts as the alt-text for the image, and they may include a title to be seen on mouse hover as well. Like links, they may be defined explicitly or by reference. As an example, here is our logo:
Markdown
Explicit:
![alt text](/images/appicons/cfg_crystal_48.png "Crystal Forge Games")
Reference:
![alt text][logo]
Reference Definition
[logo]: /images/appicons/cfg_crystal_48.png "Crystal Forge Games"
Output
Explicit:
Reference:
Reference Definition
Reference not rendered
Images can be linked by including the image markdown formatting within the link text of a markdown link. Here's an example:
Markdown
[![alt text](/images/logos/crystal_forge_logo.png "Crystal Forge Games")](https://crystalforge.com)
Block Level Elements
Block level elements include items such as headings, paragraphs, lists, and tables. Block level formatting is generally limited to forum posts, private messages, and directory listings.
Headers
Various levels of headings can be included by preceding the text with 1 to 6 hash symbols (e.g. #) and then a space. The number of hash symbols defines the level of heading. Note that in most cases we disable level one (h1) headings so not to conflict with the main heading of a page.
Markdown
# Level 1 Header (H1)
## Level 2 Header (H2)
### Level 3 Header (H3)
#### Level 4 Header (H4)
##### Level 5 Header (H5)
###### Level 6 Header (H6)
Output
Level 1 Header (H1)
Level 2 Header (H2)
Level 3 Header (H3)
Level 4 Header (H4)
Level 5 Header (H5)
Level 6 Header (H6)
Alternatively, for level one (h1) and level two (h2) headers, you can use setext style headers which use an underline style of three or more equal signs or dashes. This style of header allows for the text to span multiple lines.
Markdown
Alternate Level 1 Header (H1)
===
Alternate Level 2 Header (H2)
---
Output
Alternate Level 1 Header (H1)
Alternate Level 2 Header (H2)
Paragraphs & Line Breaks
Paragraphs are created by entering two newlines between pieces of text. In the original Markdown specification, in order to enter a single line break you must include two spaces at the end of the line. We find this to be unintuitive, so have opted to include single newlines as a hard break, similar to GFM line breaks.
Markdown
This is a single line interpreted as a paragraph.
This line is separated from the one above by two newlines, so it will be a *separate* paragraph.
This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the *same paragraph*.
Output
This is a single line interpreted as a paragraph.
This line is separated from the one above by two newlines, so it will be a separate paragraph.
This line is also a separate paragraph, but...
This line is only separated by a single newline, so it's a separate line in the same paragraph.
Lists
Ordered and unordered lists can be created using simple notation and indentation. Ordered lists are created by entering a number folowed by a period and a space (the number order doesn't actually matter). Unordered lists are created using an asterisk, plus sign, or dash followed by a space. Indentation can be used to create sub-lists and paragraphs within a list item.
In this example, leading and trailing spaces are shown with with a dot character (⋅
)
Markdown
1. First ordered list item
⋅⋅* Unordered sub-list.
2. Second ordered list item
⋅⋅1. Ordered sub-list
1. The numbers don't really matter
1. As long as there's a number
⋅⋅⋅List items can include paragraphs as long as they are indented to match. Notice the blank line above, and the leading spaces. The indentation must match the list number or symbol, plus any additional spaces. Here we use three spaces (to match the digit, the period, and the single space of the current list item).
⋅⋅⋅To have a line break without a paragraph, you just need to start a new line
⋅⋅⋅Note that this line is separate, but within the same paragraph.
⋅⋅⋅(This is contrary to typical markdown line break behaviour, where trailing spaces are required.)
* Unordered lists can use an asterisk
- Or dash (because the symbols are different)
+ Or plus (these display as sub-lists)
Output
First ordered list item
- Unordered sub-list.
Second ordered list item
- Ordered sub-list
- The numbers don't really matter
As long as there's a number
List items can include paragraphs as long as they are indented to match. Notice the blank line above, and the leading spaces. The indentation must match the list number or symbol, plus any additional spaces.
To have a line break without a paragraph, just start a new line
Note that this line is separate, but within the same paragraph.
(This is contrary to typical markdown line break behaviour, where trailing spaces are required.)
Unordered lists can use an asterisk
Or dash (because the symbols are different)
- Or plus (these display as sub-lists)
Tables
Tables aren't part of the core Markdown specification, but the extended GFM markdown for tables is supported by Crystal Forge Games. They are an easy way of adding tables to your post. Table cells are separated by pipes (|
), and column headers are separated by at least three dashes. Colons can be used to specify column alignment as shown below. Inline markdown works within table cells as well.
Markdown
| Column 1 | Column 2 | Column 3 |
| -------------- |:--------------:| --------------:|
| this column is | this column is | this column is |
| left-aligned | centered | right-aligned |
| *inline* | **markdown** | `still works` |
Output
Column 1 | Column 2 | Column 3 |
---|---|---|
this column is | this column is | this column is |
left-aligned | centered | right-aligned |
inline | markdown | still works |
The outer pipes (|
) are optional, and the Markdown doesn't need to line up prettily. There still must be at least 3 dashes separating each header cell from the column, and the number of header cells must match.
Markdown
Column 1 | Column 2 | Column 3
--- |:---:| ---:
this column is | this column is | this column is
left-aligned | centered | right-aligned
*but still* | **renders** | `nicely`
Output
Column 1 | Column 2 | Column 3 |
---|---|---|
this column is | this column is | this column is |
left-aligned | centered | right-aligned |
but still | renders | nicely |
Blockquotes
Markdown
> Blockquotes are useful for inserting quotes and indenting text.
> This line is a new line in the same quote.
> Blockqotes may include paragraphs and *inline* **markdown**.
This line will break the quote as it doesn't start with a right angle bracket.
> Long lines will still be quoted properly when they wrap as long at there is no hard break.
Output
Blockquotes are useful for inserting quotes and indenting text.
This line is a new line in the same quote.Blockqotes may include paragraphs and inline markdown.
This line will break the quote as it doesn't start with a right angle bracket.
Long lines will still be quoted properly when they wrap as long at there is no hard break.
Horizontal Rule
A horizontal rule can be created by inserting three or more hyphens (---
), asterisks (***
), or underscores (___
) on their own separate line.
Markdown
---
hyphens
***
asterisks
___
underscores
Output
hyphens
asterisks
underscores
Code and Syntax Highlighting
Code blocks are part of the Markdown specification, but syntax highlighting is not. However, Crystal Forge Games support syntax highlighting for the languages listed below. Blocks of code are either fenced by lines with three back-ticks ```
, or are indented with four spaces. It is recommend to only use the fenced code blocks as they're easier to define and only the fenced version supports syntax highlighting.
Supported Languages: CSS, HTML, JavaScript, JSON, Markdown, PHP, Python
Markdown
\```javascript
var s = "JavaScript syntax highlighting";
alert(s);
\```
\```
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
\```
⋅⋅⋅⋅This sample is indented by four spaces.
⋅⋅⋅⋅Indicated here using dot characters.
Output
var s = "JavaScript syntax highlighting";
alert(s);
No language indicated, so no syntax highlighting.
But let's throw in a <b>tag</b>.
This sample is indented by four spaces.
Indicated here using dot characters.
Unsupported Elements
Inline HTML
The markdown specification allows for the use of raw HTML, however this is not supported on Crystal Forge Games for user generated content.
Videos
Videos can't be added directly, but you can add an image with a link to the video like this:
Youtube
[![ALT TEXT](https://img.youtube.com/vi/YOUTUBE_VIDEO_ID/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID)
Vimeo
[![ALT TEXT](https://i.vimeocdn.com/video/VIMEO_VIDEO_ID.jpg)](https://vimeo.com/VIMEO_VIDEO_ID)