Writing
Feb 20, 2000
5 min

Test Blog Post: Exploring Features

A richer sandbox post that demonstrates Markdown, MDX, citations, images, tables, footnotes, and interactive components.

Welcome to the Test Post

This page is a deliberately overloaded sandbox for the blog. It mixes regular Markdown with custom MDX components, inline JSX, tables, figures, footnotes, downloadable citations, and interactive elements. It also includes a few ordinary hyperlinks such as Astro [astro-docs] , MDN Web Docs [mdn-docs] , and KaTeX [katex-docs] .

MDX is useful when plain prose is not enough and you want article content to behave more like a tiny application.

Markdown Basics

Regular Markdown still works exactly as expected:

Task lists are handy for notes and checklists:

  • Write with Markdown
  • Enhance with MDX
  • Add media, citations, and tables
  • Resist adding too many demos

Code fences also work nicely:

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('MDX');

Math Rendering with KaTeX

Inline math works inside regular sentences. Einstein’s famous relation is

E=mc2E = mc^2
, and the quadratic formula is
x=b±b24ac2ax = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
.

For display math, we can give an equation more room:

f(x)=limh0f(x+h)f(x)hf'(x) = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}
ex2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

And aligned systems are supported too:

E=ρε0B=0×E=Bt\begin{aligned} \nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \vec{B} &= 0 \\ \nabla \times \vec{E} &= -\frac{\partial \vec{B}}{\partial t} \end{aligned}

Admonitions

Note

Compact note blocks are useful for side information.

Authoring Tip

Mixing prose with a few components usually reads better than turning the whole article into JSX.

Warning

Dense demo pages are great for testing, but not always great as real articles.

Danger

Interactive widgets should still degrade gracefully when JavaScript is unavailable.

Info

This is a full-width admonition with room for a longer explanation. It works well for contextual notes, caveats, or short teaching moments embedded inside a post.

Buttons and Calls to Action

Visit Astro

Images and Figures

The post now includes the Figure component, which is better suited for article images than a bare <img> tag because it gives us consistent captions and spacing.

A test image used to demonstrate the Figure component inside the MDX post.
A local image rendered with the Figure component, using a caption and the collection-relative asset path.
A second local test image that demonstrates multiple media assets in the same post.
A second figure to confirm that multiple local assets resolve correctly from the post folder.

Tables

Tables are useful for structured comparisons, and this component also supports CSV download plus linked HTML cells.

Feature matrix for this demo post
FeatureTypeStatusExample
MathComponentUsedKaTeX
Image FigureComponentUsedLocal post assets
HyperlinksMarkdownUsedMDN
ReferencesComponentUsedJump to references
FootnotesComponentUsedJump to footnotes

Animations

This card fades into view.

This one slides upward with a short delay.

This element keeps bouncing.

Interactive Components

MDX lets us drop interactive JSX-driven pieces right into the article body.

Counter Demo

2

Code Blocks with Tabs

The CodeBlockWithTabs component is useful when one idea needs multiple representations.

## Example Heading\n\nA paragraph with **bold text** and a [link](https://astro.build).
import Admonition from "@components/Admonition.astro";\n\n<Admonition type="tip">MDX can render components inline.</Admonition>
<table>\n  <tr><th>Feature</th><th>Enabled</th></tr>\n  <tr><td>Math</td><td>true</td></tr>\n</table>

Custom JSX Inside MDX

Custom JSX logic can be useful for small presentational helpers. For example, this sentence contains a green highlight and a blue highlight.

Today’s date is: Wed Jun 10 2026

Footnotes

Footnotes are now demonstrated in this post as well. They are handy for adding side remarks without breaking the main flow^authoring-note or for tucking away implementation details^table-note .

Citation Export

Besides inline references, the repo also includes a richer CitationField component that renders multiple export formats with tabbed code blocks.

Citation

You can cite this post as:

@misc{lzicar2000testpost,
  title = {Test Blog Post: Exploring Features},
  author = {Lzicar, M.},
  journal = {mireklzicar.com},
  year = {2000},
  month = {February},
  url = {https://mireklzicar.com/blog/test/}
  note = {Demonstration entry for the MDX sandbox post},
}
TY  - JOUR
TI  - Test Blog Post: Exploring Features
AU  - Lzicar, M.
JO  - mireklzicar.com
PY  - 2000
DA  - 2000/06/20
UR  - https://mireklzicar.com/blog/test/
ER  - 
Lzicar, M. (2000, February 20). Test Blog Post: Exploring Features. *mireklzicar.com*. https://mireklzicar.com/blog/test/
Lzicar, M.. "Test Blog Post: Exploring Features." *mireklzicar.com*, 20 February 2000, https://mireklzicar.com/blog/test/. Accessed June 10, 2026.
Lzicar, M.. "Test Blog Post: Exploring Features." mireklzicar.com. February 20, 2000. https://mireklzicar.com/blog/test/.
Lzicar, M.. Test Blog Post: Exploring Features. mireklzicar.com [Internet]. 2000 February 20 [cited 2026-06-10]; Available from: https://mireklzicar.com/blog/test/
Lzicar, M., "Test Blog Post: Exploring Features," mireklzicar.com, February 20, 2000. [Online]. Available: https://mireklzicar.com/blog/test/

References

Inline citations work like this [astro-docs] and this [katex-docs] . They can point to official docs, papers, or any other sources you want to collect in one place.

References

Footnotes Section

[authoring-note]

This custom footnote system numbers entries automatically based on their rendered order in the page.

[table-note]

The table component can also export its rows to CSV, which makes it handy for small datasets in technical posts.

Conclusion

This file now acts as a fuller content playground for the site. It covers Markdown, MDX, figures, tables, hyperlinks, citations, footnotes, code tabs, math, animation, and interactive components in one place, which should make future content testing much easier.

Citation

You can cite this post as:

@article{test2000,
  title = {Test Blog Post: Exploring Features},
  author = {Miroslav Lzicar},
  journal = {mireklzicar.com},
  year = {2000},
  month = {February},
  url = {https://mireklzicar.com/blog/test/}
  
}
TY  - JOUR
TI  - Test Blog Post: Exploring Features
AU  - Miroslav Lzicar
JO  - mireklzicar.com
PY  - 2000
DA  - 2000/06/20
UR  - https://mireklzicar.com/blog/test/
ER  - 
Miroslav Lzicar (2000, February 20). Test Blog Post: Exploring Features. *mireklzicar.com*. https://mireklzicar.com/blog/test/
Miroslav Lzicar. "Test Blog Post: Exploring Features." *mireklzicar.com*, 20 February 2000, https://mireklzicar.com/blog/test/. Accessed June 10, 2026.
Miroslav Lzicar. "Test Blog Post: Exploring Features." mireklzicar.com. February 20, 2000. https://mireklzicar.com/blog/test/.
Miroslav Lzicar. Test Blog Post: Exploring Features. mireklzicar.com [Internet]. 2000 February 20 [cited 2026-06-10]; Available from: https://mireklzicar.com/blog/test/
Miroslav Lzicar, "Test Blog Post: Exploring Features," mireklzicar.com, February 20, 2000. [Online]. Available: https://mireklzicar.com/blog/test/