Formatting

This page demonstrates all supported markdown rendering features. Use it as a reference and a visual regression test.

Text styling

Bold text and also bold. Italic text and also italic. Strikethrough text.

This text is extremely important. All this text is important.

This is a subscript and this is a superscript.

Headings

Headings from ## through #### appear in the page outline on the right:

Third-level heading

Content under a third-level heading.

Fourth-level heading

Content under a fourth-level heading.

Links

Inline link and link with title.

Autolinked URL: https://github.com

Relative link to the root page

Relative link to guide (URL)

Relative link to guide (.md)

Relative link to font-license (.md)

Wiki links

Link to any page by slug using double brackets:

guide and font-license

Custom display text with a pipe: Guide

Blockquotes

This is a blockquote. It can span multiple lines.

It can contain bold, italic, and code.

Lists

Unordered

• First item
• Second item
  • Nested item
  • Another nested item
    • Deeply nested
• Third item

Ordered

1. First item
2. Second item
   1. Nested ordered
   2. Another nested
3. Third item

Task list

• Completed task
• Incomplete task
• Another incomplete task

Mixed

1. First ordered item
   • Unordered sub-item
   • Another sub-item
2. Second ordered item

Code

Inline code looks like this. A longer inline example: const x = Math.random().

Fenced code blocks

interface User {
  id: string;
  name: string;
  email: string;
}

function greet(user: User): string {
  return `Hello, ${user.name}!`;
}

def fibonacci(n: int) -> list[int]:
    """Generate the first n Fibonacci numbers."""
    seq = [0, 1]
    for _ in range(2, n):
        seq.append(seq[-1] + seq[-2])
    return seq[:n]

#!/bin/bash
echo "Hello from bash"
for i in {1..5}; do
  echo "Count: $i"
done

{
  "name": "@mattlenz/kb",
  "version": "0.0.1",
  "type": "module"
}

.kb-layout {
  display: flex;
  min-height: 100vh;
  font-family: "Monument Grotesk", system-ui, sans-serif;
}

SELECT users.name, COUNT(posts.id) AS post_count
FROM users
LEFT JOIN posts ON posts.author_id = users.id
GROUP BY users.id
HAVING post_count > 10
ORDER BY post_count DESC;

A plain code block with no language:

No syntax highlighting here.
Just plain monospace text.

Tables

Alignment

Images

Images from the content directory are served directly:

Horizontal rules

Content above.

---

Content below.

Footnotes

Here is a statement with a footnote¹. And another².

Diagrams

Mermaid

PlantUML

Escaping

Literal asterisks: *not italic*. Literal backticks: `not code`.

Long content

This section tests how the layout handles longer prose. The sidebar should remain sticky, the outline should track scroll position, and the main content area should scroll independently.

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.

Footnotes

1. This is the first footnote. ↩

2. This is the second footnote with inline code. ↩