Alguns recursos personalitzats

De binefa.com
Salta a la navegació Salta a la cerca

Visualitzador Markdown Web

Aplicació web pura (HTML + CSS + JavaScript) per visualitzar fitxers Markdown amb capacitat de copiar el contingut formatat a processadors de text.

🌐 Característiques

  • ✅ 100% client-side - No necessita servidor
  • ✅ Zero dependències locals - Usa CDN per Marked.js
  • ✅ Drag & Drop - Arrossega fitxers directament
  • ✅ Copiar formatat - Compatible amb LibreOffice i Word
  • ✅ Responsive - Funciona en mòbil i escriptori
  • ✅ Estils inline - Els estils es mantenen en copiar

🚀 Ús

Opció 1: Obrir directament

Simplement obre index.html amb qualsevol navegador modern:

``bash

Des de la terminal

firefox index.html

o

google-chrome index.html

o

open index.html # macOS `

Opció 2: Servidor local

Si vols servir-ho localment:

`bash

Python 3

python -m http.server 8000

Node.js (si tens http-server instal·lat)

npx http-server

PHP

php -S localhost:8000 `

Després obre: http://localhost:8000

Opció 3: Publicar online

Puja index.html a qualsevol hosting estàtic:

  • GitHub Pages
  • Netlify
  • Vercel
  • GitLab Pages

📋 Com funciona

1. Obrir fitxer

  • Mètode 1: Clica "📂 Obrir Markdown"
  • Mètode 2: Arrossega un fitxer .md a la finestra

2. Visualitzar

El contingut es converteix automàticament de Markdown a HTML amb estils professionals.

3. Copiar

  • Botó "📋 Copiar Formatat": Copia tot amb format
  • Selecció manual: Selecciona amb el ratolí i Ctrl+C
  • A LibreOffice: Enganxa amb Ctrl+V

4. Recarregar

Si modifiques el fitxer extern, clica "🔄 Recarregar" per veure els canvis.

🛠️ Tecnologies

Marked.js

Llibreria JavaScript per convertir Markdown a HTML:

Clipboard API

API moderna del navegador per copiar al portapapers: `javascript await navigator.clipboard.write([clipboardItem]); `

Amb fallback per navegadors antics: `javascript document.execCommand('copy'); `

🎨 Format suportat

El visualitzador renderitza:

  • Capçaleres (h1-h6) amb vores de color
  • Negreta i cursiva
  • Codi inline amb fons gris i text vermell
  • Blocs de codi amb vora blava
  • Taules amb capçalera blava i files zebrades
  • Llistes ordenades i desordenades
  • Cites (blockquotes) amb vora blava
  • Enllaços en blau
  • Imatges (responsive)

💡 Avantatges vs versions desktop

Pros:

  • ✅ No requereix instal·lació
  • ✅ Funciona en qualsevol sistema operatiu
  • ✅ Es pot compartir via URL
  • ✅ Més lleuger (un sol fitxer HTML)
  • ✅ Fàcil d'actualitzar

Cons:

  • ❌ Requereix navegador modern
  • ❌ Limitat per la sandbox del navegador
  • ❌ Clipboard API pot no funcionar en alguns navegadors

🌍 Compatibilitat de navegadors

Funcionalitat completa:

  • Chrome/Edge 76+
  • Firefox 87+
  • Safari 13.1+

Funcionalitat limitada (sense Clipboard API moderna):

  • IE11 (amb fallback)
  • Navegadors antics (selecció manual funciona)

🔒 Seguretat

  • Tot el processament és client-side
  • No s'envien dades a cap servidor
  • Marked.js sanititza HTML per defecte
  • No executa scripts dels fitxers Markdown

📱 Ús en mòbil

L'aplicació funciona en mòbils però amb limitacions:

  • ✅ Visualització funciona perfectament
  • ⚠️ Copiar formatat pot ser limitat
  • ⚠️ Alguns navegadors mòbils no suporten Clipboard API

🎯 Casos d'ús

Per a estudiants:

  • Visualitzar apunts en Markdown
  • Copiar contingut per treballs
  • Compartir l'eina via USB

Per a professors:

  • Crear materials educatius
  • Distribuir via intranet escolar
  • Funciona sense connexió

Per a desenvolupadors:

  • Previsualitzar README.md
  • Convertir documentació a format editable
  • Integrar en altres projectes web

🔧 Personalització

Canviar colors

Edita les variables CSS a la secció <style>:

`css / Colors principals /

  1. 3498db → El teu color primari
  2. 2c3e50 → Color del text
  3. f4f4f4 → Fons del codi

`

Afegir extensions Marked

`javascript marked.setOptions({ 

   breaks: true,
   gfm: true,
   // Afegeix més opcions aquí

}); `

Canviar estils inline

Modifica l'objecte styles dins la funció applyInlineStyles().

📦 Versió offline

Per fer-la completament offline:

1. Descarrega Marked.js: `bash wget https://cdn.jsdelivr.net/npm/marked/marked.min.js `

2. Canvia la línia al HTML: `html <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<script src="marked.min.js"></script> ``

Ara funciona sense connexió! ✈️

🐛 Solució de problemes

El botó copiar no funciona

  • Obre amb HTTPS o localhost (requeriment de Clipboard API)
  • Usa la selecció manual + Ctrl+C com alternativa

Els estils no es mantenen a LibreOffice

  • Assegura't d'usar Ctrl+V (no Ctrl+Shift+V)
  • Prova "Enganxa especial" → HTML

No es pot obrir el fitxer

  • Verifica que l'extensió sigui .md o .markdown
  • Comprova que el fitxer tingui contingut

📊 Comparativa de versions

| Característica | Web | PyQt6 | PySide6+QML | |----------------|-----|-------|-------------| | Instal·lació | ❌ No | ✅ Sí | ✅ Sí | | Multiplataforma | ✅ | ✅ | ✅ | | Pes | 1 fitxer | ~50MB | ~50MB | | Offline | ✅* | ✅ | ✅ | | Distribució | URL | Executable | Executable |

  • Amb Marked.js descarregat

🎓 Aprenentatge

Aquest projecte és ideal per aprendre:

  • FileReader API
  • Clipboard API moderna
  • Drag & Drop API
  • DOM manipulation
  • Conversió Markdown → HTML
  • Estils inline vs CSS extern

📄 Llicència

Codi lliure per a ús educatiu i personal.

Obtingut de «https://www.binefa.com/index.php?title=Alguns_recursos_personalitzats&oldid=11347»