Alguns recursos personalitzats

Prova del Visualitzador Markdown Web 🌐

Benvingut al visualitzador de Markdown basat en web. Aquest document mostra totes les funcionalitats.

Funcionalitats principals ⚡

Aquest visualitzador suporta:

1. Conversió automàtica de Markdown a HTML 2. Còpia amb format al portapapers 3. Drag & Drop de fitxers 4. Estils inline per compatibilitat amb LibreOffice

---

Text formatat 📝

Pots usar negreta, cursiva, ~~ratllat~~ i codi inline.

També pots combinar-los: negreta i cursiva o _negreta amb cursiva_.

Codi de programació 💻

Python

``python def fibonacci(n):

   """Calcula la seqüència de Fibonacci"""
   if n <= 1:
       return n
   return fibonacci(n-1) + fibonacci(n-2)

Exemple

for i in range(10):

   print(f"F({i}) = {fibonacci(i)}")

`

JavaScript

`javascript const factorial = (n) => {

   return n <= 1 ? 1 : n * factorial(n - 1);

};

console.log(factorial(5)); // 120 `

HTML/CSS

`html

Hola món!

Aquest és un exemple d'HTML.

`

---

Taules 📊

Comparativa de tecnologies

| Tecnologia | Dificultat | Popularitat | Ús recomanat | |------------|------------|-------------|--------------| | Python | Baixa | ⭐⭐⭐⭐⭐ | Data Science, Backend | | JavaScript | Mitjana | ⭐⭐⭐⭐⭐ | Frontend, Full-stack | | Rust | Alta | ⭐⭐⭐ | Sistemes, Performance | | Go | Baixa | ⭐⭐⭐⭐ | Backend, Microserveis |

Taula de símbols

| Símbol | Nom | Codi HTML | Ús | |--------|-----|-----------|-----| | α | Alfa | α | Matemàtiques | | β | Beta | β | Estadística | | π | Pi | π | Geometria | | Σ | Suma | Σ | Sumatori |

---

Llistes 📋

Llista ordenada

1. Primer pas: Obrir el fitxer Markdown 2. Segon pas: Visualitzar el contingut 3. Tercer pas: Copiar amb format 4. Quart pas: Enganxar a LibreOffice

Llista desordenada

• Components electrònics:

 - Raspberry Pi 4
 - ESP32-S3
 - Arduino Nano

• Protocols de comunicació:

 - CAN Bus
 - I2C
 - MQTT

• Llenguatges de programació:

 - Python 🐍
 - C/C++ ⚙️
 - JavaScript 🌐

Llista de tasques

• [x] Implementar visualitzador
• [x] Afegir suport de taules
• [x] Implementar còpia amb format
• [ ] Afegir exportació a PDF
• [ ] Implementar mode fosc

---

Cites i referències 💬

"La millor manera d'aprendre és ensenyant."

> — Proverbis educatius

Nota important: Els estils inline garanteixen que el format es mantingui quan copies el contingut a processadors de text com LibreOffice o Microsoft Word.

Cita niuada

Aquest és el primer nivell de cita.

> > Això és una cita dins d'una altra cita.

>

> > I això és un tercer nivell!

---

Enllaços i imatges 🔗

Enllaços

• Documentació de Markdown
• Marked.js Library
• GitHub

Enllaços amb títol

• "Intel·ligència Artificial" Anthropic Claude
• "Documentació web" MDN Web Docs

---

Separadors horitzontals

Pots usar diferents estils per crear línies:

---

*

___

---

Text especial 🎯

Subíndexs i superíndexs

• Fórmula química: H₂O (subíndex)
• Potència: 2⁵ = 32 (superíndex)
• Equació: E = mc² (relativitat)

Caràcters especials

• Matemàtiques: ∑, ∫, ∂, ∞, ≈, ≠, ≤, ≥
• Greeks: α, β, γ, δ, ε, θ, λ, μ, π, σ, τ, φ, ψ, ω
• Fletxes: ← → ↑ ↓ ↔ ⇒ ⇐ ⇔
• Símbols: ✓ ✗ ★ ☆ ♠ ♣ ♥ ♦ © ® ™

---

Blocs de codi inline

Quan vols destacar codi dins d'una frase, usa codi inline com aquest:

• La funció print() en Python mostra text
• L'element
  en HTML és un contenidor
• La propietat display: flex en CSS crea layouts flexibles

---

Exemples d'ús en educació 🎓

Pràctica 1: Variables en Python

`python

Declaració de variables

nom = "Jordi" edat = 35 altura = 1.75 es_professor = True

print(f"{nom} té {edat} anys i mesura {altura}m") `

Pràctica 2: Sessions en PHP

`php <?php session_start();

// Guardar dades a la sessió $_SESSION['usuari'] = 'alumne01'; $_SESSION['rol'] = 'estudiant';

// Llegir dades de la sessió echo "Benvingut, " . $_SESSION['usuari']; ?> `

Pràctica 3: Formulari HTML

`html <form method="POST" action="processa.php">

   <label for="nom">Nom:</label>
   <input type="text" id="nom" name="nom" required>
   
   <label for="email">Email:</label>
   <input type="email" id="email" name="email" required>
   
   <button type="submit">Enviar</button>

</form> ``

---

Taula complexa amb format 📈

| Component | Tensió | Corrent | Potència | Preu | Disponibilitat | |-----------|--------|---------|----------|------|----------------| | ESP32-S3 | 3.3V | 500mA | 1.65W | 8€ | ✅ En stock | | Raspberry Pi 4 | 5V | 3A | 15W | 55€ | ⚠️ Limitada | | Arduino Nano | 5V | 40mA | 0.2W | 4€ | ✅ En stock | | Sensor DHT22 | 3.3-5V | 1.5mA | 0.0075W | 3€ | ✅ En stock |

---

Blockquote amb format

### ⚠️ Advertiment Important

> Quan copies el contingut amb el botó "Copiar Formatat", tots aquests estils es mantenen:

> - Colors de text

- Mides de font

- Vores i taules

- Estils de codi

> Això garanteix que el document es vegi professional a LibreOffice Writer! ✨

---

Conclusió 🎉

Aquest visualitzador de Markdown ofereix:

1. ✅ Visualització professional amb estils moderns 2. ✅ Còpia amb format compatible amb processadors de text 3. ✅ Interfície intuïtiva amb drag & drop 4. ✅ 100% client-side sense necessitat de servidor

Prova-ho ara! Obre aquest fitxer, clica "Copiar Formatat" i enganxa'l a LibreOffice per veure com manté tots els estils. 🚀

---

Document generat per a proves del visualitzador Markdown - © 2024