index

This post is a living reference for every feature my blog supports. Use it as a copy-paste starting point when writing new posts.

1. Headings & Text

H1 Heading

H2 Heading

H3 Heading

H4 Heading

You can write bold, italic, ~~strikethrough~~, inline code, and hyperlinks.

This is a blockquote. You can use it for notable quotes or references.

2. Callouts

Callouts are the most powerful way to highlight information. All variants are shown below.

Note

This is a note callout. Great for background context.

Tip

This is a tip callout. Use it for helpful shortcuts or suggestions.

Warning

This is a warning callout. Ideal for prereqs or prerequisites.

Danger

This is a danger callout. Use for breaking changes or serious warnings.

Important

This is an important callout. For must-know information.

Definition (Graph)

A graph is an ordered pair $G = (V, E)$ where $V$ is a set of vertices and $E$ is a set of edges connecting them.

Theorem (Pythagorean Theorem)

For a right-angled triangle: $a^2 + b^2 = c^2$

Proof

Given $a = 3$ , $b = 4$ : $3^2 + 4^2 = 9 + 16 = 25 = 5^2 = c^2$ . Therefore $c = 5$ . $\square$

Example (Practical Usage)

When modeling a social network, each user is a vertex and each friendship is an edge.

Summary

Callouts support many variants: note, tip, warning, danger, important, definition, theorem, proof, example, summary, recall, intuition, remark, fact, lemma, corollary, axiom, conjecture, notation, proposition, exercise, problem, answer, solution.
They can be nested.
They accept a title prop and a defaultOpen={false} prop to collapse by default.

Warning (Collapsible Example)

This callout is open by default. The one below is collapsed.

Notation (Math Symbols)

$\sum$ — Summation
$\forall$ — For all
$\exists$ — There exists
$\in$ — Element of
$\subseteq$ — Subset of or equal to

3. Sidenotes

Sidenotes appear as a numbered inline marker. On desktop, they float in the right margin.

This is a sentence with a sidenote 1

embedded inline.

You can have multiple 2

sidenotes in the same paragraph.

4. Code Blocks

Inline Code

Use backticks for inline code like const x = 42.

Fenced Code Block

1
def fibonacci(n: int) -> int:
2
    """Returns the nth Fibonacci number."""
3
    if n <= 1:
4
        return n
5
    return fibonacci(n - 1) + fibonacci(n - 2)
6

7
print(fibonacci(10))  # 55

1
// TypeScript example
2
interface BlogPost {
3
  title: string
4
  date: Date
5
  tags: string[]
6
  draft?: boolean
7
}
8

9
const post: BlogPost = {
10
  title: "My First Post",
11
  date: new Date(),
12
  tags: ["tech", "writing"],
13
}

# Terminal commands
npm run dev
git add .
git commit -m "feat: add new blog post"
git push origin main

5. Math (KaTeX)

Inline math uses single dollar signs: $E = mc^2$

Display math uses triple backtick with math or double dollar signs:

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

\frac{d}{dx}\left(\int_{a}^{x} f(t)\, dt\right) = f(x)

A more complex example:

\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}, \quad \nabla \times \mathbf{B} = \mu_0 \mathbf{J} + \mu_0 \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t}

6. Tables

Feature	Syntax	Notes
Bold	`text`	Also `__text__`
Italic	`text`	Also `_text_`
Code	`code`	For inline snippets
Link	`[label](url)`	Opens in new tab
Math	$formula$	Powered by KaTeX

7. X Embeds

Dynamic Embed (auto-fetched via react-tweet)

Use <TweetEmbed> with the tweet’s numeric ID from its URL:

8. Challenge Block

The <Challenge> component is great for CTF writeups or problem sets.

Maximum Matching

Author: Vatsal Sharma
Categories: Graph Theory Algorithms
Points: 350
Solves: 42
Files: graph.py README.md
Remote: nc challenge.vatsal.ca 1337
Flag: flag{m4x_w31ght_m4tch1ng}

Given a weighted bipartite graph $G = (U \cup V, E)$ , find the maximum weight matching $M \subseteq E$ such that no two edges in $M$ share a vertex. Return $w(M)$ .

9. Country Flags

Inline country flags using ISO 3166-1 alpha-2 codes:

Canada:
United States:
United Kingdom:
Japan:
India:

10. First Subpost Link

Use <FirstSubpost> to link readers to the first entry in a multi-part series:

First Subpost

Day 1: Getting Started

11. Emojis

Emoji shortcodes are supported via remark-emoji:

🚀 🔥 💯 ✨ 🎉 🧠 📈

12. Lists

Unordered

Item one
Item two
- Nested item
- Another nested item
Item three

Ordered

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

Task Lists

Completed task
Another done task
Pending task

13. HTML Elements

You can use raw HTML in MDX for things Markdown doesn’t support:

Underlined text
Highlighted text
Press Ctrl + C to copy
HTML is the standard markup language
^superscript and _subscript
Click to expand
This is hidden content in a native HTML details/summary block.

14. Images

Place images in your post’s assets/ folder and reference them in frontmatter or inline:

Quick Reference

Component	Import	Usage
`Callout`	`@/components/mdx/Callout.astro`	`<Callout variant="note">...</Callout>`
`Sidenote`	`@/components/mdx/Sidenote.astro`	`<Sidenote number="1">...</Sidenote>`
`TweetEmbed`	`@/components/mdx/TweetEmbed.astro`	`<TweetEmbed id="TWEET_ID" />`
`StaticTweet`	`@/components/mdx/StaticTweet.astro`	`<StaticTweet avatar="..." username="..." ...>`
`Challenge`	`@/components/mdx/Challenge.astro`	`<Challenge title="..." ...>...</Challenge>`
`CountryFlag`	`@/components/mdx/CountryFlag.astro`	`<CountryFlag country="ca" />`
`FirstSubpost`	`@/components/mdx/FirstSubpost.astro`	`<FirstSubpost title="..." href="..." />`
`Admonition`	`@/components/mdx/Admonition.astro`	`<Admonition variant="tip">...</Admonition>`

15. Admonitions (Obsidian-style)

Admonitions are styled callout blocks inspired by Obsidian. All 10 variants:

Note

A brief record of something written down to assist the memory or for future reference.

Tip

A small piece of useful advice about something practical.

Important

Having great value or influence; very necessary. Something that has great influence or authority.

Warning

Something that tells you to be careful or tells you about something, usually something bad, before it happens.

Caution

Great care, because of possible danger; to warn somebody not to do something.

Summary — TL;DR

For the conclusion and all the TLDRs. Great at the end of long posts.

Question

A sentence in an interrogative form, addressed to someone in order to get information in reply.

Comment — My Take

A criticism or interpretation, often by implication or suggestion; to write explanatory or critical notes upon a text.

Quote

To repeat a passage, phrase, etc., from a book, speech, or the like, as by way of authority, illustration, etc.

Docs

Manuals, listings, diagrams, and other hard- or soft-copy written and graphic materials that describe the use, operation, maintenance, or design of software or hardware.

Admonitions fully support code blocks inside them:

Tip — Python trick

You can sort a list of tuples by any key using a lambda:

1
data = [(1, 'z'), (3, 'b'), (2, 'a')]
2
sorted_data = sorted(data, key=lambda x: x[1])
3
print(sorted_data)  # [(2, 'a'), (3, 'b'), (1, 'z')]