test

See GitHub Flavored Markdown Spec for the format spec.

This is an orphan paragraph without a title, and will appear directly under the table of contents.

Title and subtitle

---
title: test
subtitle: markdown test page for this blog.
---

Not every markup allowed in GFM or HTML is tested though it will probably work. The examples are followed with a code block showing how it was created.

See markdown cheatsheet for more examples.

Not every markup allowed in GFM or HTML is tested though it will
probably work. The examples are followed with a code block showing how
it was created.

See
[markdown cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
for more examples.

Table of Contents

Include toc: true in the yaml metadata of the markdown file.¹

Headers

Headers
-------

Smaller Header

### Smaller Header

Text

Emphasis (italics), use asterisks or underscores

Emphasis (italics), use *asterisks* or _underscores_

Strong (bold), use asterisks or underscores

Strong (bold), use **asterisks** or __underscores__

Combined emphasis with asterisks and underscores

Combined emphasis with **asterisks and _underscores_**

Strikethrough use two tildes strikethrough

Strikethrough use two tildes ~~strikethrough~~

^superscript, _subscript, mark and small

<sup>superscript</sup>, <sub>subscript</sub>, <mark>mark</mark> and <small>small</small>

To force a new line, end the line
with a backslash

To force a new
line, end the line \
with a backslash

<div align=left>Align text left</div>

<div align=center>Align text center</div>

<div align=right>Align text right</div>

<div align=justify>Align text justify</div>

Lists

1. First
2. Second
3. Third

1. First
1. Second
1. Third

• One thing
• Two thing
• Three thing

* One thing
* Two thing
* Three thing

1. lists with

2. more space

3. between items

1. lists with

1. more space

1. between items

• lists with

• more space

• between items

* lists with

* more space

* between items

• Lists with
  • Sub items need
  • To be indented with
  • Two spaces

* Lists with
  * Sub items need
  * To be indented with
  * Two spaces

Test Term

Test Definition

Definition lists

Are not natively supported in Markdown, use inline HTML instead

Markdown inside HTML

Does *not* **work**. Use HTML tags instead

<dl>
  <dt>Test Term</dt>
  <dd>Test Definition</dd>
  <dt>Definition lists</dt>
  <dd>Are not natively supported in Markdown, use inline HTML instead</dd>
  <dt>Markdown inside HTML</dt>
  <dd>Does *not* **work**. Use HTML <em>tags</em> instead</dd>
</dl>

Orphan Items

• I’m an orphan item
• I am too

  * I'm an orphan item
  * I am too

Empty Parent

• • I have a blank parent
  • So do I

*
  * I have a blank parent
  * So do I

Links

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[Lorem ipsum] dolor sit amet, consectetur adipiscing elit.

[lorem ipsum]: https://en.wikipedia.org/wiki/lorem_ipsum "with hover text"

rdm.sh blog ipsum dolor sit amet, consectetur adipiscing elit.

[rdm.sh blog](https://rdm.sh "my blog") ipsum dolor sit amet, consectetur adipiscing elit.

https://rdm.sh ipsum dolor sit amet, consectetur adipiscing elit.

https://rdm.sh ipsum dolor sit amet, consectetur adipiscing elit.

Link directly to a header or smaller header in the same document

Link directly to a [header](#headers) or [smaller header](#smaller-header) in the same document

Link directly to a header in another document about this blog

Link directly to a header in another document [about this blog](about.html#about-this-blog)

Footnotes

There is a footnote right here² and here³⁴⁵

There is a footnote right here[^1] and here[^here][^note][^markup]
[^1]: GNU Terry Pratchett
[^here]: or there
[^note]: footnote entries must *not* be split over multiple lines
[^markup]: You can **add** *markup* in the [footnotes](test.html)

Images

in-place image with caption

![Philips PM5544](test_pattern.webp "There is nothing wrong with your television set. Do not attempt to adjust the picture. We are controlling transmission")
<figcaption>
Philips PM5544 test pattern
</figcaption>

in-footer image details

![Philips PM5544][test]

[test]: test_pattern.webp "There is nothing wrong with your television set. Do not attempt to adjust the picture. We are controlling transmission"

simpler markdown with in-footer image details

![test]

[test]: test_pattern.webp "There is nothing wrong with your television set. Do not attempt to adjust the picture. We are controlling transmission"

image as link

[![Philips PM5544](test_pattern.webp "There is nothing wrong with your television set. Do not attempt to adjust the picture. We are controlling transmission")][Philips PM5544]

[Philips PM5544]: https://en.wikipedia.org/wiki/File:Philips_PM5544.svg

simpler markdown image as link

[![test]][Philips PM5544]

[test]: test_pattern.webp "There is nothing wrong with your television set. Do not attempt to adjust the picture. We are controlling transmission"
[Philips PM5544]: https://en.wikipedia.org/wiki/File:Philips_PM5544.svg

Code

This para has code tags in the middle

This para has `code` tags in the middle

#!/bin/bash
echo "hello world"
rsync -avz here there
ls -la *

```bash
#!/bin/bash
echo "hello world"
rsync -avz here there
ls -la *
```

#!/usr/bin/python3
print ("hello world")

```python
#!/usr/bin/python3
print ("hello world")
```

#include <stdio.h>

int main(void)
{
    printf("Hello, world!\n");
    return 0;
}

```c
#include <stdio.h>

int main(void)
{
    printf("Hello, world!\n");
    return 0;
}
```

<p>text</p>

```html
<p>text</p>
```

plain text

```
plain text
```

indent with 4 spaces

    indent with 4 spaces

tilde also work as a code fence

~~~
tilde also work as a code fence
~~~

Tables

Pipe tables are the only type supported by default.

| default | left | center | right |
| ------- |:---- |:------:| -----:|
| d       | l    | c      | r     |
| this    | row  | is     | even  |
| this    | row  | is     | odd   |
| rows hi | ghli | ght on | hover |

minimum viable table

| |
-|
a|

slightly less minimum table

I prefer this as at least it looks like a table in the markdown, unlike above which could be confusing.

| |
|-|
|b|

mixed html table with markdown text

You can’t put markdown inside a html table

<table>
<tr><td>mixed *html*</td><td>_table_ **with**</td></tr>
<tr><td>__markdown__ text</td><td>doesn't work</td></tr>
</table>

multi-line tables

This doesn’t work:

| column 1 | column 2  |
| -------- | --------- |
| value    | * value 1 |
|          | * value 2 |
| -------- | --------- |
| value    | * value 1 |
|          | * value 2 |

Use ether ul or ol to get itemised lists, or br for newlines:

| column 1 | column 2                                  |
| -------- | --------                                  |
| value    | <ul><li>value 1</li><li>value 2</li></ul> |
| value    | <ul><li>value 1</li><li>value 2</li></ul> |
| value    | value 1<br />value 2                      |
| value    | value 1<br />value 2                      |

multi-column cells

afaik, there is currently no way to do this in GFM markdown, unless you use HTML.

| column 1 | column 2 | column 3 |
| -------- | -------- | -------- |
| value 1  | value 2  | value 3  |
| value 1  | value 2  ||
| value 1  || value 2 |
|| value 1  | value 2 |
| value 1  |||
|| value 1  ||
||| value 1  |

multi-row cells

afaik, there is currently no way to do this in GFM markdown, unless you use HTML. See above multi-column cells.

| First line of the poem | | Second line of the poem | | Third line of the poem |

incomplete rows

Rows lacking the complete markup have no impact.

| colone      | coltwo | colthree | colfour |
| ---         | ---    | ---      | --      |
| every       | col    | is       | used    |
| only onecol |
| onecol      | twocol |
| every       | col    | is       | used    |
| only onecol |

Blockquote

short lines short lines

markdown strong short lines

> short lines
> short lines
> 
> **markdown strong**
> short lines

really long lines markdown strong really long lines markdown strong really long lines markdown strong really long lines markdown strong really long lines markdown strong really long lines markdown strong

really long lines markdown strong really long lines markdown strong really long lines markdown strong really long lines markdown strong really long lines markdown strong really long lines markdown strong

> really long lines **markdown strong** really long lines **markdown strong** really long lines **markdown strong** really long lines **markdown strong** really long lines **markdown strong** really long lines **markdown strong** 
>
> really long lines **markdown strong** really long lines **markdown strong** really long lines **markdown strong** really long lines **markdown strong** really long lines **markdown strong** really long lines **markdown strong** 

Inline HTML

You can use html tags.

<em>You</em> can <strong>use</strong> <i>html</i> <b>tags</b>.

Horizontal Rule

---
***
___

Math

This sentence will have an equation inline, here it is c² = a² + b² it looked like that. Use single dollar signs for inline math.

This sentence will have an equation inline, here it is $c^2 = a^2 + b^2$
it looked like that. Use single dollar signs for inline math.

Two dollar signs and the equation will be on it’s own and centered, E = mc² like that. No matter where it appears, even mid sentence.

Two dollar signs and the equation will be on it's own and centered,
$$E=mc^2$$ like that. No matter where it appears, even mid sentence.

Quotes

This section is to ‘test’ “smart quotes”, where the quotes make the 66 99 shapes around words.

This section is to 'test' "smart quotes", where the quotes make the 66 99 shapes around words.

Emoji and HTML entities

See test emoji for the unicode emoji version supported by pandoc.

• ✓ ✗ 😄 ❌
• https://dev.w3.org/html5/html-author/charref
• https://www.webfx.com/tools/emoji-cheat-sheet/

* ✓ ✗ :smile: :x:
* https://dev.w3.org/html5/html-author/charref
* https://www.webfx.com/tools/emoji-cheat-sheet/

Comments

Note: You have to view page source to see the results in the html output

Normal html comment:

<!-- html comment two dashes -->

Three dashes doesn’t seem to make a difference compared to normal html comment:

<!--- html comment three dashes -->

Don’t use the below, it’s just here to see what happens:

<? question marks ?>

<? multiple lines

with newline breaks ?>

Below is a link hack which hides the comment completely from the html output:

[//]: # (link hack)

HTML tag and Font test

• code !“#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcedefghijklmnopqrstuvwxyz{|}~
• em !“#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcedefghijklmnopqrstuvwxyz{|}~
• ins !“#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcedefghijklmnopqrstuvwxyz{|}~
• kbd !“#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcedefghijklmnopqrstuvwxyz{|}~
• mark !“#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcedefghijklmnopqrstuvwxyz{|}~
• plain !“#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcedefghijklmnopqrstuvwxyz{|}~
• pre

  !“#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcedefghijklmnopqrstuvwxyz{|}~

• samp !“#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcedefghijklmnopqrstuvwxyz{|}~
• small !“#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcedefghijklmnopqrstuvwxyz{|}~
• strong !“#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcedefghijklmnopqrstuvwxyz{|}~
• sub <sub>!“#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcedefghijklmnopqrstuvwxyz{|}~</sub>
• sup ^{!“#$%&’()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcedefghijklmnopqrstuvwxyz{|}~}

Lorem Ipsum

Big chunks of text to test paragraph alignment.

Plain text

The following paragaph has default formatting:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ligula ac felis pretium dictum quis eget turpis. In laoreet dictum ante in vestibulum. Nullam vitae turpis ipsum. Pellentesque ultrices eros diam, aliquet fringilla odio interdum vitae. Maecenas a ipsum pretium, placerat nulla et, convallis nunc. Vivamus eleifend gravida nulla, eget scelerisque massa. In sagittis est elit, elementum sollicitudin tellus tempus id. Suspendisse malesuada lacinia tortor, vel bibendum odio gravida at. Sed condimentum cursus nunc sit amet faucibus. Sed maximus justo dui, in consequat neque faucibus at. Aliquam nec suscipit erat. Etiam sed convallis nibh. Sed at arcu enim.

Blockquote

The following paragaph is a blockquote using > at the start of each line:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ligula ac felis pretium dictum quis eget turpis. In laoreet dictum ante in vestibulum. Nullam vitae turpis ipsum. Pellentesque ultrices eros diam, aliquet fringilla odio interdum vitae. Maecenas a ipsum pretium, placerat nulla et, convallis nunc. Vivamus eleifend gravida nulla, eget scelerisque massa. In sagittis est elit, elementum sollicitudin tellus tempus id. Suspendisse malesuada lacinia tortor, vel bibendum odio gravida at. Sed condimentum cursus nunc sit amet faucibus. Sed maximus justo dui, in consequat neque faucibus at. Aliquam nec suscipit erat. Etiam sed convallis nibh. Sed at arcu enim.

Ragged left

The following paragaph is contained in a <div align=left></div> block:

Centered

The following paragaph is contained in a <div align=center></div> block:

Ragged right

The following paragaph is contained in a <div align=right></div> block:

Justify

The following paragaph is contained in a <div align=justify></div> block:

Code

The following paragaph is contained in a fenced code block using three backticks:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed ligula
ac felis pretium dictum quis eget turpis. In laoreet dictum ante in
vestibulum. Nullam vitae turpis ipsum. Pellentesque ultrices eros
diam, aliquet fringilla odio interdum vitae. Maecenas a ipsum pretium,
placerat nulla et, convallis nunc. Vivamus eleifend gravida nulla, eget

and this uses three tildes:

scelerisque massa. In sagittis est elit, elementum sollicitudin tellus
tempus id. Suspendisse malesuada lacinia tortor, vel bibendum odio
gravida at. Sed condimentum cursus nunc sit amet faucibus. Sed maximus
justo dui, in consequat neque faucibus at. Aliquam nec suscipit erat.
Etiam sed convallis nibh. Sed at arcu enim.

Special cases

Making sure that edge cases behave as expected

images with tables

Image with a caption followed by a table, this had strange spacing

This is just plain text

The table above is followed by plain text

multiple images with no blank lines inbetween

multiple images with blank lines inbetween

multiple images with captions

Images in a table

See two images side by side below

Two images side by side

The only way I’ve found using pandoc and html is to put them in a table.

|                          |                          |
| :----------------------: | :----------------------: |
| ![favicon](favicon.webp) | ![favicon](favicon.webp) |

This is a very long title to see how it impacts the Table of Contents and how it wraps on the screen

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

embed youtube video

<iframe width="560" height="315" src="https://www.youtube.com/embed/FCcdr4O-3gE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

image copyright notice

⚠️ The image ‘Philips PM5544 test pattern’ used on this page by Ebnz from File:Philips_PM5544.svg
(GFDL v1.2, CC BY-SA 3.0, CC BY 2.5)

<small>:warning: *The image 'Philips PM5544 test pattern' used on this page by
[Ebnz](https://commons.wikimedia.org/wiki/User:Ebnz) from
[File:Philips_PM5544.svg](https://en.wikipedia.org/wiki/File:Philips_PM5544.svg)
<br />(GFDL v1.2, CC BY-SA 3.0, CC BY 2.5)</small>*