Sean Hammond, Aug 2019

Basic Typography and Images

This is a post demonstrating the theme’s basic typography features. We’ll go through all the basic HTML elements.

Tables of Contents

Kramdown can generate a table of contents by using {:toc}, like this:

1. This ordered list will be replaced with a table of contents.
{:toc}

Or if you want the TOC to be a bullet- rather than a numbered-list then use an unordered list:

* This unordered list will be replaced with a table of contents.
{:toc}

Adding {:.no_toc} to a header excludes it from the table of contents:

Excluded Header
---------------
{:.no_toc}

For example here’s the table of contents for this post:

• Tables of Contents
• Paragraphs
  • Line Breaks
• Span Elements
• Lists
  • Block-level Elements Inside List Items
  • Nested Lists
  • Definition Lists
• Horizontal Rules
• Images
• Small Text, Subscripts, and Superscripts

Paragraphs

Here’s a couple of plain paragraphs of text to start:

Integer purus massa, placerat vitae odio id, hendrerit iaculis metus. Aliquam sagittis eget est eget pellentesque. Donec tincidunt at massa ornare aliquam. Proin ut dui ultricies, auctor nisi non, blandit odio.

Curabitur accumsan ac nisl quis blandit. Aenean pharetra elit quis elementum tristique. Donec ac tincidunt mauris. Sed nec arcu est. Duis elementum lectus urna. Nam in tincidunt justo. Nunc varius ac mi tempor gravida.

Nam facilisis vel purus id convallis. Maecenas vel diam tincidunt, faucibus ante at, consequat ante. Curabitur sit amet tortor leo. In vestibulum purus sollicitudin commodo tempor.

Line Breaks

You can force a <br /> by ending a mid-paragraph line in the Markdown source with two spaces. For example this paragraph has a forced line break after “quis”:

Curabitur accumsan ac nisl quis blandit. Aenean pharetra elit quis.
Donec ac tincidunt mauris. Sed nec arcu est. Duis elementum lectus urna. Nam in tincidunt justo. Nunc varius ac mi tempor gravida.

If you want to insert a non-breakable space just use   instead of a space.

Span Elements

This is an example link. Linkified URLs: http://example.com/, address@example.com. Emphasised words. Words in bold. Struck through. Underlined. Mid-word emphasis: unfriggingbelievable, unfriggingbelievable. Code: use the printf() function, please don’t use any <blink> tags. Mixing things together works too. Here’s a link with bold and code() in it. An all bold link, and an all_code_link().

Lists

Here’s a simple bullet point list:

• Vivamus sit amet elit bibendum, sollicitudin turpis vel, ullamcorper purus.
• Aliquam ornare sapien ut nisl tristique, dignissim molestie tortor commodo.
• Praesent aliquet erat eu felis malesuada maximus.
• Mauris suscipit neque consectetur leo vestibulum, sit amet mollis est pretium.

Here’s a list of multi-line items:

• Nam pharetra felis sit amet neque condimentum sodales. Quisque vitae elit pretium, volutpat velit at, ultrices mauris. Proin vel est porttitor, sagittis libero non, tristique ipsum.
• Morbi tempor sit amet mi nec auctor. Nulla metus purus, pulvinar sed eros non, ornare hendrerit lacus. Nullam rhoncus pretium turpis iaculis sollicitudin. Mauris ligula velit, ullamcorper a luctus sed, gravida vitae leo.
• Morbi non lobortis purus, nec viverra tortor. Integer molestie tincidunt malesuada. Quisque eros tortor, iaculis a est vel, aliquam mollis lectus.
• Duis finibus commodo velit, ac aliquam nibh interdum vitae. Sed luctus vel dolor vel fringilla. Cras bibendum, turpis nec vestibulum vestibulum, augue sem ultricies urna, eu condimentum libero sapien eget nisi.

And a mixture of both single and multi-line items:

• Vivamus sit amet elit bibendum, sollicitudin turpis vel, ullamcorper purus.
• Morbi tempor sit amet mi nec auctor. Nulla metus purus, pulvinar sed eros non, ornare hendrerit lacus. Nullam rhoncus pretium turpis iaculis sollicitudin. Mauris ligula velit, ullamcorper a luctus sed, gravida vitae leo.
• Praesent aliquet erat eu felis malesuada maximus.
• Duis finibus commodo velit, ac aliquam nibh interdum vitae. Sed luctus vel dolor vel fringilla. Cras bibendum, turpis nec vestibulum vestibulum, augue sem ultricies urna, eu condimentum libero sapien eget nisi.

