GFM Test Document

This document contains examples of all GitHub Flavored Markdown (GFM), both code snippets and as rendered, and additional data structures (code blocks) rendered in various ways.

It serves both as a test on what is supported in the various places, and as a reference for how to write GFM.

This is how it renders by GitHub’s own processor. There are differences compared to GitHub pages.

Headers

Start line with 1-6 # characters, then a space, then the header text:

# foo 1

## foo 2

### foo 3

#### foo 4

##### foo 5

###### foo 6

The above will be rendered as:

foo 1

foo 2

foo 3

foo 4

foo 5

foo 6

It is also ok with # symbols after the header text, like this:

# foo 1a	  ###

## foo 2a	  ###

### foo 3a	  ###

#### foo 4a	  ###

##### foo 5a  ###

###### foo 6a ###

These will look like the following:

foo 1a

foo 2a

foo 3a

foo 4a

foo 5a

foo 6a

One can also specify the two first header levels using underlines.

Header text
===========

will show up as:

Header text

and:

Another header text
-------------------

comes out as:

Another header text

Please note that in the GiellaLT documentation system, only the first header on a page can be level 1, it is used as the page title. All subsequent headers must be level 2 or more, with level 2 being the top level header for the document content.

This also means that in the generated table of content (to the left) only contains level 2 or more headers.

Horisontal lines

One can use one of *, - or _. It must be at least three of them, and there can be spaces between. There can be nothing else that whitespace and one of the mentioned characters.

---

renders like:

---

and:

---

also renders like:

---

and even (at most three initial spaces)

---

renders like:

---

Enough with horisontal lines.

Tables

This code:

| THead1 | THead2 | THead3 |
|:------ |:------:| ------:|
| Cell 1 | _Cell 2_ | **Cell 3** |
| ***Cell 4*** | Cell 5 | Cell 6 |
| Cell 7 | `Cell 8` | Cell 9 |

looks like this:

THead1	THead2	THead3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6
Cell 7	Cell 8	Cell 9

Emoji

GFM emoji rendering has been enabled!

HTML elements

Most elements are passed through and will render as such. The following HTML elements will be encoded using <, and thus be inactivated in the final html code:

• <title>
• <textarea>
• <style>
• <xmp>
• <iframe>
• <noembed>
• <noframes>
• <script>
• <plaintext>

All other html and xml tag lookalikes will be passed through, and either rendered as usual, or be available for targeted CSS styling.

Useful HTML elements

The <ruby> element

<ruby>tekst<rt>ja</rt></ruby>

will render as:

tekstja

This can be used to show pronunciation:

<ruby>
	<strong>cromulent</strong>
	<rp>(</rp>
	<rt>crôm-yü-lənt</rt>
	<rp>)</rp>
</ruby>

cromulent (crôm-yü-lənt)

Traditional use is for east asian scripts:

한자(漢字)

Ruby elements can even be nested:

世（ㄕ ˋ）上（ㄕㄤ ˋ）無（ㄨ ˊ）難（ㄋㄢ ˊ）事（ㄕ ˋ）只（ㄓ ˇ）怕（ㄆㄚ ˋ）有（ㄧㄡ ˇ）心（ㄒㄧㄣ）人（ㄖㄣ ˊ） （Anything can be done with enough perseverance）

In our context it can be used for simple glossing/text annotation:

1800-lågon1800+Num+Cmp/Hyph+Cmp#låhko+N+Sg+Ine hieredimbargonhieredit+V+TV+Der/NomAct+N+Cmp/SgNom+Cmp#barggo+N+Sg+Ine

<kbd>ᛌᛁᚢᚱ</kbd>

ᛌᛁᚢᚱ

ᛌᛁᚢᚱ

Simple graphs

pie showData
    title Formal languages used in GiellaLT
    "LexC" : 3129
    "Xfst regex" : 2374
    "Xfst script" : 856
    "TwolC" : 125
    "YAML" : 4451

Based on counts of all files of the various types in all repositories in the GiellaLT infra.

Another Mermaid test, this one includes configuration data:

%%{init: {"pie": {"textPosition": 0.5}, 'theme':'forest', "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" :  5

And a third one:

graph TD
    A[Start] --> B{Er det fint vêr?}
    B -->|Ja| C[Gå på tur]
    B -->|Nei| D[Bli heime]

And a fourth one:

graph TD
    A[Start] -->|Initialisering| B(Les konfigurasjon)
    B --> C{Finst fila?}
    C -->|Ja| D[Les fila]
    C -->|Nei| E[Opprett ny fil]
    D --> F[Prosesser data]
    E --> F