Article enhancements: callouts, math, diagrams and lightboxes

Alongside Markdown typography, BlogGPT provides callouts, math, diagrams and image lightboxes, and supports interactive components in MDX.

Callouts

Custom titles

Create a callout with markers such as > [!NOTE] or > [!TIP]. Add a custom title after the marker.

KaTeX math

Inline math such as $E=mc^2$ appears alongside text. Surround display math with $$:

Mermaid diagrams

Write a diagram in a code block marked mermaid:

flowchart LR
  A[Write content] --> B[Preview locally]
  B --> C[Build the site]
  C --> D[Publish]

Expand the source to view it. Diagram colors follow light and dark appearance.

PhotoSwipe image lightbox

Click an image to view it at full size. Zoom, switch images or press Escape to close the lightbox.

MDX interactive components

Drag the sliders to adjust the sine wave’s amplitude, period and initial phase. The graph updates immediately. Use arrow keys for smaller adjustments, or click “Reset” to restore the initial values.

Insert a component

Import a component in an .mdx file, then place it in the body:

import SineWave from './SineWave.astro';

<SineWave lang="en" />

This example keeps SineWave.astro, its calculation helper and copy in the article bundle. lang sets the component’s interface language. Keep one-off components in their article bundle, or write simple markup directly in MDX. Put components shared by multiple articles in custom/components/ and import them using relative paths.

Configure each entry

Set global defaults for enhancements and override them in each entry’s frontmatter. See Enhancement switches.