Feature Showcase - Interactive Elements Demo

Welcome to this feature showcase! This post demonstrates the key interactive features of our blog: interactive footnotes, tab boxes, collapsible accordions, and KaTeX math rendering.

Interactive Footnotes

Did you know that footnotes can be interactive ? Unlike traditional footnotes that jump to the bottom of the page, our implementation shows tooltips when you click on them. This creates a much smoother reading experience .

You can include multiple footnotes in a paragraph , and they all work independently. The tooltips are theme-aware, meaning they’ll look great in both light and dark modes .

Tab Boxes

Tab boxes are perfect for organizing related content into switchable views. Here’s an example showing different programming languages:


// A simple greeting function
function greet(name) {
return `Hello, ${name}! Welcome to our blog.`;
}

console.log(greet("World"));


# A simple greeting function
def greet(name):
  return f"Hello, {name}! Welcome to our blog."

print(greet("World"))

Collapsible Accordions

Collapsible boxes (accordions) are ideal for FAQ sections, detailed explanations, or any content that benefits from progressive disclosure:

You can include any content in collapsible boxes, including formatted code:

// Example of using collapsible boxes
const sections = [
{ title: 'Introduction', content: '...' },
{ title: 'Advanced Topics', content: '...' },
{ title: 'Conclusion', content: '...' }
];

sections.forEach(section => {
createCollapsible(section);
});

The defaultOpen prop allows you to have sections expanded by default, as demonstrated by this box.

KaTeX Math Rendering

Mathematics can be beautifully rendered inline, like this famous equation: $E = mc^2$ . You can also use more complex inline expressions such as $\sum_{i=1}^{n} i = \frac{n(n+1)}{2}$ .

For larger equations, use display mode:

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

Here’s the quadratic formula:

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

And a more complex example with matrices:

\begin{bmatrix} a & b \\ c & d \end{bmatrix} \begin{bmatrix} x \\ y \end{bmatrix} = \begin{bmatrix} ax + by \\ cx + dy \end{bmatrix}

Combining Features

You can even combine these features! For instance, here’s a tab box with mathematical content:

One of the most beautiful equations in mathematics:

$$e^{ipi} + 1 = 0$$

This equation elegantly connects five fundamental mathematical constants: e, i, π, 1, and 0.

Conclusion

These interactive features enhance the reading experience by making content more engaging and accessible. The footnotes keep readers in flow, tab boxes organize alternative views elegantly, collapsible boxes enable progressive disclosure, and KaTeX brings mathematical expressions to life.

Feel free to explore these features in your own posts!