Markdown Style Template

templatestyle

This page exists to test every markdown element. If it looks right here, it looks right everywhere.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Inline styles

This is bold, this is italic, this is ~~strikethrough~~, and this is inline code. You can also combine bold and italic together.

Here's a link to GitHub and an auto-linked URL: https://example.com

Blockquote

The best way to predict the future is to invent it.

— Alan Kay

Nested:

First level

Second level

Third level

Lists

Unordered

containerd
CRI-O
Docker Engine
- dockershim (removed)
- cri-dockerd (replacement)
runc
- gVisor (runsc)
- kata-runtime

Ordered

Define the interface (CRI)
Implement the interface (containerd, CRI-O)
Remove the shim (dockershim)
Profit

Task list

Define CRI
Implement containerd CRI plugin
Remove dockershim
World domination

Table

Runtime	Type	CRI	OCI	Notes
containerd	High-level	Yes	Yes	Default for K8s
CRI-O	High-level	Yes	Yes	OpenShift default
runc	Low-level	No	Yes	Standard OCI runtime
gVisor	Low-level	No	Yes	User-space kernel
kata	Low-level	No	Yes	Lightweight VM

Code blocks — FizzBuzz (LeetCode #412)

Bash

#!/bin/bash
for i in $(seq 1 15); do
  if (( i % 15 == 0 )); then
    echo "FizzBuzz"
  elif (( i % 3 == 0 )); then
    echo "Fizz"
  elif (( i % 5 == 0 )); then
    echo "Buzz"
  else
    echo "$i"
  fi
done

TypeScript

function fizzBuzz(n: number): string[] {
  const result: string[] = [];
  for (let i = 1; i <= n; i++) {
    if (i % 15 === 0) result.push("FizzBuzz");
    else if (i % 3 === 0) result.push("Fizz");
    else if (i % 5 === 0) result.push("Buzz");
    else result.push(String(i));
  }
  return result;
}

JavaScript

const fizzBuzz = (n) => {
  return Array.from({ length: n }, (_, i) => {
    const num = i + 1;
    if (num % 15 === 0) return "FizzBuzz";
    if (num % 3 === 0) return "Fizz";
    if (num % 5 === 0) return "Buzz";
    return String(num);
  });
};

C#

public class Solution {
    public IList<string> FizzBuzz(int n) {
        var result = new List<string>();
        for (int i = 1; i <= n; i++) {
            if (i % 15 == 0) result.Add("FizzBuzz");
            else if (i % 3 == 0) result.Add("Fizz");
            else if (i % 5 == 0) result.Add("Buzz");
            else result.Add(i.ToString());
        }
        return result;
    }
}

Java

class Solution {
    public List<String> fizzBuzz(int n) {
        List<String> result = new ArrayList<>();
        for (int i = 1; i <= n; i++) {
            if (i % 15 == 0) result.add("FizzBuzz");
            else if (i % 3 == 0) result.add("Fizz");
            else if (i % 5 == 0) result.add("Buzz");
            else result.add(String.valueOf(i));
        }
        return result;
    }
}

Go

func fizzBuzz(n int) []string {
	result := make([]string, 0, n)
	for i := 1; i <= n; i++ {
		switch {
		case i%15 == 0:
			result = append(result, "FizzBuzz")
		case i%3 == 0:
			result = append(result, "Fizz")
		case i%5 == 0:
			result = append(result, "Buzz")
		default:
			result = append(result, strconv.Itoa(i))
		}
	}
	return result
}

Plain code block (no language)

kubelet → containerd → runc → container

Horizontal rules

Three styles, all render the same:

Image

Footnote

This is a sentence with a footnote¹.

Math (if supported)

Inline: $E = mc^2$

Block:

\sum_{i=1}^{n} i = \frac{n(n+1)}{2}

Mermaid

flowchart LR
  A[kubelet] --> B[containerd]
  B --> C[runc]
  C --> D[container]
  B --> E[gVisor]
  B --> F[kata-runtime]

sequenceDiagram
  participant U as User
  participant K as kubelet
  participant C as containerd
  participant R as runc
  U->>K: kubectl run nginx
  K->>C: CRI CreateContainer
  C->>R: OCI bundle
  R-->>C: PID
  C-->>K: container ready
  K-->>U: pod Running

Summary / Details

Click to expand

Hidden content here. Supports markdown inside.

console.log("revealed!");

This is the footnote content. ↩