Markdown Style Guide

Introduction

This page is a style guide. It exists to test the visual appearance of all standard Markdown elements. Below, you will find typography, lists, code, tables, and media.

Typography

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Text Formatting

You can make text bold, italic, or bold and italic.

You can also use strikethrough to indicate deleted text.

Blockquotes

This is a blockquote. It is often used to highlight important information or quote external sources.

It can also be nested.

Lists

Unordered List

• Item one
• Item two
  • Nested item A
  • Nested item B
• Item three

Ordered List

1. First step
2. Second step
3. Third step

Task List

• [x] Create the blog
• [x] Write the first post
• [ ] Style the CSS

Code

Inline Code

You can format code appearing within a paragraph, like npm install @11ty/eleventy, using backticks.

Code Blocks

Here is a block of JavaScript code:

const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

greet('World');

Here is some CSS:

body {
  background-color: #1a1a1a;
  color: #ffffff;
}

Media

Images

Here is a sample image with alt text and a title.

Figure: This is a caption for the image above.

Standard Image

Linked Image (Clickable)

Image with Caption

Figure 1: An example of abstract placeholder art.

HTML Image (sized to 200px wide)

Media Gallery

Fluid Image

Linked Image

Image Grid (Using HTML)

Lightbox

Links

Here is a link to Eleventy's Documentation.

Tables

Tables are great for structured data.

YouTube Videos

Or just the URL without a title:

GitHub Gists

Option 1: Embed the whole Gist

Option 2: Embed a specific file from a Gist (Useful if a Gist contains multiple files)

Google Slides

Other Elements

Horizontal Rules

Separators can be created with three dashes: