Markdown Syntax

Gamemaster

More on Markdown

Markdown is a lightweight markup language with plain text formatting syntax created by John Gruber. By its very nature, being a plain text file, it is designed to add future-proofing to any set of documents while still maintaining basic text and table formatting options. In addition, Markdown may be exported to HTML and many other formats using a number of various Markdown editors. Markdown is often used to format readme files, for writing books, blogs, and messages, or to simply create rich text using plain text in a Markdown editor.

Markdown Syntax

THE FOLLOWING SYNTAX CURRENTLY FUNCTIONS ON GROG SPACE. IF THE SYNTAX DOESN'T APPEAR ON THIS PAGE THEN IT IS CURRENTLY NOT SUPPORTED.

Headings

To create a heading, add number signs (#) in front of a word or phrase. The number of number signs you use should correspond to the heading level.

# Heading Level 1

## Heading Level 2

### Heading Level 3

#### Heading Level 4

##### Heading Level 5

###### Heading Level 6

The rendered output looks like this:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Bold

To bold text, add two asterisks before and after a word or phrase.

Markdown	Rendered Output
`I just love bold text.`	I just love bold text.

Italic

To italicize text, add one asterisk before and after a word or phrase.

Markdown	Rendered Output
`Italicized text is the cat's meow.`	Italicized text is the cat’s meow.

Bold and Italic

To emphasize text with bold and italics at the same time, add three asterisks before and after a word or phrase.

Markdown	Rendered Output
`This text is *really important*.`	This text is really important.

Blockquotes

To create a blockquote, add a > in front of a paragraph.

> Dorothy followed her through many of the beautiful rooms in her castle.

The rendered output looks like this:

Dorothy followed her through many of the beautiful rooms in her castle.

Blockquotes with Multiple Paragraphs

Blockquotes can contain multiple paragraphs. Add a > on the blank lines between the paragraphs.

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

The rendered output looks like this:

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Nested Blockquotes

Blockquotes can be nested. Add a >> in front of the paragraph you want to nest.

> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

The rendered output looks like this:

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Blockquotes with Other Elements

Blockquotes can contain other Markdown formatted elements. Not all elements can be used, you’ll need to experiment to see which ones work.

> #### The quarterly results look great!
>
> * Revenue was off the chart.
> * Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

The rendered output looks like this:

The quarterly results look great!

Revenue was off the chart.

Profits were higher than ever.

Everything is going according to plan.

Ordered Lists

To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one.

1. First Item
2. Second Item
3. Third Item

The rendered output looks like this:

First Item
Second Item
Third Item

Unordered Lists

To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list.

* First Item
* Second Item
* Third Item

The rendered output looks like this:

First Item
Second Item
Third Item

Starting Unordered List Items With Numbers

If you need to start an unordered list item with a number followed by a period, you can use a backslash (\) to escape the period.

* 1968\. A great year! I think 1969 was second best.

The rendered output looks like this:

1968. A great year! I think 1969 was second best.

Adding Elements in Lists

To add another element to a list while preserving the continuity of the list, indent the element four spaces or one tab, as shown in the following examples.

Tip: If things don't appear the way you expect, double-check that you've indented the elements in the list four spaces or one tab.

Paragraphs

* This is the first list item.
* Here's the second list item.

    I need to add another paragraph below the second list item.

* And here's the third list item.

The rendered output looks like this:

This is the first list item.
Here’s the second list item.

I need to add another paragraph below the second list item.
And here’s the third list item.

Blockquotes

* This is the first list item.
* Here's the second list item.

    > A blockquote would look great below the second list item.

* And here's the third list item.

The rendered output looks like this:

This is the first list item.
Here’s the second list item.

A blockquote would look great below the second list item.
And here’s the third list item.

Lists

You can nest an unordered list in an ordered list or vice versa.

1. First item
2. Second item
3. Third item
    - Indented item
    - Indented item
4. Fourth item

The rendered output looks like this:

First item
Second item
Third item
- Indented item
- Indented item
Fourth item

Code

To denote a word or phrase as code, enclose it in backticks ``.

At the command prompt, type `nano`.

The rendered output looks like this:

At the command prompt, type nano.

Escaping Backticks

If the word or phrase you want to denote as code includes one or more backticks, you can escape it by enclosing the word or phrase in double backticks (````).

`Use` code `in your Markdown file.`

The rendered output looks like this:

Use code in your Markdown file.

Links

To create a link, enclose the link text in brackets (e.g., [Duck Duck Go]) and then follow it immediately with the URL in parentheses (e.g., (https://duckduckgo.com)).

My favorite search engine is [Duck Duck Go](https://duckduckgo.com).

The rendered output looks like this:

My favorite search engine is Duck Duck Go.

Adding Titles

You can optionally add a title for a link. This will appear as a tooltip when the user hovers over the link. To add a title, enclose it in quotation marks after the URL.

My favorite search engine is [Duck Duck Go](https://duckduckgo.com "The best search engine for privacy").

The rendered output looks like this:

My favorite search engine is Duck Duck Go.

URLs and Email Addresses

To quickly turn a URL or email address into a link, enclose it in angle brackets.

<https://www.srd.wiki>
<fake@example.com>

The rendered output looks like this:

https://www.srd.wiki
fake@example.com

Formatting Links

To emphasize links, add asterisks before and after the brackets and parentheses. To denote links as code, add backticks in the brackets.

I love supporting the **[EFF](https://eff.org)**.
This is our *[Markdown Guide](https://srd.wiki/markdown)*.

The rendered output looks like this:

I love supporting the EFF.
This is our Markdown Guide.

Images

To add an image, add an exclamation mark (!), followed by alt text in brackets, and the path or URL to the image asset in parentheses. You can optionally add a title in quotation marks after the path or URL.

![Alt Text](/assets/images/link-to-image.jpg "Image Caption")

Note: To resize or add a caption to an image, see those sections below.

Linking Images

To add a link to an image, enclose the Markdown for the image in outer brackets followed by the link in parentheses.

[![Alt Text](/assets/images/link-to-image.jpg "Image Caption")](https://www.link.com)

Tables

To render a basic table use the following format.

| Header First Column | Header Second Column |
| ------------------- | -------------------- |
| Row 1               | Blah Blah Blah       |
| Row 2               | Blah Blah Blah       |
| Row 3               | Blah Blah Blah       |

The rendered output looks like this:

Header First Column	Header Second Column
Row 1	Blah Blah Blah
Row 2	Blah Blah Blah
Row 3	Blah Blah Blah

See the Grog Space Administrator for more advanced table options.

Escaping Characters

To display a literal character that would otherwise be used to format text in a Markdown document, add a backslash (\) in front of the character.

\*Without the backslash, this would bulleted list.

The rendered output looks like this:

*Without the backslash, this would bulleted list.

Hacks

Workarounds for things not officially supported by Markdown. The majority of people using Markdown will find that the basic and extended syntax elements cover their needs. But chances are that if you use Markdown long enough, you’ll inevitably discover that it doesn’t support something you need. This page provides tips and tricks for working around Markdown’s limitations.

Tip: These hacks aren't guaranteed to work in your Markdown application. If you need to use these hacks frequently, you should consider writing using something other than Markdown.

Comments

Some people need the ability to write sentences in their Markdown files that will not appear in the rendered output. These comments are essentially hidden text. The text is viewable by the author of the document, but it’s not printed on the webpage or PDF. Markdown doesn’t natively support comments, but several enterprising individuals have devised a solution.

To add a comment, place text inside brackets followed by a colon, a space, and a pound sign (e.g., [comment]: #). You should put blank lines before and after a comment.

Here's a paragraph that will be visible.

[This is a comment that will be hidden.]: # 

And here's another paragraph that's visible.

The rendered output looks like this:

Here's a paragraph that will be visible.

And here's another paragraph that's visible.

Admonitions

Admonitions are frequently used in documentation to call attention to warnings, notes, and tips.

> :warning: **Warning:** Do not push the big red button.

> :memo: **Note:** Sunrises are beautiful.

> :bulb: **Tip:** Remember to appreciate the little things in life.

The rendered output looks like this:

⚠️ Warning: Do not push the big red button.

📝 Note: Sunrises are beautiful.

💡 Tip: Remember to appreciate the little things in life.

Image Size

The Markdown syntax for images doesn’t allow you to specify the width and height of images. If you need to resize an image and your Markdown processor supports HTML, you can use the img HTML tag with the width and height attributes to set the dimensions of an image in pixels.

<img src="image.png" width="200" height="100">

The rendered output will contain the image resized to the dimensions you specified.

Symbols

Markdown doesn’t provide a special syntax for symbols. However, in most cases, you can copy and paste whatever symbol you want to use into your Markdown document. For example, if you need to display Pi (π), just find the symbol on a webpage and copy and paste it into your document. The symbol should appear as expected in the rendered output.

Alternatively, if your Markdown application supports HTML, you can use the HTML entity for whatever symbol you want to use. For example, if you want to display the copyright sign (©), you can copy and paste the HTML entity for copyright (©) into your Markdown document.

Here’s a partial list of HTML entities for symbols:

Registered trademark (®) — ®
Trademark (™) — ™
Euro (€) — €
Left arrow (←) — ←
Up arrow (↑) — ↑
Right arrow (→) — →
Down arrow (↓) — ↓
Degree (°) — °
Pi (π) — π

For a complete list of available HTML entities, refer to Wikipedia’s page on HTML entities.

Videos

If your Markdown application supports HTML, you should be able to embed a video in your Markdown file by copying and pasting the HTML code provided by a video website like YouTube or Vimeo. If your Markdown application doesn’t support HTML, you can’t embed a video, but you can come close by adding an image and a link to the video. You could do this with practically any video on any video service.