Markdown & Quarto Guide
This page contains all the shortcuts and examples you need for writing blogs and learning posts.
Text Formatting
Bold text: **Bold text**
Italic text: *Italic text*
Bold and Italic: ***Bold and Italic***
Strikethrough: ~~Strikethrough~~
Inline code: `Inline code`
Link text: [Link text](https://example.com)
Headings
# Heading 1
## Heading 2
### Heading 3
#### Heading 4Colored Text (HTML)
Green (Easy): <span style="color:#50c878">Green (Easy)</span>
Orange (Medium): <span style="color:#ffa500">Orange (Medium)</span>
Red (Hard): <span style="color:#ff0000">Red (Hard)</span>
Blue: <span style="color:#3498db">Blue</span>
Lists
Unordered List
- Item 1
- Item 2
- Nested item 2.1
- Nested item 2.2
- Item 3- Item 1
- Item 2
- Nested item 2.1
- Nested item 2.2
- Item 3
Ordered List
1. First item
2. Second item
3. Third item- First item
- Second item
- Third item
Code Blocks
Python
```python
def hello_world():
print("Hello, World!")
return True
if __name__ == "__main__":
hello_world()
```def hello_world():
print("Hello, World!")
return True
if __name__ == "__main__":
hello_world()C++
```cpp
#include <iostream>
#include <vector>
using namespace std;
int main() {
vector<int> nums = {1, 2, 3, 4, 5};
for(int num : nums) {
cout << num << " ";
}
return 0;
}
```#include <iostream>
#include <vector>
using namespace std;
int main() {
vector<int> nums = {1, 2, 3, 4, 5};
for(int num : nums) {
cout << num << " ";
}
return 0;
}JavaScript
```javascript
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("World");
```function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("World");SQL
```sql
SELECT id, name, email
FROM users
WHERE created_at >= '2025-01-01'
ORDER BY name ASC;
```SELECT id, name, email
FROM users
WHERE created_at >= '2025-01-01'
ORDER BY name ASC;Bash/Shell
```bash
#!/bin/bash
echo "Hello, World!"
ls -la
cd /path/to/directory
```#!/bin/bash
echo "Hello, World!"
ls -la
cd /path/to/directoryMath Equations
Inline Math
The equation $E = mc^2$ is famous.The equation \(E = mc^2\) is famous.
Display Math (Block)
$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$\[ \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \]
More Complex Equations
$$
\begin{aligned}
f(x) &= x^2 + 2x + 1 \\
&= (x + 1)^2
\end{aligned}
$$\[ \begin{aligned} f(x) &= x^2 + 2x + 1 \\ &= (x + 1)^2 \end{aligned} \]
Common Math Symbols
- Sum: $\sum_{i=1}^{n} x_i$
- Integral: $\int_{0}^{\infty} f(x) dx$
- Product: $\prod_{i=1}^{n} x_i$
- Greek letters: $\alpha, \beta, \gamma, \delta, \theta, \lambda, \mu, \sigma$
- Subscript: $x_1, x_2, x_n$
- Superscript: $x^2, x^n$
- Fraction: $\frac{a}{b}$
- Square root: $\sqrt{x}$
- N-th root: $\sqrt[n]{x}$- Sum: \(\sum_{i=1}^{n} x_i\)
- Integral: \(\int_{0}^{\infty} f(x) dx\)
- Product: \(\prod_{i=1}^{n} x_i\)
- Greek letters: \(\alpha, \beta, \gamma, \delta, \theta, \lambda, \mu, \sigma\)
- Subscript: \(x_1, x_2, x_n\)
- Superscript: \(x^2, x^n\)
- Fraction: \(\frac{a}{b}\)
- Square root: \(\sqrt{x}\)
- N-th root: \(\sqrt[n]{x}\)
Images
Basic Image
Image with Size (HTML)
<img src="path/to/image.png" alt="Description" width="400" height="300">Centered Image
<div style="text-align: center;">
<img src="path/to/image.png" alt="Description" width="500">
</div>Image with Caption (Quarto)
{width=500px fig-align="center"}Side-by-Side Images
::: {layout-ncol=2}


:::Tables
Basic Table
| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Row 1 | Data | More |
| Row 2 | Data | More || Column 1 | Column 2 | Column 3 |
|---|---|---|
| Row 1 | Data | More |
| Row 2 | Data | More |
Aligned Table
| Left Align | Center Align | Right Align |
|:-----------|:------------:|------------:|
| Left | Center | Right |
| Data | Data | Data || Left Align | Center Align | Right Align |
|---|---|---|
| Left | Center | Right |
| Data | Data | Data |
Callout Blocks (Quarto)
Note
::: {.callout-note}
This is a note callout.
:::This is a note callout.
Warning
::: {.callout-warning}
This is a warning callout.
:::This is a warning callout.
Important
::: {.callout-important}
This is an important callout.
:::This is an important callout.
Tip
::: {.callout-tip}
This is a tip callout.
:::This is a tip callout.
Caution
::: {.callout-caution}
This is a caution callout.
:::This is a caution callout.
Blockquotes
> This is a blockquote.
> It can span multiple lines.This is a blockquote. It can span multiple lines.
Horizontal Line
---Page Break (for PDF)
\pagebreakColumns Layout (Quarto)
::: {.columns}
::: {.column width="50%"}
Left column content
:::
::: {.column width="50%"}
Right column content
:::
:::Left column content
Right column content
Footnotes
Here is a sentence with a footnote[^1].
[^1]: This is the footnote content.Here is a sentence with a footnote1.
Task Lists
- [x] Completed task
- [ ] Incomplete task
- [ ] Another incomplete taskComplexity Section Template
### Complexity
- **Time Complexity:** O(n)
- **Space Complexity:** O(1)
- **Approach:** Description of the approach usedComplexity
- Time Complexity: O(n)
- Space Complexity: O(1)
- Approach: Description of the approach used
References
See [@reference2024] for more information.
Or cite inline like @author2024.
Add bibliography in YAML front matter:
---
bibliography: references.bib
---Front Matter Template
---
title: "Post Title"
description: |
Short description
author:
- name: Bhanu Prasanna Koppolu
url: https://bhanuprasanna527.github.io/
orcid: 0000-0001-6050-2414
affiliation: M.Sc. Data Science at TU Dortmund
date: 2025-01-01
date-modified: last-modified
categories: [Category1, Category2]
draft: false
page-layout: full
format:
html:
page-layout: full
theme: darkly
code-fold: true
code-summary: "Show the code"
css: ../../styles.css
toc: true
---Quick Copy Templates
Problem Solution Template
## Problem Name - <span style="color:#50c878">Easy</span>
### Notes
- Key insight 1
- Key insight 2
### Approach
Description of the solution approach.
### Program
```cpp
// Solution code hereComplexity
- Time Complexity: O(n)
- Space Complexity: O(1)
### Learning Note Template
```markdown
## Topic Name
### Key Concepts
- Concept 1
- Concept 2
### Code Example
```python
# Example code
Resources
- Resource 1
- Resource 2 ```
Tips
- Use
code-fold: truein front matter to make code blocks collapsible - Use
toc: trueto add a table of contents - Use
draft: trueto hide posts during development - Images should use relative paths from the
.qmdfile location - For nested posts, CSS path should be
../../styles.css - Use
\pagebreakfor PDF output page breaks - Math equations use LaTeX syntax
- Use callout blocks for important information
- Categories help organize and filter posts
- Use
date-modified: last-modifiedto auto-update modification date
Footnotes
This is the footnote content.↩︎