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.

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.

Images

Landscape

Multiple Image Layouts

Our 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

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.

Videos

Here’s an example of a responsive embedded video:

<div style="width: 100%; min-width: 400px; max-width: 800px;">
<div style="position: relative; width: 100%; overflow: hidden; padding-top: 56.25%;">
<p><iframe style="position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; border: none;" src="https://www.youtube.com/embed/ZhizarvwLnU" title="YouTube video player" width="560" height="315" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe></p>
</div>
</div>

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

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	❌	Not implemented yet
Diagrams	🔄	Planned for future release

Advanced Tables

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