Enhanced Blog Features Test

This post demonstrates all the enhanced blog features. Use the text arrangement toggle in the header to customize your reading experience with different fonts, text sizes, line heights, and content widths.

Callout Cards

Use callout cards to highlight important information, warnings, tips, and more.

Mathematical Equations with KaTeX

One of the most powerful features is full LaTeX math support ^[1] . You can write inline math like $E = mc^2$ or the quadratic formula $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ directly in your text.

For more complex equations, use display mode:

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

Here’s the famous Euler’s identity:

$$e^{i\pi} + 1 = 0$$

And a matrix example:

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

Calculus Example

The derivative of a function using the limit definition:

$$f'(x) = \lim_{h \to 0} \frac{f(x + h) - f(x)}{h}$$

Interactive Concept Checks

Test your understanding with interactive questions. Click on the answer area to reveal the solution!

Video Embeds

Easily embed YouTube and Vimeo videos with privacy-enhanced URLs:

YouTube Video

Vimeo Video

Single Image

You can also display a single image with a caption:

Photo Gallery

Display images in a beautiful grid with lightbox support. Click any image to view it in fullscreen!

Three Column Gallery

Two Column Gallery

Typography and Text Formatting

The enhanced blog layout includes improved typography with proper heading hierarchy and spacing.

Code Blocks

function binarySearch(arr, target) {
  let left = 0;
  let right = arr.length - 1;

  while (left <= right) {
    const mid = Math.floor((left + right) / 2);

    if (arr[mid] === target) {
      return mid;
    } else if (arr[mid] < target) {
      left = mid + 1;
    } else {
      right = mid - 1;
    }
  }

  return -1;
}

Blockquotes

The only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle.

— Steve Jobs

Lists

Unordered list:

• First item with some additional text to show wrapping
• Second item
• Third item with bold and italic text

Ordered list:

1. First step in the process
2. Second step with more details
3. Third step to complete the task

Table of Contents

Notice the floating table of contents on the left side (on desktop). It highlights the current section as you scroll and allows quick navigation to any heading.

On mobile devices, you’ll find a collapsible TOC dropdown at the top of the article.

Reading Preferences

Click the text icon (Aa) in the header to customize:

• Font: Switch between Sans-serif and Serif fonts
• Line Height: Choose Compact, Normal, or Relaxed spacing
• Width: Select Narrow, Normal, or Wide content width

Your preferences are saved and will persist across sessions!

Conclusion

This enhanced blog layout provides a modern, feature-rich reading experience with:

• Full KaTeX/LaTeX math support
• Interactive concept check components
• Video embeds for YouTube and Vimeo
• Photo galleries with lightbox
• Floating table of contents
• Customizable text arrangement
• Improved typography and spacing

All features work seamlessly across light, dark, and paper themes.

Citations and References

You can add citations to your text using the Cite component ^[3] . Each citation links to the corresponding reference at the bottom of the page.