Formatting Reference

This note demonstrates all the markdown, extended markdown, and formatting features available in Coffer. Use it 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

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

Coffer supports Obsidian-style callouts. Each type has its own icon; cautionary types take the accent color.

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.

Callouts with Formatting

Example

You can use markdown syntax in callout content like italics, bolded text, or links.

Media Content

Images

Multiple Image Layouts

Coffer automatically arranges consecutive images in responsive grid layouts. Place images together without empty lines between them to create these layouts.

Two Images Side by Side

Glacier Tree in Japan

Three Images in a Row

Glacier Tree in Japan Desert

Four Images in a Row

Glacier Tree in Japan Desert Lava

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

[![Glacier](glacier.jpg)](https://obsidian.md)

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

Links and References

Internal Links

Link to another note by name, as in Obsidian.

For example: Obsidian Embeds Demo or small, steady changes.

[[Obsidian Embeds Demo]]
[[Kaizen|small, steady changes]]

Here’s an internal link to a heading:

Kaizen > Origins in Manufacturing

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
pnpm install

# Start development server
pnpm dev

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

Tables

Basic Tables

Feature	Supported	Notes
Markdown	Yes	Full CommonMark support
Callouts	Yes	Multiple types with icons
Math	Yes	LaTeX math with KaTeX rendering
Diagrams	Yes	Mermaid diagram support
Galleries	Yes	Auto grid layout for images

Advanced Tables

Language	Use Case	Performance	Learning Curve
JavaScript	Web Development	Great	Easy
Python	Data Science	Good	Easy
Rust	Systems Programming	Excellent	Hard
Go	Backend Services	Great	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.

Coffer turns footnotes into sidenotes, which sit in the margin on wide screens 1 This is a footnote. On desktop screens wider than 1280px, footnotes appear as sidenotes in the right margin.. You can add multiple footnotes throughout your content 2 A second footnote. They’re numbered automatically..

Text with a footnote [^1].

[^1]: Footnote content here.

GitHub Repository Cards

Dynamic cards that pull repository info from the GitHub API on page load.

davidvkimball/vaultcms

Use Obsidian as a content management system for your Astro website.

JavaScript389 stars22 forks

```embed
https://github.com/owner/repo
```

Buttons

<div class="btn-group">
  <button class="btn-primary">Primary</button>
  <button class="btn-secondary">Secondary</button>
  <button class="btn-outline">Outline</button>
  <button class="btn-ghost">Ghost</button>
</div>
<button class="btn-large">Large</button>