Markdown Typography Guide | Shehzayn

This article demonstrates the full set of Markdown formatting options that the theme supports.

The first paragraph gives a quick preview of the list below, while the rest of this page dives into each structure.

Text formatting

This is a plain paragraph. This is bold text, this is italic, and this is bold italic. You can also use ~~strikethrough~~ to mark deprecated ideas.

Inline code is wrapped in backticks: const hello = 'world', which is ideal for variable names or commands inside sentences.

Quotes

Good design should stand up over time. The best interfaces remain useful and recognizable even as the world around them shifts.

You can also stack multiple paragraphs within a quote:

This is the first paragraph of the quote.

This is the second paragraph, demonstrating multi-paragraph quoting.

Add a source with <cite> at the end of the blockquote:

Good design should stand up over time.

— Dieter Rams

Pullquotes are supported via the .pullquote class:

“You hated those people so much, fought with them for so long, and ended up becoming what they were. Nothing in the world is worth sinking into that despair.” — One Hundred Years of Solitude

Callout

We recommend the directive syntax (note, tip, info, warning)…

:::note[Note]
This is supplementary context or aside copy that suits background notes.
:::

If you need more control, you can write HTML directly:

<div class="callout note">
  <p class="callout-title" data-icon="none">Note</p>
  <p>This is supplementary context or aside copy that suits background notes.</p>
</div>

Notes:

Icons are chosen automatically based on the type, so you do not need to add <span class="callout-icon">.
To hide the icon, use data-icon="none" on .callout-title.
Custom icons can be provided via data-icon="✨" if desired.

Callout test set

The following examples demonstrate various directive combinations without styling, useful for regression tests:

A quick tip

Here is some body text…

:::note
Only body text, no title.
:::

:::note[Title]
Note with a title.
:::

:::tip[List]
- Item one
- Item two
:::

:::info[Code]
```ts
const hello = 'world';
```
:::

:::warning[Warning]
> This is a quoted tip.
> It can also include [links](https://astro.build).
:::

:::foo[Invalid type]
This is an invalid type example.
:::

Invalid types should gracefully fall back to note (preserving the title and body).

Lists

Unordered list

First item
Second item
- Nested item A
- Nested item B
Third item

Ordered list

Preparation
Install dependencies
Run the project
1. Development mode
2. Production build

Task list

Finalize the design
Build the homepage
Write docs
Deploy

Code blocks

The code blocks below showcase the toolbar (language/line count/copy) and the default line numbers (enabled by default).

JavaScript

// A simple Astro component example
const greeting = 'Hello, World!';

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)); // 55

Python

def quick_sort(arr):
    """Quick sort implementation"""
    if len(arr) <= 1:
        return arr

    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]

    return quick_sort(left) + middle + quick_sort(right)

# Usage example
numbers = [3, 6, 8, 10, 1, 2, 1]
print(quick_sort(numbers))

CSS

.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

Shell

# Install dependencies and run the dev server
npm install
npm run dev

# Build for production
npm run build

Table

Feature	Status	Notes
Responsive layout	✅	Fully supports mobile
Dark mode	🚧	Work in progress
RSS feeds	✅	Multiple feeds available
Internationalization	❌	Planned for future

Links and images

This is an external link that opens in a new tab.

Figure / Caption

Example A: img + figcaption

Caption example image 1 — Caption example: description text.

Example B: figure without caption

Example C: picture element + caption (optional)

Caption example image 2 — Caption example: picture description.

Note: Under current styles, <img> and <picture> look the same. picture is useful when you need multiple fallbacks (phone vs desktop, WebP/AVIF preference). Use img if you only need a single version.

Gallery

Example: Two-image layout (optional captions)

First caption (optional)
Second caption (optional)

Dividers

Above is some content.

Below is other content.

Math and special characters

Common math symbols: π ≈ 3.14159, e ≈ 2.71828

English paragraph

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Mixed typography

This paragraph combines bold, italic, code, and links so you can see how different elements coexist.

That’s all the Markdown styles this theme supports. If you spot a rendering issue, feel free to open an issue!