Markdown

Hyperlinked Images

The Enhancing Text With Markdown document gives instructions for creating web links and inserting images. It may not be obvious that these can be combined to create images that are also clickable links.

[the google search engine][google]

![the google logo][logo]

Above are a standard web link and image. By placing the image where the link text would be found you end up with this:

[![the google logo][logo]][google]

This line above, in combination with the following link definitions elsewhere in the document:

[logo]: http://www.google.com/images/logo.gif
[google]: http://www.google.com/ "click to visit Google.com"

Definition Lists

Definition lists consist of terms followed by their definitions. Rather like a dictionary. A simple example is as follows:

Moodle
:   A well-known online learning platform

PHP
:   A scripting language.
    Mostly used for developing interactive web applications.

Moodle

A well-known online learning platform

PHP

A scripting language. Mostly used for developing interactive web applications.

Footnotes

A footnote has two elements. A marker in the text which will become a superscript number and a footnote definition that will appear at the end of the document. Here is a simple example:

Read about it in my book.[^1]

[^1]: All about my book.

HTML

Formatting footnotes in HTML

A footnote reference and footnote text are output to HTML as follows:

Footnote reference:
<sup>[<a name="id394062" href="#ftn.id394062">*</a>]</sup>

Footnote:
<div class="footnote"><p>
<sup>[<a name="ftn.id394062" href="#id394062">*</a>]</sup>
Text of footnote ...

The footnote mark is rendered with superscript sup and square brackets. Each has an href and a name attribute, so they can cross link between each other. If you want to change that rendering, you will need to customize the following two templates from html/footnote.xsl:

Footnote reference template:

<xsl:template match="footnote">
...

Footnote:
<xsl:template match="footnote/para[1]|footnote/simpara[1]" priority="2">
...

You can change the formatting of the footnote paragraph using CSS. Use the div.footnote CSS selector, and apply whatever styles you want with it, as shown in the following example.

div.footnote {
   font-size: 8pt;
}