Content Syntax Guide
This guide documents all special markdown syntax supported by the sirin.dev site build pipeline. Standard Markdown and GitHub Flavored Markdown are also supported.
Sidenotes (Tufte-style margin notes) #
Use > [!sidenote] to create a note that floats into the right margin on wide screens (>= 1300px). On narrow screens, sidenotes collapse into inline callouts.
Important: Write the paragraph the sidenote belongs to immediately before the sidenote block. No blank lines between the paragraph and the sidenote. The system pairs them for desktop hover highlighting.
Ahamkara is the ego — the "I-maker" that constructs your sense of self.
%%CALLOUT_0%%
The next paragraph starts a new thought...
Sidenotes accept an optional title: > [!sidenote] Your Title Here. The title is rendered as a small uppercase label above the note content.
Interaction: On desktop, hovering over the paragraph highlights its connected sidenote, and vice versa.
Callouts #
For highlighted content boxes within the text flow:
%%CALLOUT_1%%
%%CALLOUT_2%%
%%CALLOUT_3%%
%%CALLOUT_4%%
%%CALLOUT_5%%
| Callout | Left Border Color | Purpose |
|---|---|---|
> [!note] |
Accent blue | General note |
> [!tip] |
Green | Tips and best practices |
> [!summary] |
Green | Summary or key takeaways |
> [!warning] |
Amber/yellow | Warnings and cautions |
> [!important] |
Red | Critical information |
Other callout types (e.g. > [!abstract], > [!Keyword]) are rendered as base callouts without a colored left border.
Callout titles are rendered as bold labels above the body content.
Full-Width Blocks #
Use > [!fullwidth] to make code blocks, data tables, or diagrams span across the full content area (including the right margin space). Useful for wide data or code that benefits from extra horizontal room.
%%CALLOUT_6%%
%%CALLOUT_7%%
On narrow screens (< 1300px), full-width blocks collapse to the normal content width.
Math (KaTeX) #
Inline: $E = mc^2$
Block:
$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$
Mermaid Diagrams #
Create diagrams using Mermaid syntax in fenced code blocks:
```mermaid
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[Do it]
B -->|No| D[Skip]
```
Wikilinks #
Link to other notes using Obsidian-style wikilinks:
[Note Title](/notes/note-title) - Link to another note
[Custom Display Text](/notes/note-title) - Link with custom text
[Note Title#Heading](/notes/note-title#heading) - Link to a specific heading
Wikilinks are resolved at build time. If a target note is not found, the link becomes plain text.
Frontmatter #
Every note file must include YAML frontmatter at the top:
---
title: Your Note Title
description: Brief summary for search results and social sharing
tags:
- programming
- python
date: "2025-01-15"
source: https://example.com # optional: link to original source
status: done # optional: done | draft | in-progress
type: book-chapter # optional: required for book chapters
book: Book Title # optional: required for book chapters
---
Book chapters need type: book-chapter and book: Book Title for chapter navigation (prev/next) and breadcrumbs to work correctly.
Headings #
Use ##, ###, and #### for section headings. Top-level # is reserved for the note title (set in frontmatter). Headings generate the table of contents sidebar and anchor links.