Syntax & Templates

Syntax

The basics

This mirror wiki uses kramdown as its Markdown parser, with GFM. As such, it allows you to use some cool things in addition to the usual Markdown. Here are some resources that you can use to look at Markdown’s Syntax :

• The official GitHub Markdown Cheat Sheet
• The kramdown quick reference and full syntax

To do a quick run of what “simple” Markdown looks like, think about how you would style your text on Discord : It uses the same syntax. Discord uses a simplified version of the Markdown specification. Everything you do there can be done here.
One of the things that can be a bit weird first time are the newlines. In original Markdown, doing a newline won’t do what you wish for it to do. You’d need to do 2 new lines (With an empty line between your two paragraphs) to effectively create a new paragraph. However, ou parser, kramdown, does integrate a way to create line breaks in a single block, by adding 2 empty spaces at the end of your line!

In any case, if you’re in doubt and/or need anything, feel free to contact Meï, who’ll try to answer your questions as quickly as possible.

More basic Markdown examples are available hidden on the following page : Markdown Demo

In addition, we also got some of our own extensions, such as…

Labels

Default label
{: .label }

Blue label
{: .label .label-blue }

Stable
{: .label .label-green }

New release
{: .label .label-purple }

Coming soon
{: .label .label-yellow }

Deprecated
{: .label .label-red }

Definition Lists

Those are a bit special as you need to use HTML in order to make them work, but they’re still quite easy to use, and render neatly :

<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

Colors

That one is a bit longer than the others, so it’s been rightfully collapsed !

For example, this is what you need to do to render a red text on a green background. (Don’t do this, it’s ugly)

I'm an ugly text.
{: .bg-green-000 .text-red-000}

Spacing

The same applies to this spacing section. This usually won’t be useful to the normal user.

This paragraph will have a margin bottom of 1rem/16px at large screens.
{: .mb-lg-4 }

This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
{: .px-6 }

These headings will be `inline-block`:

### heading 3
{: .d-inline-block }

### heading 3
{: .d-inline-block }

Typography Utilities

You’re used to it by now…

In Markdown, use the `{: }` wrapper to apply custom classes:

Font size 1
{: .fs-1 }
Font size 2
{: .fs-2 }
Font size 3
{: .fs-3 }
Font size 4
{: .fs-4 }
Font size 5
{: .fs-5 }
Font size 6
{: .fs-6 }
Font size 7
{: .fs-7 }
Font size 8
{: .fs-8 }
Font size 9
{: .fs-9 }
Font size 10
{: .fs-10 }

In Markdown, use the `{: }` wrapper to apply custom classes:

Font weight 300
{: .fw-300 }
Font weight 400
{: .fw-400 }
Font weight 500
{: .fw-500 }
Font weight 700
{: .fw-700 }

In Markdown, use the `{: }` wrapper to apply custom classes:

No Line height
No Line height
{: .lh-0 }

Tight line height
Tight line height
{: .lh-tight }

Default line height
Default line height
{: .fh-default }

Page information and parameters

On top of it, your page can have several parameters. Here’s an example with the Silvered Enchantment :

---
layout: default
title: Silvered
summary: As seen in the Master Sword, this Enchantment is truly Evil's Bane. 
permalink: /enchantments/silvered
parent: Enchantments
tags:
  - enchantment
  - weapons
contributors:
  - mei
  - elementalknight
---

• The “layout” property should always use the default parameter.

• The “title” is the title of your page, it will be used in the navigation, and in the user’s browser (The tab will be called title - RtW's Wiki).

• The “summary” property is used by the parent of your page. The parent will automatically generate a table of content of its children, using the title property. If the summary property is mentionned, the entry will be written as title - summary. If it’s not, it will only be written as title.

• The “permalink” property allows you to customize the URL of your page. It is, in fact, automatically generated, but you can tinker it further through this property. This can be useful to remove the “.html” at the end of the url, for example. If it is not mentionned, the permalink will be the path of the file, with the same name as your file at the end, but ended by .html instead of .md. You should try, whenever possible, to include this property.

• The “parent” property is used to indicate the title of the parent of the page. It can be omitted for orphan pages, but most of your content should be the children of one of the category pages. The current parents available are :
  • Enchantments
  • Creatures
  • Feats
  • Items
  • Misc.
  • Races
  • Rules
  • Songs
  • Spells

• You can add a cool “last_modified_date” property if you want to display the last date this file was modified (Which you should !). The format is the following: last_modified_date: 2020-04-27T17:54:08+0000 where the second half is a ISO 8601 formatted UNIX Timestamp. You can easily generate one from this website.

• You can add tags to your page ! Tags are defined on the tags page, and new ones can be added when necessary.

• The same can be done with contributors. Contributors can be seen on the contributors page, but they’re not set exactly the same : Contributors are set through an id, also called a slug. On a general basis, the id is a lowercase-version of the user’s name, without whitespaces and special characters. For example, “Meï” becomes mei and “Elemental Knight” becomes elementalknight. In doubt, you can always refer to contributors.yml file from the wiki’s GitHub repository.

• If you need it for any reason, you can include a nav_exclude: true property to make your page NOT appear in the navigation menu.

Additionnal elements

When working on your page, you may want to add some images or special designs and interactions. Here’s a list of what’s available on the wiki !

Images

In addition to the natural syntax to add a Markdown image, the Wiki also supports floating images on the left, right and center. The left & right ones even have the added bonus that text can be on the same “lines”.

Syntax:

{% include floating/image_center src="https://i.imgur.com/49pURK9.png" artist="Nintendo" %}

{% include floating/image_left src="https://i.imgur.com/49pURK9.png" artist="Nintendo" %}
{% include floating/image_right src="https://i.imgur.com/49pURK9.png" artist="Nintendo" %}

Example:

Art by Nintendo

Art by Nintendo

Art by Nintendo

Example Text

They’re mainly intended for illustrations, and therefore allow you to add the Artist directly. The include directive can take the following parameters:

• src: Necessary as it is the url of the rendered image
• artist: Optional, the name of the artist. Will add a “Art by” mention under the image.
• artist_src: A source to the Artist’s social medias. It makes the artist clickable. Won’t serve any purpose if artist isn’t set.
• description: Optional, added under the artist mention (if any).
• custom_width: By default, left/right floating images takes 40% of the article width while centered images takes 70%. With this, you can specify a custom width, such as “100” for a fullwidth image.

Table of Content

You can add a Table of Content to your page using the following include :

{% include toc.html %}

It will result in what’s available at the top of this page. Please not it will use the title you defined in the meta parameters of the page as the main title before the ToC.

The ToC will automatically add your titles (The headers beginning with one or multiple “#”) to itself. If, for some reason, you don’t want to include a specific title to your ToC, add {: .no_toc } on the line directly under it.

For example :

Title not displayed in the TOC

### Title not displayed in the TOC
{: .no_toc }

Requesting a Template

If you have an idea for a new and useful include template like the ones explained in the earlier parts, feel free to open an issue so we can discuss it and see what’s possible to do.