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
- Here
- Is
- An
- Unordered list
- First nested list item
- Second nested list item
- First nested list item
- And
- Here
- Is
- An
- 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 1 | Column 2, Right Aligned |
---|---|
Thing 1 | Some more data here. |
Thing 2 | Text text text. |
Thing 3 | Did you know that 1+2=3 ? |
Photos and Figures



Here is the footnote. ↩︎
Here's one with multiple blocks.
Indented paragraphs belong to the previous footnote. Find the docs on the markdown-it-footnote docs. ↩︎
This footnote is defined right next to the text that it's noting. ↩︎