Home A - Z

Commit 4499e1

2026-04-16 05:09:09 David Marsh: -/-
/dev/null .. test.md
@@ 0,0 1,1021 @@
+ # Test
+
+ *markdown test page for this blog*
+
+ 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](https://github.github.com/gfm/) 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](https://github.com/adam-p/markdown-here/wiki/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.[^toc]
+
+ [^toc]: 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.
+
+ 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~~
+ ```
+
+ <sup>superscript</sup>, <sub>subscript</sub>, <mark>mark</mark> and <small>small</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=left>Align text left</div>
+ ```
+
+ <div align=center>Align text center</div>
+
+ ```
+ <div align=center>Align text center</div>
+ ```
+
+ <div align=right>Align text right</div>
+
+ ```
+ <div align=right>Align text right</div>
+ ```
+
+ <div align=justify>Align text justify</div>
+
+ ```
+ <div align=justify>Align text justify</div>
+ ```
+
+ ### Colours
+
+ We can't do colours directly in markdown, we have to use HTML style tags.
+
+ <span style="color: red;">This text is red.</span>
+
+ ```
+ <span style="color: red;">This text is red.</span>
+ ```
+
+ Lists
+ -----
+
+ 1. First
+ 1. Second
+ 1. Third
+
+ ```
+ 1. First
+ 1. Second
+ 1. Third
+ ```
+
+ * One thing
+ * Two thing
+ * Three thing
+
+ ```
+ * One thing
+ * Two thing
+ * Three thing
+ ```
+
+ 1. lists with
+
+ 1. more space
+
+ 1. 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
+ ```
+
+ <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>
+
+ ```html
+ <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]: https://en.wikipedia.org/wiki/lorem_ipsum "with hover text"
+
+ ```
+ [Lorem ipsum] dolor sit amet, consectetur adipiscing elit.
+
+ [lorem ipsum]: https://en.wikipedia.org/wiki/lorem_ipsum "with hover text"
+ ```
+
+ [rdm.sh blog](https://rdm.sh "my 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](#headers) or [smaller header](#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](about.html#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[^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)
+
+ ```
+ 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](test_pattern.webp "There is nothing wrong with your television set. Do not attempt to adjust the picture. We are controlling transmission")
+
+ ```
+ ![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")
+ ```
+
+ ### 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"
+
+ ```
+ ![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"
+
+ ```
+ ![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
+
+ ```
+ [![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
+
+ ```
+ [![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
+ ```
+
+ ```bash
+ #!/bin/bash
+ echo "hello world"
+ rsync -avz here there
+ ls -la *
+ ```
+
+ ````
+ ```bash
+ #!/bin/bash
+ echo "hello world"
+ rsync -avz here there
+ ls -la *
+ ```
+ ````
+
+ ```python
+ #!/usr/bin/python3
+ print ("hello world")
+ ```
+
+ ````
+ ```python
+ #!/usr/bin/python3
+ print ("hello world")
+ ```
+ ````
+
+ ```c
+ #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;
+ }
+ ```
+ ````
+
+ ```html
+ <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
+
+ <table>
+ <tr><td>mixed *html*</td><td>_table_ **with**</td></tr>
+ <tr><td>__markdown__ text</td><td>doesn't work</td></tr>
+ </table>
+
+ ```html
+ <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 | <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 |
+
+ ```
+ | 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
+ -----------
+
+ <em>You</em> can <strong>use</strong> <i>html</i> <b>tags</b>.
+
+ ```html
+ <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^2 = a^2 + b^2$
+ 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^2$$ 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](test_emoji.html) 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/
+
+ ```
+ * &check; &cross; :smile: :x:
+ * https://dev.w3.org/html5/html-author/charref
+ * https://www.webfx.com/tools/emoji-cheat-sheet/
+ ```
+
+ ### Whitespace characters
+
+ 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
+
+ ```
+ 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](https://en.wikipedia.org/wiki/Whitespace_character)
+
+ Comments
+ --------
+
+ *Note: You have to view page source to see the results in the html
+ output*
+
+ Normal html comment:
+
+ <!-- html comment two dashes -->
+
+ ```
+ <!-- html comment two dashes -->
+ ```
+
+ Three dashes doesn't seem to make a difference compared to normal html comment:
+
+ <!--- html comment three dashes -->
+
+ ```
+ <!--- html comment three dashes -->
+ ```
+
+ Don't use the below, it's just here to see what happens:
+
+ <? question marks ?>
+
+ <? multiple lines
+
+ with newline breaks ?>
+
+ ```
+ <? question marks ?>
+
+ <? multiple lines
+
+ with newline breaks ?>
+ ```
+
+ Below is a link hack which hides the comment completely from the html
+ output:
+
+ [//]: # (link hack)
+
+ ```
+ [//]: # (link hack)
+ ```
+
+
+ HTML tag and Font test
+ ----------------------
+
+ * code <code>!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcedefghijklmnopqrstuvwxyz{|}~</code>
+ * em <em>!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcedefghijklmnopqrstuvwxyz{|}~</em>
+ * ins <ins>!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcedefghijklmnopqrstuvwxyz{|}~</ins>
+ * kbd <kbd>!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcedefghijklmnopqrstuvwxyz{|}~</kbd>
+ * mark <mark>!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcedefghijklmnopqrstuvwxyz{|}~</mark>
+ * plain !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcedefghijklmnopqrstuvwxyz{|}~
+ * pre <pre>!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcedefghijklmnopqrstuvwxyz{|}~</pre>
+ * samp <samp>!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcedefghijklmnopqrstuvwxyz{|}~</samp>
+ * small <small>!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcedefghijklmnopqrstuvwxyz{|}~</small>
+ * strong <strong>!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcedefghijklmnopqrstuvwxyz{|}~</strong>
+ * sub <sub>!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcedefghijklmnopqrstuvwxyz{|}~</sub>
+ * sup <sup>!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcedefghijklmnopqrstuvwxyz{|}~</sup>
+
+ 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:
+
+ <div align=left>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.</div>
+
+ ### Centered
+
+ The following paragaph is contained in a `<div align=center></div>` block:
+
+ <div align=center>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.</div>
+
+ ### Ragged right
+
+ The following paragaph is contained in a `<div align=right></div>` block:
+
+ <div align=right>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.</div>
+
+ ### Justify
+
+ The following paragaph is contained in a `<div align=justify></div>` block:
+
+ <div align=justify>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.</div>
+
+ ### 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](test_pattern.webp "There is nothing wrong with your television set. Do not attempt to adjust the picture. We are controlling transmission")
+
+ | default | left | center | right |
+ | ------- |:---- |:------:| -----:|
+ | d | l | c | r |
+
+ ![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")
+
+ 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](test_pattern.webp "There is nothing wrong with your television set. Do not attempt to adjust the picture. We are controlling transmission")
+ ![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](test_pattern.webp "There is nothing wrong with your television set. Do not attempt to adjust the picture. We are controlling transmission")
+
+ ### multiple images with blank lines inbetween
+
+ ![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](test_pattern.webp "There is nothing wrong with your television set. Do not attempt to adjust the picture. We are controlling transmission")
+
+ ![Philips PM5544](test_pattern.webp "There is nothing wrong with your television set. Do not attempt to adjust the picture. We are controlling transmission")
+
+ ### multiple images with captions
+
+ ![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")
+
+ ![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")
+
+ ![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")
+
+ ### Images in a table
+
+ See [two images side by side](#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) |
+
+ ```
+ | | |
+ | :----------------------: | :----------------------: |
+ | ![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>
+
+ ```
+ <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
+ ----------------------
+
+ <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>*
+
+ ```
+ <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>*
+ ```
+
+ [pandoc]: https://pandoc.org
0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9