Code Hike Annotations

This post demonstrates every annotation type available in code blocks. Each annotation is triggered by a special comment inside a fenced code block.

Mark

Highlight specific lines or inline tokens with // !mark:

1
function greet(name: string) {
2
  return `Hello, ${name}!`;
3
}

Focus

Dim unfocused lines to draw attention with // !focus:

1
function processItems(items: string[]) {
2
  const results: string[] = [];
3
  for (const item of items) {
4
    results.push(item.toUpperCase());
5
  }
6
  return results;
7
}

Diff

Show additions and removals with // !diff + and // !diff -:

1
function getApiUrl() {
-
2
  return "http://localhost:3000/api";
+
3
  return process.env.API_URL!;
4
}

Tooltip

Hover over a token for more info with // !tooltip:

1
import { useState } from "react";

Link

Make tokens clickable with // !link:

1
import NextConfig from "next.config";

Callout

Add callout boxes pointing at code with // !callout:

1
function fibonacci(n: number): number {
2
  if (n <= 1) return n;
3
  return fibonacci(n - 1) + fibonacci(n - 2);
This is a recursive call that extends the bounds of the overall text length
4
}

Fold

Collapse inline tokens with // !fold:

1
const config = {
2
  headers: ...,
3
  timeout: 5000,
4
};

Collapse

Collapse a range of lines with // !collapse:

1
interface User {
2
  id: string;
3
  name: string;
4
}
5

6
function validateUser(user: User): boolean {
11
}
12

13
function getUser(id: string): User {
14
  return { id, name: "Alice" };
15
}

Class Name

Apply a custom CSS class to a line with // !className:

1
// A styled comment line
2
const x = 42;

File Title

Pass a filename as the meta string to display a header:

1
export default function Home() {
2
  return <h1>Hello, world!</h1>;
3
}

Line Numbers

Line numbers appear on all code blocks automatically:

1
def hello():
2
    print("Hello from Python!")
3

4
hello()

Copy Button

Hover over any code block to see the copy button in the top-right corner. Try it on any example above!

A test

```ts
// !mark #ff0000
// !focus
function test() {
  console.log("This is a test");
}
```