Kompletny przewodnik po Markdown - Wszystkie elementy

Nov 24, 2025

Last updated on Nov 24, 2025

Ten post zawiera wszystkie możliwe elementy Markdown, które można wykorzystać w postach na blogu unfck.tech. Służy jako przewodnik i testowy szablon.

Nagłówki

Nagłówek H1

Nagłówek H2

Nagłówek H3

Nagłówek H4

Nagłówek H5

Nagłówek H6

Formatowanie tekstu

To jest normalny tekst. Możesz użyć pogrubienia (bold), kursywy (italic), lub pogrubionej kursywy.

Możesz też użyć alternatywnego pogrubienia i alternatywnej kursywy.

~~Przekreślony tekst~~ też jest dostępny.

Oto przykład inline code w środku zdania.

Listy

Lista nienumerowana

Pierwszy element
Drugi element
Trzeci element
- Zagnieżdżony element A
- Zagnieżdżony element B
  - Głęboko zagnieżdżony element
Czwarty element

Alternatywna składnia:

Element z gwiazdką

Element z plusem

Element z myślnikiem

Lista numerowana

Pierwszy krok
Drugi krok
Trzeci krok
1. Podkrok 3.1
2. Podkrok 3.2
Czwarty krok

Lista zadań (Task list)

Zadanie ukończone
Kolejne ukończone zadanie
Zadanie do wykonania
Inne zadanie do zrobienia

Linki

To jest link do unfck.tech

Link z tytułem

Referencyjny link

Link z tekstem referencyjnym

URL bezpośredni: https://unfck.tech

Obrazy

Cytaty (Blockquotes)

To jest prosty cytat. Może być wielolinijkowy.

Cytat z nagłówkiem

Cytaty mogą zawierać inne elementy Markdown.

Element listy w cytacie

Kolejny element

Zagnieżdżone cytaty:

To jest cytat w cytacie

I jeszcze głębiej zagnieżdżony cytat

Kod

Inline code

Użyj const variable = 'value' do deklaracji zmiennej w JavaScript.

Bloki kodu

Prosty blok kodu bez podświetlania:

To jest blok kodu
bez określonego języka

TypeScript z syntax highlighting:

interface User {
  id: number;
  name: string;
  email: string;
}

class UserService {
  private users: User[] = [];

  addUser(user: User): void {
    this.users.push(user);
    console.log(`User ${user.name} added successfully`);
  }

  getUserById(id: number): User | undefined {
    return this.users.find(user => user.id === id);
  }
}

const service = new UserService();
service.addUser({
  id: 1,
  name: 'Jan Kowalski',
  email: 'jan@unfck.tech'
});

JavaScript:

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = fibonacci(10);
console.log(`Fibonacci(10) = ${result}`);

Python:

def quick_sort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quick_sort(left) + middle + quick_sort(right)

numbers = [3, 6, 8, 10, 1, 2, 1]
print(quick_sort(numbers))

HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>unfck.tech</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>To jest przykładowy HTML</p>
</body>
</html>

CSS:

:root {
  --accent: #D4AF37;
  --black: 10, 10, 10;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(var(--black));
  color: var(--accent);
}

.button:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
}

Bash/Shell:

#!/bin/bash

# Instalacja zależności
npm install

# Build projektu
npm run build

# Deploy
npm run deploy

echo "Deployment completed successfully!"

SQL:

-- Tworzenie tabeli użytkowników
CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  username VARCHAR(50) UNIQUE NOT NULL,
  email VARCHAR(100) UNIQUE NOT NULL,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Dodanie przykładowych danych
INSERT INTO users (username, email) 
VALUES 
  ('jankowalski', 'jan@unfck.tech'),
  ('annanowak', 'anna@unfck.tech');

-- Zapytanie z JOIN
SELECT u.username, p.title, p.created_at
FROM users u
INNER JOIN posts p ON u.id = p.user_id
WHERE p.published = true
ORDER BY p.created_at DESC;

JSON:

{
  "name": "unfck.tech",
  "version": "1.0.0",
  "description": "Blog o technologii",
  "author": "unfck.tech team",
  "dependencies": {
    "astro": "^5.16.0",
    "@astrojs/mdx": "^4.8.0"
  },
  "scripts": {
    "dev": "astro dev",
    "build": "astro build",
    "preview": "astro preview"
  }
}

