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 INLINECODE0.

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

Codi de programació 💻

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

const factorial = (n) => {
    return n <= 1 ? 1 : n * factorial(n - 1);
};

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

HTML/CSS

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

INLINECODE1

Matemàtiques

β

Beta

INLINECODE2

Estadística

π

Pi

INLINECODE3

Geometria

Σ

Suma

INLINECODE4

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 INLINECODE5 com aquest:

• La funció INLINECODE6 en Python mostra text
• L'element INLINECODE7 en HTML és un contenidor
• La propietat INLINECODE8 en CSS crea layouts flexibles

---

Exemples d'ús en educació 🎓

Pràctica 1: Variables en 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
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

<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