This post demonstrates all the markdown, extended markdown, and other embed features available in Astro Modular. Use this as both a reference guide and a showcase of what’s possible.

Basic Formatting

Text Emphasis

Bold text using **bold** or __bold__
Italic text using *italic* or _italic_
Bold and italic using ***text***
~~Strikethrough~~ using ~~text~~
Highlighted text using ==text==
Inline code using backticks

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Callouts and Admonitions

Our theme supports Obsidian-style callouts with proper icons and styling. Each callout type has its own color scheme and matching Lucide icon.

Basic Callouts

Note

This is a note callout. Use it for general information that readers should be aware of.

Tip

This is a tip callout. Perfect for helpful suggestions and best practices.

Important

This is an important callout. Use it to highlight critical information.

Warning

This is a warning callout. Use it to alert readers about potential issues.

Caution

This is a caution callout. Use it for dangerous or risky situations.

Custom Titles

Custom Note Title

You can customize the title of any callout by adding text after the callout type.

Pro Tip

Custom titles help you provide more context for your callouts.

Collapsible Callouts

You can make callouts collapsible by adding + (expanded by default) or - (collapsed by default) after the callout type:

Expanded by Default

This callout starts expanded and can be collapsed by clicking the toggle button or the title.

Collapsed by Default

Collapsible with Custom Title

You can combine collapsible functionality with custom titles for more control over your content organization.

Extended Callout Types

Info

Info callouts provide additional context or details.

Success

Success callouts highlight positive outcomes or achievements.

Question

Question callouts can be used to pose questions or highlight areas of uncertainty.

Example

Example callouts are perfect for showcasing code examples or demonstrations.

Quote

Quote callouts can be used to highlight important quotes or references.

Media Content

Images

Single Image With Caption

Mountains Photo by Antoine Rault on Unsplash

Multiple Image Layouts

This theme automatically arranges consecutive images in responsive grid layouts based on the number of images. Images can be placed together without empty lines between them to create these layouts.

Two Images Side by Side

Mountain landscape Ocean view

Three Images in a Row

Forest path Desert sunset City skyline

Four Images in a Row

Winter landscape Spring flowers Summer beach Autumn leaves

How to Use Multiple Images / Gallery

Simply place multiple images together without empty lines between them:

![Image 1](image1.jpg)
![Image 2](image2.jpg)
![Image 3](image3.jpg)

On mobile devices, all layouts switch to a single column for better readability.

Video Files

Video files are embedded as HTML5 video players with controls and responsive design.

YouTube Videos

YouTube videos are automatically embedded with responsive design and optimized settings.

Audio Files

Audio files are embedded as HTML5 audio players with controls and filename display.

PDF Documents

document.pdf Download PDF

PDFs are embedded as inline viewers with download links.

