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%%

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. Titles and bodies both support standard Markdown (bold, italic, links, inline code, etc.).

Colored & Bold Text #

You can highlight chunks of text with color, with or without bold:

**red::bold colored text**      <!-- bold + red -->
{{green|colored text}}          <!-- colored, not bold -->

Available color names: red, orange, yellow, green, blue, purple, pink, accent, muted, heading.

This works in normal paragraphs, callout bodies, and callout titles.

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}
$$

Diagrams & Charts #

Mermaid diagrams #

Use Mermaid syntax for flowcharts, sequence diagrams, and other graph types:

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do it]
    B -->|No| D[Skip]
```

Charts (xychart-beta) #

For simple line or bar charts, use xychart-beta blocks. They are rendered with Chart.js, so they include a legend, axis labels, colors, and tooltips.

```mermaid
xychart-beta
  title "Stimulation vs Focus"
  x-axis "Stimulation Level"
  y-axis "Focus"
  line "ADHD" [0, 3, 5, 8, 9, 5, 2]
  line "Neurotypical" [0, 5, 8, 9, 9, 8, 5]
```

Supported directives:

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.

YouTube Notes #

YouTube summary notes follow these conventions in addition to the standard note structure:

TL;DR #

Every YouTube note opens with a > [!summary] callout after the source attribution and separator. Keep it to 2-3 bullet points capturing the core thesis — not a full summary, just enough for returning readers to recall the note's essence without re-reading.

*จาก lecture ของ Dr. K (HealthyGamerGG)*

---

%%CALLOUT_8%%

Mermaid Diagrams #

Use Mermaid diagrams for processes, cycles, or layered frameworks that are hard to follow in prose. Don't force diagrams onto notes that lack a clear visual structure.

Good candidates:

• Cyclic patterns (e.g., Anxious-Avoidant relationship cycle)
• Numbered step sequences (e.g., 4-step rewiring process)
• Layered/hierarchical models (e.g., RULER framework)

Place diagrams inline near the relevant section. Use graph TD for top-down flowcharts and graph LR for left-to-right. Use emojis as node markers sparingly.

Actionable Section #

Group action items under thematic subheadings (2-4 groups max) instead of a flat list. Use ###-level headings within the ## Actionable section:

## Actionable

### Self-observation
- [ ] ...

### Practice
- [ ] ...

### Environment
- [ ] ...

Themes vary per note — use whatever grouping naturally emerges from the content. Common themes: Self-observation, Active practice, Mindset shift, Daily habit, Discussion.