Interactive Code Examples: Live Preview Demo

This post demonstrates our new live code preview feature. You can now include interactive code examples that readers can see in action!

Simple Button Example

Let's start with a simple interactive button:

Animated Card Example

Here's a more complex example with CSS animations:

Dynamic Color Picker

An interactive color picker example:

How It Works

To create these live examples in your markdown files, use the special :live suffix:

• html:live for HTML code
• css:live for CSS code
• js:live for JavaScript code

The code blocks are automatically combined into an interactive preview that readers can experiment with!

Regular Code Still Works

Of course, regular code blocks still work as expected:

// This is a regular code block
function fibonacci(n) {
	if (n <= 1) return n
	return fibonacci(n - 1) + fibonacci(n - 2)
}

console.log(fibonacci(10)) // 55

This feature makes technical blog posts much more engaging and helps readers understand concepts through hands-on experimentation!