Use ![[attachments/document.pdf#page=3]] to select a specific PDF page to display.

Twitter/X Posts

Twitter posts are embedded with theme-aware styling that matches your site’s light/dark mode.

Buttons

These buttons use your existing color palette and adapt perfectly to light/dark themes. Wrap them in internal or external links if you prefer:

<div class="btn-group-center my-8">
  <a href="https://google.com" class="no-styling no-underline" target="_blank"><button class="btn btn-primary">Primary Action</button></a>
  <a href="https://google.com" class="no-styling no-underline" target="_blank"><button class="btn btn-secondary">Secondary</button></a>
    <a href="https://google.com" class="no-styling no-underline" target="_blank"><button class="btn btn-outline">Outlined</button></a>
      <a href="https://google.com" class="no-styling no-underline" target="_blank"><button class="btn btn-ghost">Subtle</button></a>
</div>

Lists

Unordered Lists

First item
Second item
- Nested item
- Another nested item
  - Deeply nested item
Third item

Ordered Lists

First step
Second step
1. Sub-step A
2. Sub-step B
  1. Sub-sub-step
Third step

Task Lists

Links and References

External Links

Here’s an external link.

Internal Links

You can create internal links using double brackets (wikilinks) or with standard markdown.

For example: Getting Started or Astro Suite Obsidian Vault Guide (Astro Modular).

For example: [[getting-started|Getting Started]] or [Astro Suite Vault (Modular) Guide](astro-suite-vault-modular-guide).

Here’s an internal link with an anchor: [[sample-folder-based-post/index#Benefits of Folder-Based Approach|Benefits of Folder-Based Approach]]

Here’s a relative link: Mermaid Diagram Test

Reference Links

This is a reference link and this is another reference link.

Linked Images

[![Mountains](/posts/attachments/mountains.png)](https://obsidian.md)

Mathematical Notation

This theme includes comprehensive LaTeX math support using KaTeX for fast, client-side rendering. All math works seamlessly in both light and dark themes.

Inline Math

Use single dollar signs for inline math: $E = mc^2$ or $\int_0^{2\pi} d\theta x+e^{-i\theta}$ .

Display Math

Use double dollar signs for centered display math:

\begin{vmatrix}a & b\\ c & d \end{vmatrix}=ad-bc

f(x) = x^2 + 3x + 2

Common Mathematical Notation

Fractions and Superscripts

Fractions: $\frac{a}{b}$ , $\frac{x^2 + 1}{x - 1}$
Superscripts: $x^2$ , $e^{i\pi} + 1 = 0$
Subscripts: $x_1$ , $H_2O$

Greek Letters

$\alpha, \beta, \gamma, \delta, \epsilon, \theta, \lambda, \mu, \pi, \sigma, \phi, \omega$
$\Gamma, \Delta, \Theta, \Lambda, \Pi, \Sigma, \Phi, \Omega$

Mathematical Symbols

Summation: $\sum_{i=1}^{n} x_i$
Product: $\prod_{i=1}^{n} x_i$
Integral: $\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$
Limit: $\lim_{x \to 0} \frac{\sin x}{x} = 1$

Matrices and Vectors

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

Complex Equations

\nabla \times \vec{E} = -\frac{\partial \vec{B}}{\partial t}

i\hbar\frac{\partial}{\partial t}\Psi(\vec{r},t) = \hat{H}\Psi(\vec{r},t)

Math in Callouts

Math works perfectly within callouts:

Mathematical Proof

The Pythagorean theorem states that for a right triangle: $a^2 + b^2 = c^2$

Where $c$ is the hypotenuse and $a$ and $b$ are the other two sides.

Integration by Parts

The formula for integration by parts is: $\int u \, dv = uv - \int v \, du$

This is particularly useful for integrals involving products of functions.

Advanced Mathematical Typesetting

Aligned Equations

\begin{align} f(x) &= ax^2 + bx + c \\ f'(x) &= 2ax + b \\ f''(x) &= 2a \end{align}

Cases and Piecewise Functions

f(x) = \begin{cases} x^2 & \text{if } x \geq 0 \\ -x^2 & \text{if } x < 0 \end{cases}

Set Notation

Natural numbers: $\mathbb{N} = \{1, 2, 3, \ldots\}$
Real numbers: $\mathbb{R}$
Complex numbers: $\mathbb{C}$
Set union: $A \cup B$
Set intersection: $A \cap B$
Subset: $A \subseteq B$

Math with Text

You can mix math with regular text seamlessly. For example, the quadratic formula is $x = \frac{1}{2}$ , which gives us the roots of any quadratic equation $ax^2 + bx + c = 0$ .

Obsidian Compatibility

All math notation works identically in Obsidian and your published blog:

Inline math: $...$ syntax
Display math: $$...$$ syntax
LaTeX commands: Full support for standard LaTeX math commands
Greek letters: Use \alpha, \beta, etc.
Symbols: Use \sum, \int, \infty, etc.

function greetUser(name) {
  console.log(`Hello, ${name}!`);
  return `Welcome to our blog, ${name}`;
}

const user = "Developer";
greetUser(user);

Python

def calculate_fibonacci(n):
    """Calculate the nth Fibonacci number."""
    if n <= 1:
        return n
    return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)

# Example usage
for i in range(10):
    print(f"F({i}) = {calculate_fibonacci(i)}")

CSS

.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: white;
  padding: 12px 24px;
  transition: transform 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

Bash/Shell

#!/bin/bash
echo "Setting up development environment..."

# Install dependencies
npm install

# Start development server
npm run dev

echo "Development server started on http://localhost:3000"

Tables

Basic Tables

Feature	Supported	Notes
Markdown	✅	Full CommonMark support
Wikilinks	✅	Obsidian-style double brackets
Callouts	✅	Multiple types with icons
Math	✅	LaTeX math with KaTeX rendering
Diagrams	✅	Mermaid diagram support

Advanced Tables

Language	Use Case	Performance	Learning Curve
JavaScript	Web Development	⭐⭐⭐⭐	Easy
Python	Data Science	⭐⭐⭐	Easy
Rust	Systems Programming	⭐⭐⭐⭐⭐	Hard
Go	Backend Services	⭐⭐⭐⭐	Medium