Ejemplo Completo de Documento Markdown

← Volver a los ejemplos de Markdown

¡Te damos la bienvenida a Raziel.MD! 🚀

Este documento muestra las principales funciones de renderizado disponibles en la aplicación.

Funciones principales

• ✅ Renderizado Markdown: compatibilidad con Markdown y GFM
• 📊 Diagramas Mermaid: diagramas de flujo, secuencias y otros diagramas
• 🎨 Resaltado de sintaxis: código en varios lenguajes
• 🌙 Temas: modos claro y oscuro
• 💾 Uso sin conexión: documentos almacenados localmente

Ejemplos de formato

Listas

Lista sin ordenar

• Elemento 1
• Elemento 2
  • Subelemento 2.1
  • Subelemento 2.2
• Elemento 3

Lista ordenada

1. Primer elemento
2. Segundo elemento
3. Tercer elemento

Código

Código en línea: const hello = "world"

Bloque de código JavaScript:

function fibonacci(n) {
  if (n <= 1) return n
  return fibonacci(n - 1) + fibonacci(n - 2)
}

console.log(fibonacci(10)) // 55

Bloque de código 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]))

Tablas

Citas

La simplicidad es la máxima sofisticación.

• Leonardo da Vinci

Enlaces

Documentación de Markdown

Diagramas Mermaid

Diagrama de flujo

graph TD
    A[Subir archivos] --> B{¿Es un archivo .md?}
    B -->|Sí| C[Procesar contenido]
    B -->|No| D[Ignorar]
    C --> E[Guardar en IndexedDB]
    E --> F[Renderizar en la interfaz]
    F --> G[Ver Markdown]

Diagrama de secuencia

sequenceDiagram
    participant U as Usuario
    participant A as Aplicación
    participant DB as IndexedDB

    U->>A: Subir archivo
    A->>A: Validar formato
    A->>DB: Guardar archivo
    DB-->>A: Confirmar
    A-->>U: Mostrar éxito
    U->>A: Seleccionar archivo
    A->>DB: Obtener contenido
    DB-->>A: Devolver contenido
    A->>A: Renderizar Markdown
    A-->>U: Mostrar documento

Diagrama de clases

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

Gráfico circular

pie title Distribución de funciones
    "Subida de archivos" : 20
    "Navegación" : 25
    "Renderizado" : 30
    "Búsqueda" : 15
    "Uso sin conexión" : 10

Navegación mediante enlaces

Wiki-links

Los wiki-links permiten crear conexiones entre documentos. Selecciona cualquier ejemplo:

Enlace sencillo a este documento

[[./example]]

Enlace con texto personalizado

[[./example|Volver a este ejemplo]]

Enlace a una sección de otro documento

[[mermaid-examples.md#línea-del-tiempo|Ir a la Línea del tiempo]]

Enlace a una sección de este documento

[[#código|Ir a la sección Código]]

Wiki-link dentro de un bloque de código

El contenido del bloque no debe convertirse en enlace:

[[este/enlace/no/debe/convertirse/en/html]]

Enlaces internos en Markdown

Los enlaces internos se abren en la misma pestaña. Usa Ctrl+Click o el botón central para abrirlos en otra pestaña.

• Este documento
• Sección Tablas
• Sección Citas
• Ejemplos avanzados de Mermaid

Consejo: haz clic derecho en un enlace para ver acciones como abrir, abrir en otra pestaña y copiar el enlace.

Enlaces externos

Los enlaces externos muestran una confirmación antes de abrirse:

• Documentación de Markdown
• GitHub
• Vue.js

Funciones avanzadas

Listas de tareas

• Importar archivos
• Crear navegación en árbol
• Renderizar Markdown
• Renderizar Mermaid
• Añadir búsqueda
• Crear mis propias notas
• Organizar una biblioteca personal

Formato de texto

Negrita, cursiva, tachado y código en línea.

Negrita y cursiva combinadas

Separador horizontal

Ejemplos de sanitización

Raziel.MD sanitiza contenido HTML potencialmente peligroso. Los siguientes ejemplos deben mostrarse sin ejecutar scripts.

<script>alert("XSS")</script>

<img src="x" onerror="alert('XSS mediante un atributo')">

<div onclick="alert('XSS mediante un evento')">Selecciona aquí</div>

<iframe src="javascript:alert('XSS mediante un iframe')"></iframe>

Conclusión

Este documento muestra funciones esenciales de Raziel.MD. Crea tus propios documentos y organiza tu base de conocimiento personal.

Sigue explorando

• Ejemplos avanzados de Mermaid
• Volver a los ejemplos de Markdown