If you leave blank lines between the lists items Markdown renders them as <li><p>s rather than just <li>’s, which results in the list being rendered with some vertical space between items. Here’s the same list again but with blank lines between the list items:

• Vivamus sit amet elit bibendum, sollicitudin turpis vel, ullamcorper purus.

• Morbi tempor sit amet mi nec auctor. Nulla metus purus, pulvinar sed eros non, ornare hendrerit lacus. Nullam rhoncus pretium turpis iaculis sollicitudin. Mauris ligula velit, ullamcorper a luctus sed, gravida vitae leo.

• Praesent aliquet erat eu felis malesuada maximus.

• Duis finibus commodo velit, ac aliquam nibh interdum vitae. Sed luctus vel dolor vel fringilla. Cras bibendum, turpis nec vestibulum vestibulum, augue sem ultricies urna, eu condimentum libero sapien eget nisi.

Block-level Elements Inside List Items

Here’s a numbered list with multi-paragraph list items:

1. This is a list item with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.

   Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus. Donec sit amet nisl. Aliquam semper ipsum sit amet velit.

2. Suspendisse id sem consectetuer libero luctus adipiscing.

3. A list item with a blockquote:

   This is a blockquote inside a list item.

4. A list item with a code block:

   <code goes here>
   

Nested Lists

You can nest lists inside lists:

• Vivamus non arcu quis sem aliquam scelerisque.
• Quisque in quam tempor, finibus odio nec, pellentesque metus.
• Aenean lacinia augue vel orci efficitur accumsan a a erat.
• Mauris nec sem dapibus, convallis dolor eu, egestas nulla.
  1. Ut quis neque ac lectus vestibulum mattis.
  2. Fusce congue tortor blandit elit malesuada placerat.
  3. Suspendisse porttitor justo at massa ullamcorper elementum.
     • Vestibulum a turpis non urna volutpat luctus nec ut nisl. * Integer non orci a ex aliquam maximus rutrum a enim. * Nullam sit amet turpis sit amet sapien auctor vestibulum at vitae felis.
• Vivamus ullamcorper orci a leo pretium pulvinar.
• Maecenas volutpat est eget purus placerat consectetur.

Definition Lists

Here’s an example <dl>:

Nullam non risus ullamcorper, ullamcorper elit id, pellentesque turpis.

Fusce varius magna a felis accumsan suscipit.

Sed in libero luctus mauris pretium ultrices.

Vestibulum bibendum nisl ut quam consectetur, vitae fringilla diam pulvinar.

Aenean porttitor risus vel justo molestie.

Et vulputate ipsum scelerisque.

Aliquam quis libero facilisis, egestas nulla sit amet, commodo eros.

Aenean ut cursus est, et eleifend enim.

If you put blank lines between terms and definitions then the definitions get wrapped in <p>’s:

Nullam non risus ullamcorper, ullamcorper elit id, pellentesque turpis.

Fusce varius magna a felis accumsan suscipit.

Sed in libero luctus mauris pretium ultrices.

Vestibulum bibendum nisl ut quam consectetur, vitae fringilla diam pulvinar.

Aenean porttitor risus vel justo molestie.

Et vulputate ipsum scelerisque.

Aliquam quis libero facilisis, egestas nulla sit amet, commodo eros.

Aenean ut cursus est, et eleifend enim.

Horizontal Rules

Here’s an <hr />:

---

Images

Aenean ut cursus est, et eleifend enim. Suspendisse enim odio, vestibulum id ex nec, interdum imperdiet tortor. In ut nisl congue, rutrum diam nec, tincidunt turpis. Morbi finibus facilisis ante ut interdum.

Nullam interdum tellus sit amet velit rutrum mattis. Praesent id mi id nisl placerat tempus eget sed enim. Fusce eu leo condimentum, posuere enim sed, pellentesque eros.

Small Text, Subscripts, and Superscripts

The <small>, <sub> and <sup> elements are supported:

Here’s some small text.

Here’s some text with a subscript._subscript

Here’s some text with a superscript.^superscript Superscripts are used for footnotes.