test

markdown test page for this blog

david marsh

2023-06-20

This page is used to demonstrate the markup available for this website. This text is set with the yaml metadata variable and will appear above the table of contents.

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

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
Align text left
<div align=left>Align text left</div>
Align text center
<div align=center>Align text center</div>
Align text right
<div align=right>Align text right</div>
Align text justify
<div align=justify>Align text justify</div>

Colours

We can’t do colours directly in markdown, we have to use HTML style tags.

This text is red.

<span style="color: red;">This text is red.</span>

Lists

  1. First
  2. Second
  3. Third
1. First
1. Second
1. Third
* 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
  * 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

Footnotes

There is a footnote right here2 and here345

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

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

mixed html table with markdown text

You can’t put markdown inside a html table

mixed *html*_table_ **with**
__markdown__ textdoesn't work
<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 
| 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
  • value 1
  • value 2
value
  • value 1
  • value 2
value value 1
value 2
value value 1
value 2		 
| 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 
| 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 
| 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 c2 = a2 + b2 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 = mc2 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.

* &check; &cross; :smile: :x:
* https://dev.w3.org/html5/html-author/charref
* https://www.webfx.com/tools/emoji-cheat-sheet/

Whitespace characters

  1. White Space
  2. White Space
  3. White Space
  4. White Space
  5. White Space
  6. White Space
  7. White Space
  8. White Space
  9. White Space
  10. White Space
  11. White Space
  12. White Space
1. White&nbsp;Space
2. White&ensp;Space
3. White&emsp;Space
4. White&emsp13;Space
5. White&emsp14;Space
6. White&numsp;Space
7. White&puncsp;Space
8. White&thinsp;Space
8. White&ThinSpace;Space
9. White&hairsp;Space
10. White&VeryThinSpace;Space
11. White&MediumSpace;Space

See also Whitespace character

Comments

Note: I use --strip-comments to strip the comments from 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)

email

Raw email (Note: this is obfuscated with --email-obfuscation=references, but only the first example is obfuscated. Once you use a mailto link is no longer hidden)

example@example.com

Mailto link:

email

[email](example@example.com)

HTML tag and Font test

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:

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.

Centered

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

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 right

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

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.

Justify

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

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.

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

Philips PM5544 test pattern
default left center right
d l c r
Philips PM5544 test pattern

This is just plain text

default left center right
d l c r

The table above is followed by plain text

multiple images with no blank lines inbetween

Philips PM5544 Philips PM5544 Philips PM5544

multiple images with blank lines inbetween

Philips PM5544
Philips PM5544
Philips PM5544

multiple images with captions

Philips PM5544 test pattern
Philips PM5544 test pattern
Philips PM5544 test pattern

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 
|                          |                          |
| :----------------------: | :----------------------: |
| ![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>

  1. There’s a bug in my code that means toc: anytext or toc: false will create a toc. For now just set toc to true or leave it out altogether.↩︎

  2. GNU Terry Pratchett↩︎

  3. or there↩︎

  4. footnote entries must not be split over multiple lines↩︎

  5. You can add markup in the footnotes↩︎