Light theme

Colors

Typography

---

Heading 1

Subtitle

Heading 2

Subtitle

Heading 3

Subtitle

Heading 4

Heading 5

Heading 6

Sans Serif Font

Work Sans or fallback to native

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Some latin extended characters: à á â ä ǎ æ ã å ā ņ ç č

1234567890

font-weight light 200

font-weight normal 400

font-weight bold 700

Serif Font

Crimson Pro or fallback to native

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Some latin extended characters: à á â ä ǎ æ ã å ā ņ ç č

1234567890

font-weight light 200

font-weight normal 400

font-weight bold 700

Monospace Font

Fira Code or fallback to native

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Some latin extended characters: à á â ä ǎ æ ã å ā ņ ç č

1234567890

font-weight light 200

font-weight normal 400

font-weight bold 700

Nav Bar

A link

A blockquote

Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.

• An unordered list
• of items
  • and sub items

1. An ordered list
2. of items
   1. and sub items

Icons

Tables

Col 1	Col 2
Val 1	Val 2
Val 1	Val 2
Summary 1	Summary 2

Code Highlighting

(requires js)

Some inline code

    
// some code highlighting
import { lower, ord, groupEvery } from '../../lib';

const LOWER = 'a'.charCodeAt() - 1;
const UPPER = 'A'.charCodeAt() - 27;
const priority = (c) => (c === lower(c) ? ord(c) - LOWER : ord(c) - UPPER);
const chars = ([first, ...sets]) =>
  first.find((c) => sets.every((s) => s.includes(c)));

export const solutionOne = (input) =>
  input
    .map((l) => [l.slice(0, l.length / 2), l.slice(l.length / 2)])
    .map(([a, b]) => priority(chars([a.split(''), b.split('')])))
    .sum();
    
  

With line numbers

    
mod handlers;

#[tokio::main]
async fn main() {
  tracing_subscriber::fmt()
    .with_max_level(tracing::Level::DEBUG)
    .init();

  let app = handlers::router();
  let host = std::env::var("HOST").unwrap_or("127.0.0.1".into());
  let listener = tokio::net::TcpListener::bind(format!("{host}:3000"))
    .await
    .unwrap();

  axum::serve(listener, app).await.unwrap();
}
    
  

Languages that aren't bundled can be loaded in asynchronously. Here C# isn't one of the languages I pre-packaged into the main minimal bundle, so it's loaded after the page render. This means it's slower to highlight as well though.

    
using System;

namespace HelloWorld
{
  class Program
  {
    static void Main(string[] args)
    {
      Console.WriteLine("Hello World!");
    }
  }
}
    
  

    
const solution = (input) => {
  const [ns, ...bs] = groupLines(input);
  let boards = bs.map((b) => new Bingo(b));
+ let winners = [];
  for (const num of ns[0].split(',')) {
    boards.forEach((b) => {
      b.mark(num);
-     if (b.hasBingo) return b.score();
+     if (b.hasBingo) winners.push(b.score());
+     boards = boards.filter((b) => !b.hasBingo);
    });
  }
+ return [winners[0], winners.at(-1)];
};
    
  

    
app
├─ controllers
├─ models
├─ tests
└─ views
    
  

    
┌───────┐ ┌───────┐ ┌───────┐
│Actor 1│ │Actor 2│ │Actor 3│
└───┬───┘ └───┬───┘ └───┬───┘
    │         │         │
    │  msg 1  │         │
    │────────►│         │
    │         │         │
    │         │  msg 2  │
    │         │────────►│
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│Actor 1│ │Actor 2│ │Actor 3│
└───────┘ └───────┘ └───────┘
    
  

    
// some code highlighting
import { lower, ord, groupEvery } from '../../lib';

const LOWER = 'a'.charCodeAt() - 1;
const UPPER = 'A'.charCodeAt() - 27;
const priority = (c) => (c === lower(c) ? ord(c) - LOWER : ord(c) - UPPER);
const chars = ([first, ...sets]) =>
  first.find((c) => sets.every((s) => s.includes(c)));

export const solutionOne = (input) =>
  input
    .map((l) => [l.slice(0, l.length / 2), l.slice(l.length / 2)])
    .map(([a, b]) => priority(chars([a.split(''), b.split('')])))
    .sum();
    
  

    
mod handlers;

#[tokio::main]
async fn main() {
  tracing_subscriber::fmt()
    .with_max_level(tracing::Level::DEBUG)
    .init();

  let app = handlers::router();
  let host = std::env::var("HOST").unwrap_or("127.0.0.1".into());
  let listener = tokio::net::TcpListener::bind(format!("{host}:3000"))
    .await
    .unwrap();

  axum::serve(listener, app).await.unwrap();
}
    
  

    
using System;

namespace HelloWorld
{
  class Program
  {
    static void Main(string[] args)
    {
      Console.WriteLine("Hello World!");
    }
  }
}
    
  

    
const solution = (input) => {
  const [ns, ...bs] = groupLines(input);
  let boards = bs.map((b) => new Bingo(b));
+ let winners = [];
  for (const num of ns[0].split(',')) {
    boards.forEach((b) => {
      b.mark(num);
-     if (b.hasBingo) return b.score();
+     if (b.hasBingo) winners.push(b.score());
+     boards = boards.filter((b) => !b.hasBingo);
    });
  }
+ return [winners[0], winners.at(-1)];
};
    
  

    
app
├─ controllers
├─ models
├─ tests
└─ views
    
  

    
┌───────┐ ┌───────┐ ┌───────┐
│Actor 1│ │Actor 2│ │Actor 3│
└───┬───┘ └───┬───┘ └───┬───┘
    │         │         │
    │  msg 1  │         │
    │────────►│         │
    │         │         │
    │         │  msg 2  │
    │         │────────►│
┌───┴───┐ ┌───┴───┐ ┌───┴───┐
│Actor 1│ │Actor 2│ │Actor 3│
└───────┘ └───────┘ └───────┘