In questa pagina
Esempio completo di documento Markdown
Benvenuto in Raziel.MD! 🚀
Questo documento mostra le principali funzionalità di rendering disponibili nell'app.
Funzionalità principali
- ✅ Rendering Markdown: Markdown con supporto GFM
- 📊 Diagrammi Mermaid: diagrammi di flusso, sequenze e altri diagrammi
- 🎨 Evidenziazione della sintassi: codice in più linguaggi
- 🌙 Temi: modalità chiara e scura
- 💾 Uso offline: documenti memorizzati localmente
Esempi di formattazione
Liste
Lista non ordinata
- Elemento 1
- Elemento 2
- Sottoelemento 2.1
- Sottoelemento 2.2
- Elemento 3
Lista ordinata
- Primo elemento
- Secondo elemento
- Terzo elemento
Codice
Codice inline: const hello = "world"
Blocco di codice JavaScript:
function fibonacci(n) {
if (n <= 1) return n
return fibonacci(n - 1) + fibonacci(n - 2)
}
console.log(fibonacci(10)) // 55
Blocco di codice Python:
def quicksort(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 quicksort(left) + middle + quicksort(right)
print(quicksort([3, 6, 8, 10, 1, 2, 1]))
Tabelle
| Funzionalità | Supporto | Descrizione |
|---|---|---|
| Markdown | ✅ | Rendering con GFM |
| Mermaid | ✅ | Diagrammi e flowchart |
| Offline | ✅ | IndexedDB e Service Worker |
| Ricerca | ✅ | Ricerca in nomi e contenuti |
Citazioni
La semplicità è la massima sofisticazione.
- Leonardo da Vinci
Link
Diagrammi Mermaid
Diagramma di flusso
graph TD
A[Carica file] --> B{È un file .md?}
B -->|Sì| C[Elabora contenuto]
B -->|No| D[Ignora]
C --> E[Salva in IndexedDB]
E --> F[Renderizza nell'interfaccia]
F --> G[Visualizza Markdown]
Diagramma di sequenza
sequenceDiagram
participant U as Utente
participant A as App
participant DB as IndexedDB
U->>A: Carica file
A->>A: Valida formato
A->>DB: Salva file
DB-->>A: Conferma
A-->>U: Mostra successo
U->>A: Seleziona file
A->>DB: Recupera contenuto
DB-->>A: Restituisce contenuto
A->>A: Renderizza Markdown
A-->>U: Mostra documento
Diagramma delle classi
classDiagram
class MarkdownFile {
+number id
+string path
+string name
+string content
+Date createdAt
+Date updatedAt
}
class IndexedDB {
+saveFile()
+getAllFiles()
+getFileByPath()
+searchFiles()
+deleteFile()
}
class MarkdownViewer {
+renderMarkdown()
+renderMermaid()
+exportFile()
}
IndexedDB --> MarkdownFile
MarkdownViewer --> MarkdownFile
Grafico a torta
pie title Distribuzione delle funzionalità
"Caricamento file" : 20
"Navigazione" : 25
"Rendering" : 30
"Ricerca" : 15
"Supporto offline" : 10
Navigazione tramite link
Wiki-link
I wiki-link creano connessioni tra documenti. Seleziona un esempio qualsiasi:
Link semplice a questo documento
[[./example]]
Link con testo di visualizzazione personalizzato
[[./example|Torna a questo esempio]]
Link a una sezione in un altro documento
[[mermaid-examples.md#sequenza-temporale|Vai alla Sequenza temporale]]
Link a una sezione in questo documento
[[#codice|Vai alla sezione Codice]]
Wiki-link dentro un blocco di codice
Il contenuto dentro il blocco non deve diventare un link:
[[questo/link/non/deve/diventare/html]]
Link Markdown interni
I link interni si aprono nella stessa scheda. Usa Ctrl+Click o il tasto centrale del mouse per aprire una nuova scheda.
Suggerimento: fai clic destro su un link per vedere azioni come aprire, aprire in una nuova scheda e copiare il link.
Link esterni
I link esterni mostrano una conferma prima di aprirsi:
Funzionalità avanzate
Liste di attività
- Importare file
- Creare la navigazione ad albero
- Renderizzare Markdown
- Renderizzare Mermaid
- Aggiungere la ricerca
- Creare le mie note
- Organizzare una libreria personale
Formattazione del testo
Grassetto, corsivo, barrato e codice inline.
Grassetto e corsivo combinati
Linea orizzontale
Esempi di sanificazione
Raziel.MD sanifica l'HTML potenzialmente pericoloso. Gli esempi seguenti dovrebbero essere mostrati senza eseguire script.
<script>alert("XSS")</script>
<img src="x" onerror="alert('XSS tramite un attributo')">
<div onclick="alert('XSS tramite un evento')">Seleziona qui</div>
<iframe src="javascript:alert('XSS tramite un iframe')"></iframe>
Conclusione
Questo documento mostra le funzionalità essenziali di Raziel.MD. Crea i tuoi documenti e organizza la tua base di conoscenza personale.