Markdown Reference Guide

This post is designed to act as a “cheat sheet” to showcase and test all the text formatting capabilities available in our digital garden using Quartz and Obsidian Flavored Markdown.

---

1. Basic Text Formatting

You can write normal text and format it using bold, italic, or bold and italic.
For deprecated terms, you can use strikethrough.
To emphasize important parts, try the highlight effect.

---

2. Headers

We use hierarchical headers to structure main text sections. Here they are for sizing tests:

H1 Header (Main - Usually only 1 per page)

H2 Header

H3 Header

H4 Header

H5 Header

H6 Header

---

3. Lists

Unordered List:

• Apple
• Pear
  • Bosc Pear
  • Asian Pear
• Banana

Ordered List:

1. First step details
2. Second step details
   1. Substep A
   2. Substep B
3. Third step details

Task List:

• Completed massive task
• Pending design task
• Tasks waiting for review

---

4. Links & Images

External Link: To provide a classic link, you can Click Here to go to Google.

Embed Image: From a source like Unsplash or the file system:

---

5. Obsidian Callouts

One of the most powerful features to give your blog a “premium” feel is Obsidian-style info boxes (Callouts).

Note / Info Box

This is a standard info note. Used to provide extra details to the text.

Pro-Tip

Looks very elegant when giving the reader useful best-practice advice or tips.

Warning

An important condition that needs attention.

Danger / Critical

Reserved for deadly, strictly unavoidable patterns or critical system errors.

Scenario

Use this when explaining a use case or an interview question example.

Collapsible Special Area (Click to expand)

If you add a minus - sign at the end of the callout label, it comes closed by default. Perfect for hiding long log records or answers. A plus + leaves it open but collapsible.

---

6. Code & Software (Code Snippets)

For a quick inline code insertion, you can use const a = 1; or an npm install software command.

Long code blocks support syntax highlighting:

// quartz.config.ts example
import { QuartzConfig } from "./quartz/cfg"
 
function sayHello(name: string): void {
  if (name) {
    console.log(`Hello, ${name}! Welcome to the digital garden.`)
  }
}
 
sayHello("Mert")

# Terminal commands
npm run dev
npx quartz build --serve

---

7. Tables

Tables are indispensable for making configuration values or architectural comparisons.

Architecture Feature	Status (Left)	Details (Right aligned)
Azure Functions	Centered ✅	Serverless
AKS (Kubernetes)	Centered ⏳	Container Management
Cosmos DB	Centered ❌	NoSQL Database

---

8. Math and Formulas (KaTeX / LaTeX)

If you meant to show algorithm theories or engineering calculations, LaTeX is fully supported.

Inline math: $E=m{c}^2$ or $O(n\log n)$ complexity.

Block math:

$$\frac{-b\pm \sqrt{b^2-4ac}}{2a}$$ $${\int }_0^{\infty }{e}^{-x^2}dx=\frac{\sqrt{\pi }}{2}$$

---

9. Mermaid Diagrams (Mermaid Charts)

You can write and draw fantastic system architectures and flowcharts entirely in text.

graph TD
    A[Client Request] -->|REST API| B(API Gateway)
    B --> C{Load Balancer}
    C -->|Route 1| D[Service A]
    C -->|Route 2| E[Service B]
    D -.->|Async Message| F[(Database)]
    E -.->|Async Message| F

pie title Weekend Exercise Distribution
    "Running" : 45
    "Cycling" : 35
    "Swimming" : 10
    "Strength Training" : 10

---

10. Footnotes

When explaining a complex term inside the text without breaking the reader’s flow, you can provide great info points¹. Then you can explain this footnote at the end of the sentence or at the very bottom of the page.

Footnotes

1. This is a footnote explanation. Very detailed technical info can be placed here without messing up the main layout. ↩