A post with code samples

This blog is entirely open source, so I thought I would create an example post that gives examples of the key markdown features available.

General markdown permalink

Obviously, you can use italics and emphasis in your text. You can also create <blockquote>s:

Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.

A list:

• Sed posuere consectetur est at lobortis
• Aenean lacinia bibendum nulla sed consectetur
• Sed posuere consectetur est at lobortis

How about an ordered list:

1. Sed posuere consectetur est at lobortis
2. Aenean lacinia bibendum nulla sed consectetur
3. Sed posuere consectetur est at lobortis

And a simple table:

Media permalink

It's simple to self-host and include images, which are converted to use <figure> and <figcaption> if a description is provided:

You can also add videos to posts from YouTube or Vimeo (or wherever, really) and the front-end will also make those bleed-out for you too.

Technical components permalink

The most common thing you'll want to do is provide code snippets. First, there is a standard code-block that takes a file type and provides syntax highlighting:

.post {
  padding: 1rem;
}

There's one special feature to a code block. Including // filename: name will append that filename above the code-block like so:

this/that/filename.ts
const test: Test = {
  foo: 'oen',
  bar: 2
};

If you want to include beautiful screen recordings, you can use the video embedding. Personally, I prefer to use asciinema, which is a terminal-based text player:

And finally, here's an example of a simple graph built using d3 in an external script: