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

Custom Titles

Collapsible Callouts

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

Extended Callout Types

Callouts with Formatting

Media Content

Images

Single Image With Caption

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

Three Images in a Row

Four Images in a Row

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.

Linked Images

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

Lists

Unordered Lists

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

Ordered Lists

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

Task Lists

• Completed task
• Incomplete task
• Another completed task
  • Nested incomplete task
  • Nested completed task
• Final incomplete task

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 [Obsidian Embeds Demo](obsidian-embeds-demo).

Here’s an internal link with an anchor: Benefits of Folder-Based Approach

Here’s the same internal link with an anchor formatted in 4 different ways (both Obsidian and standard Astro syntax work):

Choose Your Workflow
Choose Your Workflow
Choose Your Workflow
Choose Your Workflow

Here’s a relative link: Obsidian Embeds Demo

Reference Links

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

Code Blocks

Inline Code

Use const variable = 'value' for inline code snippets.

JavaScript

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

Blockquotes

Simple Quotes

The best way to predict the future is to invent it.
— Alan Kay

Nested Quotes

This is a top-level quote.

This is a nested quote within the first quote.

And this is a quote nested even deeper.

Back to the top level.

Horizontal Rules

You can create horizontal rules using three dashes:

---

Or three asterisks:

---

Or three underscores:

---

HTML Elements

You can use HTML directly. Here are some examples:

Click to expand

This content is hidden by default and can be expanded by clicking the summary.

Small text for fine print

^Superscript

_Subscript

Keyboard Shortcuts

Press Ctrl + C to copy and Ctrl + V to paste.

Use Cmd + K to open the command palette.

Special Characters and Symbols

• Copyright: ©
• Trademark: ™
• Registered: ®
• Arrows: ← ↑ → ↓ ↔ ↕
• Symbols: ★ ☆ ♠ ♣ ♥ ♦
• Currency: $ € £ ¥

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>

Works with Obsidian

All of these formatting options should also appear in Obsidian, with some differences depending on the theme you use.

Quick Reference

• Bold: **text** or __text__
• Italic: *text* or _text_
• Code: `code`
• Highlight: ==text==
• Links: [text](url) or [[wikilink]]
• Images: ![alt](url)
• Lists: - or 1. for ordered
• Tasks: - [ ] and - [x]
• Tables: Use | to separate columns
• Quotes: Start lines with >
• Callouts: > [!TYPE]
• Horizontal rule: ---

Further reading: Obsidian Embeds Demo