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

In these cases the header text can span multiple lines, as in:

Header with a
lot of text
=============

Header with a lot of text =============

Second header with a
lot of text
-------------

Second header with a lot of 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 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 than 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

Mapping

topojson

{
  "type": "Topology",
  "transform": {
    "scale": [0.0005000500050005, 0.00010001000100010001],
    "translate": [100, 0]
  },
  "objects": {
    "example": {
      "type": "GeometryCollection",
      "geometries": [
        {
          "type": "Point",
          "properties": {"prop0": "value0"},
          "coordinates": [4000, 5000]
        },
        {
          "type": "LineString",
          "properties": {"prop0": "value0", "prop1": 0},
          "arcs": [0]
        },
        {
          "type": "Polygon",
          "properties": {"prop0": "value0",
            "prop1": {"this": "that"}
          },
          "arcs": [[1]]
        }
      ]
    }
  },
  "arcs": [[[4000, 0], [1999, 9999], [2000, -9999], [2000, 9999]],[[0, 0], [0, 9999], [2000, 0], [0, -9999], [-2000, 0]]]
}

geojson

{
  "type": "Polygon",
  "coordinates": [
      [
          [-90,30],
          [-90,35],
          [-90,35],
          [-85,35],
          [-85,30]
      ]
  ]
}

Some GEOJSON map examples

Oslo (GeoJSON)

Single points can in some cases be rendered fully zoomed in, zoom out to get the right view if that happens.

{
  "type": "Feature",
  "properties": {
    "name": "Oslo",
    "radius": 25,
    "marker-color": "#ff4444",
    "marker-size": "medium"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [10.7522, 59.9139]
  }
}

Bergen and Trondheim (GeoJSON)

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "Bergen",
        "radius": 15,
        "marker-color": "#00aaff",
        "marker-size": "medium"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [5.3221, 60.3913]
      }
    },
    {
      "type": "Feature", 
      "properties": {
        "name": "Trondheim",
        "radius": 15,
        "marker-color": "#22cc22",
        "marker-size": "medium"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [10.3951, 63.4305]
      }
    }
  ]
}

South Sámi (GeoJSON)

Single points can in some cases be rendered fully zoomed in, zoom out to get the right view if that happens.

{
  "type": "Feature",
  "properties": {
    "name": "South Sámi",
    "radius": 200,
    "marker-color": "#ff4444",
    "marker-size": "large"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [13.15, 63.88]
  }
}

Code:

```geojson
{
  "type": "Feature",
  "properties": {
    "name": "South Sámi",
    "radius": 200,
    "marker-color": "#ff4444",
    "marker-size": "large"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [13.15, 63.88]
  }
}
```

The radius of the circular gradient is specified in kilometers, and the colour is specified in the marker-color element.

SME and SMJ (GeoJSON)

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "North Sámi",
        "radius": 250,
        "marker-color": "#00aaff",
        "marker-size": "medium"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [23.6683, 69.1397]
      }
    },
    {
      "type": "Feature", 
      "properties": {
        "name": "Lule Sámi",
        "radius": 200,
        "marker-color": "#22cc22",
        "marker-size": "medium"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [18.6213, 67.4456]
      }
    }
  ]
}

Code:

```geojson
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "North Sámi",
        "radius": 250,
        "marker-color": "#00aaff",
        "marker-size": "medium"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [23.6683, 69.1397]
      }
    },
    {
      "type": "Feature", 
      "properties": {
        "name": "Lule Sámi",
        "radius": 200,
        "marker-color": "#22cc22",
        "marker-size": "medium"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [18.6213, 67.4456]
      }
    }
  ]
}
```

Some TopoJSON Examples

Oslo (TopoJSON)

{
  "type": "Topology",
  "objects": {
    "oslo": {
      "type": "GeometryCollection",
      "geometries": [
        {
          "type": "Point",
          "properties": {
            "name": "Oslo",
            "radius": 25,
            "marker-color": "#ff4444",
            "marker-size": "medium"
          },
          "coordinates": [10.7522, 59.9139]
        }
      ]
    }
  },
  "arcs": []
}

South Sámi (TopoJSON)

{
  "type": "Topology",
  "objects": {
    "south_sami": {
      "type": "GeometryCollection",
      "geometries": [
        {
          "type": "Point",
          "properties": {
            "name": "South Sámi",
            "radius": 200,
            "marker-color": "#ff4444",
            "marker-size": "large"
          },
          "coordinates": [13.15, 63.88]
        }
      ]
    }
  },
  "arcs": []
}

Code:

```topojson
{
  "type": "Topology",
  "objects": {
    "south_sami": {
      "type": "GeometryCollection",
      "geometries": [
        {
          "type": "Point",
          "properties": {
            "name": "South Sámi",
            "radius": 200,
            "marker-color": "#ff4444",
            "marker-size": "large"
          },
          "coordinates": [13.15, 63.88]
        }
      ]
    }
  },
  "arcs": []
}
```

SME and SMJ (TopoJSON)

{
  "type": "Topology",
  "objects": {
    "sami_languages": {
      "type": "GeometryCollection",
      "geometries": [
        {
          "type": "Point",
          "properties": {
            "name": "North Sámi",
            "radius": 250,
            "marker-color": "#00aaff",
            "marker-size": "medium"
          },
          "coordinates": [23.6683, 69.1397]
        },
        {
          "type": "Point",
          "properties": {
            "name": "Lule Sámi",
            "radius": 200,
            "marker-color": "#22cc22",
            "marker-size": "medium"
          },
          "coordinates": [18.6213, 67.4456]
        }
      ]
    }
  },
  "arcs": []
}

Code:

```topojson
{
  "type": "Topology",
  "objects": {
    "sami_languages": {
      "type": "GeometryCollection",
      "geometries": [
        {
          "type": "Point",
          "properties": {
            "name": "North Sámi",
            "radius": 250,
            "marker-color": "#00aaff",
            "marker-size": "medium"
          },
          "coordinates": [23.6683, 69.1397]
        },
        {
          "type": "Point",
          "properties": {
            "name": "Lule Sámi",
            "radius": 200,
            "marker-color": "#22cc22",
            "marker-size": "medium"
          },
          "coordinates": [18.6213, 67.4456]
        }
      ]
    }
  },
  "arcs": []
}
```

Sitemap

GFM Test Document

Headers

foo 1

foo 2

foo 3

foo 4

foo 5

foo 6

foo 1a

foo 2a

foo 3a

foo 4a

foo 5a

foo 6a

Header text

Another header text

Horisontal lines

Tables

Emoji

HTML elements

Useful HTML elements

The <ruby> element

Simple graphs

Mapping

topojson

geojson

Some GEOJSON map examples

Oslo (GeoJSON)

Bergen and Trondheim (GeoJSON)

South Sámi (GeoJSON)

SME and SMJ (GeoJSON)

Some TopoJSON Examples

Oslo (TopoJSON)

South Sámi (TopoJSON)

SME and SMJ (TopoJSON)

Sitemap

The `<ruby>` element