Nov 11, 2025

Hand-Drawn Style Components Demo

This page demonstrates all the styled Markdown components with a hand-drawn aesthetic.

Headings

This is a paragraph with bold text and italic text. You can also use ~~strikethrough~~.

Here’s a link to example.com that shows our custom link styling with underline on hover.

Use the color-scheme CSS property to specify color schemes. Here’s another example: const x = 42;

// JavaScript example
function greet(name) {
  return `Hello, ${name}!`;
}

const message = greet("World");
console.log(message);

/* CSS example */
:root {
  color-scheme: light dark;
  --primary: #0066cc;
}

.container {
  padding: 1rem;
  background: var(--primary);
}

# Python example
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))

This is a traditional blockquote with the hand-drawn style. It can span multiple lines and has a nice italic font style.

— Someone Famous

Note

This is a note alert. Use it to provide helpful information or tips to the reader.

Tip

This is a tip alert. Great for sharing best practices and useful suggestions!

Important

This is an important alert. Use it to highlight critical information that shouldn’t be missed.

Warning

This is a warning alert. Perfect for cautionary information or potential pitfalls.

Caution

This is a caution alert. Use it for dangerous operations or critical warnings that need immediate attention.

Feature	Status	Notes
Headings	✅ Done	All levels styled
Code blocks	✅ Done	Syntax highlighting preserved
Lists	✅ Done	Both ordered and unordered
Alerts	✅ Done	5 different types
Tables	✅ Done	Hand-drawn borders

Here’s some text before the rule.

And here’s some text after the rule.

You can combine different elements together:

Tip

Here’s a tip with a code snippet:

npm install remark-github-alerts

Important Note: You can use bold text with inline code and even links inside paragraphs.

This demo showcases all the hand-drawn style components: