Skip to content

Latest commit

 

History

History
599 lines (467 loc) · 21.6 KB

syntax_templates.md

File metadata and controls

599 lines (467 loc) · 21.6 KB
Raw
layout title permalink nav_exclude
default
Syntax & Templates
/syntax_templates
true

{% include toc.html %}

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 :

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]({{ "/demo/markdown" | absolute_url }})

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 }

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 :

Name
Godzilla
Born
1952
Birthplace
Japan
Color
Green
<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 !

UNWRAP ME !

Light Greys

{: .no_toc }

Color value Font color utility Background color utility
grey-lt-000 .text-grey-lt-000 .bg-grey-lt-000
grey-lt-100 .text-grey-lt-100 .bg-grey-lt-100
grey-lt-200 .text-grey-lt-200 .bg-grey-lt-200
grey-lt-300 .text-grey-lt-300 .bg-grey-lt-300

Dark Greys

{: .no_toc }

Color value Font color utility Background color utility
grey-dk-000 .text-grey-dk-000 .bg-grey-dk-000
grey-dk-100 .text-grey-dk-100 .bg-grey-dk-100
grey-dk-200 .text-grey-dk-200 .bg-grey-dk-200
grey-dk-250 .text-grey-dk-250 .bg-grey-dk-250
grey-dk-300 .text-grey-dk-300 .bg-grey-dk-300

Purples

{: .no_toc }

Color value Font color utility Background color utility
purple-000 .text-purple-000 .bg-purple-000
purple-100 .text-purple-100 .bg-purple-100
purple-200 .text-purple-200 .bg-purple-200
purple-300 .text-purple-300 .bg-purple-300

Blues

{: .no_toc }

Color value Font color utility Background color utility
blue-000 .text-blue-000 .bg-blue-000
blue-100 .text-blue-100 .bg-blue-100
blue-200 .text-blue-200 .bg-blue-200
blue-300 .text-blue-300 .bg-blue-300

Greens

{: .no_toc }

Color value Font color utility Background color utility
green-000 .text-green-000 .bg-green-000
green-100 .text-green-100 .bg-green-100
green-200 .text-green-200 .bg-green-200
green-300 .text-green-300 .bg-green-300

Yellows

{: .no_toc }

Color value Font color utility Background color utility
yellow-000 .text-yellow-000 .bg-yellow-000
yellow-100 .text-yellow-100 .bg-yellow-100
yellow-200 .text-yellow-200 .bg-yellow-200
yellow-300 .text-yellow-300 .bg-yellow-300

Reds

{: .no_toc }

Color value Font color utility Background color utility
red-000 .text-red-000 .bg-red-000
red-100 .text-red-100 .bg-red-100
red-200 .text-red-200 .bg-red-200
red-300 .text-red-300 .bg-red-300

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

UNWRAP ME !

These spacers are available to use for margins and padding with responsive utility classes. Combine these prefixes with a screen size and spacing scale to use them responsively.

Classname prefix What it does
.m- margin
.mx- margin-left, margin-right
.my- margin top, margin bottom
.mt- margin-top
.mr- margin-right
.mb- margin-bottom
.ml- margin-left
Classname prefix What it does
.p- padding
.px- padding-left, padding-right
.py- padding top, padding bottom
.pt- padding-top
.pr- padding-right
.pb- padding-bottom
.pl- padding-left

Spacing values are based on a 1rem = 16px spacing scale, broken down into these units:

Spacer/suffix Size in rems Rem converted to px
1 0.25rem 4px
2 0.5rem 8px
3 0.75rem 12px
4 1rem 16px
5 1.5rem 24px
6 2rem 32px
7 2.5rem 40px
8 3rem 48px
auto auto auto

Use mx-auto to horizontally center elements.

Responsive modifiers

{: .no_toc }

If you want to have different display between different screen sizes, you can put this size modifiers inbetween prefix & suffix/spacer classes.

Modifier Screen size
(none) All screens until the next modifier
xs 320px (20rem) and up
sm 500px (31.25rem) and up
md 740px (46.25rem) and up
lg 1120px (70rem) and up
xl 1400px (87.5rem) and up
Examples

{: .no_toc }

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

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 }

Horizontal Alignment

{: .no_toc }

Classname What it does
.float-left float: left
.float-right float: right
.flex-justify-start justify-content: flex-start
.flex-justify-end justify-content: flex-end
.flex-justify-between justify-content: space-between
.flex-justify-around justify-content: space-around

Note: any of the flex- classes must be used on a parent element that has d-flex applied to it.

Vertical Alignment

{: .no_toc }

Classname What it does
.v-align-baseline vertical-align: baseline
.v-align-bottom vertical-align: bottom
.v-align-middle vertical-align: middle
.v-align-text-bottom vertical-align: text-bottom
.v-align-text-top vertical-align: text-top
.v-align-top vertical-align: top

Display

{: .no_toc }

Display classes aid in adapting the layout of the elements on a page:

Class
.d-block display: block
.d-flex display: flex
.d-inline display: inline
.d-inline-block display: inline-block
.d-none display: none

Use these classes in conjunction with the responsive modifiers.

Examples

{: .no_toc }

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

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

UNWRAP ME !

Font size

{: .no_toc }

Use the .fs-1 - .fs-10 to set an explicit font-size.

Class Small screen size font-size Large screen size font-size
.fs-1 9px 10px
.fs-2 11px 12px
.fs-3 12px 14px
.fs-4 14px 16px
.fs-5 16px 18px
.fs-6 18px 24px
.fs-7 24px 32px
.fs-8 32px 38px
.fs-9 38px 42px
.fs-10 42px 48px
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 }
```markdown 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 }


#### Font weight
{: .no_toc }

Use the `.fw-300` - `.fw-700` to set an explicit font-size.

<div class="code-example" markdown="1">
Font weight 300
{: .fw-300 }
Font weight 400
{: .fw-400 }
Font weight 500
{: .fw-500 }
Font weight 700
{: .fw-700 }
</div>
```markdown
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 }

Line height

{: .no_toc }

Use the lh- classes to explicitly apply line height to text.

Class line-height value Notes
.lh-0 0
.lh-tight 1.1 Default for headings
.lh-default 1.4 Default for body (paragraphs)
No Line height No Line height {: .lh-0 }

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

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

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 }

Text justification

{: .no_toc }

By default text is justified left. Use these text- classes to override settings:

Class What it does
.text-left text-align: left
.text-right text-align: right
.text-center text-align: center

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. {: lh-tight}
  • 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). {: lh-tight}
  • 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. {: lh-tight}
  • 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. {: lh-tight}
  • 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 {: lh-tight}
  • 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. {: lh-tight}
  • You can add tags to your page ! Tags are defined on the [tags page]({{ "/tag/" | absolute_url }}), and new ones can be added when necessary. {: lh-tight}
  • The same can be done with contributors. Contributors can be seen on the [contributors page]({{ "/contributor/" | absolute_url }}), 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. {: lh-tight}
  • 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:

{% raw %}

{% 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" %}

{% endraw %}

Example:

{% 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 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 :

{% raw %}

{% include toc.html %}

{% endraw %}

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

{: .no_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.

*[GFM]: GitHub-Flavored Markdown