August 18, 2025

Mathematics and Images Example

This post demonstrates how to use LaTeX equations and images in your blog posts.

LaTeX Math Support

Inline Math

You can write inline equations like $E = mc^2$ or $\sum_{i=1}^{n} x_i$ directly in your text.

Display Math

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}$$

Complex Equations

LaTeX supports complex mathematical notation:

$$\nabla \times \vec{F} = \left( \frac{\partial F_z}{\partial y} - \frac{\partial F_y}{\partial z} \right) \hat{i} + \left( \frac{\partial F_x}{\partial z} - \frac{\partial F_z}{\partial x} \right) \hat{j} + \left( \frac{\partial F_y}{\partial x} - \frac{\partial F_x}{\partial y} \right) \hat{k}$$

Images

Simple Image

You can include images using standard Markdown syntax:

![Alt text](posts/images/your-image.jpg)

Image with Caption

For images with captions, use HTML figure tags:

<figure>
    <img src="posts/images/your-image.jpg" alt="Description">
    <figcaption>Your image caption here</figcaption>
</figure>

Responsive Images

All images are automatically responsive and will scale properly on mobile devices.

Image Organization

Recommended structure:

posts/
├── images/
│   ├── post1/
│   │   ├── figure1.jpg
│   │   └── figure2.png
│   └── post2/
│       └── diagram.svg
├── your-post.md
└── posts.json

Performance Tips

  1. Optimize images before uploading:
  2. Use WebP format when possible
  3. Compress JPEG/PNG files

  4. Use appropriate dimensions (max 1200px wide)

  5. Use descriptive alt text for accessibility

  6. Consider SVG for diagrams and simple graphics

Supported Math Delimiters

  • Inline: $...$ or \(...\)
  • Display: $$...$$ or \[...\]

Both work seamlessly with the KaTeX rendering engine.