Vai al contenuto principale
Aggiornato il 22 luglio 2026Versione prodotto 1.8.2
In questa pagina

Esempio completo di documento Markdown

← Torna agli esempi 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

  1. Primo elemento
  2. Secondo elemento
  3. 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àSupportoDescrizione
MarkdownRendering con GFM
MermaidDiagrammi e flowchart
OfflineIndexedDB e Service Worker
RicercaRicerca in nomi e contenuti

Citazioni

La semplicità è la massima sofisticazione.

  • Leonardo da Vinci

Documentazione Markdown

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

I wiki-link creano connessioni tra documenti. Seleziona un esempio qualsiasi:

[[./example]]

[[./example|Torna a questo esempio]]

[[mermaid-examples.md#sequenza-temporale|Vai alla Sequenza temporale]]

[[#codice|Vai alla sezione Codice]]

Il contenuto dentro il blocco non deve diventare un link:

[[questo/link/non/deve/diventare/html]]

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.

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.

Continua a esplorare