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

Body Text

Heading Text

Monospace Text

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

• Here
• Is
• An
• Unordered list
  • First nested list item
    • Second nested list item

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

Photos and Figures

Colors

Colors are set with CSS Custom Properties. This site supports a light and dark mode. The current theme is always set to your browser/operating system's preference, as set by the (prefers-color-scheme: dark) media query. Change your preference to see the different variations below.