Styleguide

A single page for showcasing and testing the common styles and layouts for pages and posts on the site.

Table of Contents


Headings (this is an h2)

Heading level 2

H3

Heading level 3

H4

Heading level 4

H5

Heading level 5

H6

Heading level 6

Text

Text is important, there are lots of things you can do with it!

Markdown

A paragraph of text with a link! Here's an emoji 👍. We can have italicized text, bold text, quoted text, and striked text. A mix of bold and italicized text

A blockquote, how cool is this!?

How about some inline code or keyboard sequences, Command + Tab?

We can also be super fancy and add footnotes[1] to our text to reference things[2]. You can also make them inline[3].

HTML

Here are some HTML elements to format text outside of markdown. I could configure it, but I don't really use these much, so inlining HTML on a static site seems fine if I do.

Computer output example with a <samp> element.

What if we want to highlight some text?

What do inserts look like?

Here is a subscript and a superscript!

Lists

  1. And
  2. Here
  3. Is
  4. An
  5. Ordered list

Definition Lists

Examples pulled from the Pandoc example. This uses the markdown-it-deflist plugin.

Term 1

Definition 1

Term 2 with inline markup

Definition 2

  { some code, part of Definition 2 }

Third paragraph of definition 2.

Term 3

Definition with lazy continuation.

Second paragraph of the definition.

Term 4

Definition 1

Term 5

Definition 2a

Definition 2b

Block of Code

function shuffle<T = unknown>(array: T[]) {
let i = array.length;
let j;

while (i !== 0) {
j = Math.floor(Math.random() * i);
i -= 1;

const swap = array[i];
array[i] = array[j];
array[j] = swap;
}

return array;
}

Tables

Column 1Column 2, Right Aligned
Thing 1Some more data here.
Thing 2Text text text.
Thing 3Did you know that 1+2=3?

Photos and Figures

Dusk at Bde Maka Ska
Dusk at Bde Maka Ska
Lake of the Isles Sunset 1
Sunset at Lake of the Isles
Lake of the Isles Sunset 2
Dusk at Lake of the Isles
Juelz at Skyway Theater, February 29th, 2020

  1. Here is the footnote. ↩︎

  2. Here's one with multiple blocks.

    Indented paragraphs belong to the previous footnote. Find the docs on the markdown-it-footnote docs. ↩︎

  3. This footnote is defined right next to the text that it's noting. ↩︎