Tabele

Podstawowa tabela

Kolumna 1	Kolumna 2	Kolumna 3
Wartość 1	Wartość 2	Wartość 3
Wartość 4	Wartość 5	Wartość 6
Wartość 7	Wartość 8	Wartość 9

Tabela z wyrównaniem

Wyrównanie do lewej	Wyśrodkowane	Wyrównanie do prawej
Tekst po lewej	Wyśrodkowany	Tekst po prawej
Lewa	Środek	Prawa
Left	Center	Right

Tabela z kodem i linkami

Technologia	Opis	Link
`TypeScript`	Typowany JavaScript	Docs
`React`	Biblioteka UI	Docs
`Astro`	Framework web	Docs
`Node.js`	Runtime JavaScript	Docs

Kompleksowa tabela

Feature	Status	Priority	Notes
Dark Theme	✅ Completed	High	Czarno-szaro-złoty
Social Icons	✅ Completed	High	LinkedIn, GitHub, WWW
Blog Posts	🚧 In Progress	Medium	Markdown support
Comments	❌ Not Started	Low	Planowane na Q2

Linie poziome

Można utworzyć linię poziomą na trzy sposoby:

Trzy myślniki:

Trzy gwiazdki:

Trzy podkreślenia:

Kombinacje elementów

Lista z kodem i linkami

Instalacja Astro
```
npm create astro@latest
```
Więcej informacji: Astro Docs

Konfiguracja TypeScript

export default defineConfig({
  output: 'static',
  site: 'https://unfck.tech'
});

Deploy aplikacji
- Zbuduj projekt: npm run build
- Sprawdź folder dist/
- Deploy na hosting

Cytat z kodem

💡 Pro tip: Zawsze używaj TypeScript w projektach produkcyjnych

// Bad
let data: any = fetchData();

// Good
interface ApiResponse {
  data: string[];
  status: number;
}
let data: ApiResponse = fetchData();

Tabela w cytacie

Command Description
npm install Instaluje zależności
npm run dev Uruchamia dev server
npm run build Buduje projekt

Command	Description
`npm install`	Instaluje zależności
`npm run dev`	Uruchamia dev server
`npm run build`	Buduje projekt

Znaki specjalne i escapowanie

Możesz użyć backslash do escapowania znaków specjalnych:

* Gwiazdki bez formatowania *

# Kratka bez tworzenia nagłówka

[Link] który nie jest linkiem

`Kod` który nie jest kodem

Emotikony i symbole

Możesz używać emoji: 🚀 💻 🎨 ⚡ 🔥 ✨ 💡 📱 🌐 ⭐

Symbole matematyczne: α β γ δ ε ∑ ∫ √ ∞ ≈ ≠ ≤ ≥

Strzałki: ← → ↑ ↓ ↔ ⇐ ⇒ ⇑ ⇓ ⇔

Definicje (jeśli wspierane)

Termin 1 : Definicja terminu 1

Termin 2 : Pierwsza definicja terminu 2 : Druga definicja terminu 2

Przypisy (jeśli wspierane)

To jest tekst z przypisem¹.

Możesz też użyć nazwanych przypisów².

Podsumowanie

Ten post demonstrował wszystkie główne elementy Markdown:

✅ Nagłówki (H1-H6)
✅ Formatowanie tekstu (bold, italic, strikethrough)
✅ Listy (numerowane, nienumerowane, zagnieżdżone, zadań)
✅ Linki (inline, referencyjne)
✅ Obrazy
✅ Cytaty (proste i zagnieżdżone)
✅ Kod (inline i bloki z highlighting)
✅ Tabele (z wyrównaniem i formatowaniem)
✅ Linie poziome
✅ Kombinacje elementów
✅ Znaki specjalne
✅ Emotikony i symbole

Każdy z tych elementów został przetestowany i powinien wyglądać świetnie w ciemnym theme unfck.tech! 🎨✨

To jest treść pierwszego przypisu. ↩
To jest nazwany przypis z kodem i formatowaniem. ↩