Blog de AllinkaTerapia

Guía Completa de Markdown - Todas las Funcionalidades

9 min

Bienvenido a esta guía completa que demuestra todas las capacidades de escritura disponibles en este blog. Úsala como referencia para tus futuros posts.

Encabezados

Los encabezados se crean con símbolos #. Desde H1 hasta H6:

Encabezado 1 (H1)

Encabezado 2 (H2)

Encabezado 3 (H3)

Encabezado 4 (H4)

Encabezado 5 (H5)
Encabezado 6 (H6)

Énfasis de Texto

Puedes usar negrita, cursiva, negrita y cursiva, tachado, y código inline.

**negrita**
*cursiva*
***negrita y cursiva***
~~tachado~~
`código inline`

Párrafos y Saltos de Línea

Los párrafos se separan con una línea en blanco. Este es un párrafo de ejemplo que demuestra cómo el texto fluye naturalmente cuando escribes contenido largo. La tipografía está optimizada para una lectura cómoda.

Este es otro párrafo. Observa cómo se mantiene el espaciado y la legibilidad incluso con textos más extensos. El diseño está inspirado en libros impresos para crear una experiencia de lectura placentera.

Listas

Lista Ordenada

  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento
    1. Subelemento A
    2. Subelemento B
  4. Cuarto elemento

Lista No Ordenada

  • Elemento uno
  • Elemento dos
  • Elemento tres
    • Subelemento anidado
    • Otro subelemento
      • Tercer nivel
  • Elemento cuatro

Lista de Tareas

  • Tarea completada
  • Otra tarea hecha
  • Tarea pendiente
  • Otra pendiente

Enlaces e Imágenes

Enlaces

Puedes crear enlaces externos que se abren en una nueva pestaña automáticamente.

También puedes usar enlaces de referencia1 para mantener tu texto limpio.

Imágenes con Caption

Las imágenes con texto alternativo generan captions automáticos:

Ejemplo de imagen con descripción
Ejemplo de imagen con descripción

Imágenes sin Caption

Si no quieres mostrar el caption, añade un _ al inicio del alt text:

_Imagen sin caption visible

Citas (Blockquotes)

Cita Simple

La creatividad es la inteligencia divirtiéndose.

Puedes incluir formato dentro de las citas.

Cita con Atribución

No comuniques compartiendo memoria, comparte memoria comunicando.

— Rob Pike2

Bloques de Admonición

Estos bloques especiales destacan información importante:

Note (Nota)

NOTE

Esta es información útil que los lectores deben conocer, incluso si están leyendo rápidamente.

Tip (Consejo)

TIP

Consejo útil para hacer las cosas mejor o más fácilmente.

Important (Importante)

IMPORTANT

Información clave que los usuarios necesitan saber para lograr su objetivo.

Warning (Advertencia)

WARNING

Información urgente que necesita atención inmediata del usuario para evitar problemas.

Caution (Precaución)

CAUTION

Advierte sobre riesgos o resultados negativos de ciertas acciones.

Admonición con Título Personalizado

💡 Sabías Que…

Puedes personalizar el título de cualquier admonición usando corchetes.

Secciones Colapsables

Contenido que puede no interesar a todos los lectores puede colocarse en una sección colapsable:

Ver detalles técnicos

Aquí puedes incluir información adicional, detalles técnicos, o contenido complementario que el lector puede expandir si le interesa.

Puedes incluir:

  • Listas
  • Formato
  • Código
  • Y más elementos de Markdown
Ejemplo de código complejo
// Implementación compleja
class DataProcessor {
  constructor(config) {
    this.config = config
    this.cache = new Map()
  }

  async process(data) {
    if (this.cache.has(data.id)) {
      return this.cache.get(data.id)
    }

    const result = await this.transform(data)
    this.cache.set(data.id, result)
    return result
  }
}

Tablas

FeatureSoporteNotas
Markdown básico✅Completo
Imágenes✅Con LQIP
Videos✅YouTube, Bilibili
Diagramas✅Mermaid
Comentarios⚠️Configurable
Math❌Deshabilitado

Tabla con Alineación

IzquierdaCentroDerecha
TextoTextoTexto
Alineado a la izquierdaCentradoAlineado a la derecha
123

Código

Inline Code

Usa const variable = 'valor' para código dentro del texto.

Bloques de Código

JavaScript

// Función de ejemplo con resaltado de sintaxis
function saludar(nombre) {
  console.log(`¡Hola, ${nombre}!`)

  return {
    mensaje: `Bienvenido ${nombre}`,
    timestamp: new Date().toISOString()
  }
}

saludar('Mundo')

Python

# Clase de ejemplo en Python
class Usuario:
    def __init__(self, nombre, edad):
        self.nombre = nombre
        self.edad = edad

    def saludar(self):
        return f"Hola, soy {self.nombre} y tengo {self.edad} años"

# Crear instancia
usuario = Usuario("Ana", 28)
print(usuario.saludar())

HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ejemplo HTML</title>
</head>
<body>
  <h1>¡Hola Mundo!</h1>
  <p>Este es un ejemplo de código HTML.</p>
</body>
</html>

CSS

/* Estilos modernos con variables CSS */
:root {
  --primary-color: #3b82f6;
  --text-color: #1f2937;
  --spacing: 1rem;
}

.card {
  background: white;
  border-radius: 8px;
  padding: var(--spacing);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
}

Bash

#!/bin/bash

# Script de automatización
echo "Iniciando proceso..."

# Crear directorio
mkdir -p proyecto/src

# Instalar dependencias
npm install

# Ejecutar build
npm run build

echo "✅ Proceso completado"

Galería de Imágenes

Puedes crear galerías horizontales scrolleables:

Paisaje de montaña
Paisaje de montaña
Bosque en otoño
Bosque en otoño
Playa al atardecer
Playa al atardecer
Ciudad de noche
Ciudad de noche
Camino en el campo
Camino en el campo

GitHub Repository Cards

Muestra información de repositorios de GitHub con datos en tiempo real:

astro-buildastro

Loading repository data...

-- -- --
radishzzzastro-theme-retypeset

Loading repository data...

-- -- --

Videos Embebidos

YouTube

Bilibili

Tweets

Puedes embeber tweets directamente:

Diagramas con Mermaid

Diagrama de Flujo

graph TD
    A[Inicio] --> B{¿Condición?}
    B -->|Sí| C[Acción 1]
    B -->|No| D[Acción 2]
    C --> E[Fin]
    D --> E

Secuencia

sequenceDiagram
    participant Usuario
    participant Frontend
    participant Backend
    participant DB

    Usuario->>Frontend: Envía formulario
    Frontend->>Backend: POST /api/data
    Backend->>DB: INSERT INTO
    DB-->>Backend: OK
    Backend-->>Frontend: 200 Success
    Frontend-->>Usuario: Mensaje de éxito

Diagrama de Gantt

gantt
    title Plan de Proyecto
    dateFormat  YYYY-MM-DD
    section Diseño
    Wireframes           :a1, 2025-01-01, 7d
    UI Design           :a2, after a1, 10d
    section Desarrollo
    Frontend            :a3, 2025-01-15, 14d
    Backend             :a4, after a3, 10d
    section Testing
    QA Testing          :a5, after a4, 7d

Gráfico Circular

pie title Distribución de Tareas
    "Desarrollo" : 45
    "Testing" : 20
    "Diseño" : 15
    "Documentación" : 10
    "Reuniones" : 10

Elementos HTML Adicionales

Subíndice y Superíndice

La fórmula del agua es H2O.

El teorema de Pitágoras: a2 + b2 = c2

Abreviaturas

HTML es el lenguaje de marcado estándar para documentos web.

CSS se usa para el diseño visual.

Subrayado

Los buenos escritores siempre revisan la hortografia.

Teclado

Presiona Ctrl + C para copiar y Ctrl + V para pegar.

En Mac: ⌘ Cmd + Space

Resaltado

Los momentos importantes deben ser destacados visualmente.

Tachado

Había errores algunos detalles que corregir.

Línea Horizontal

Usa tres guiones para crear una línea separadora:

Combinaciones Avanzadas

Puedes combinar múltiples elementos:

TIP

Consejo Pro: Combina admoniciones con código

pnpm new-post mi-articulo

Esto creará un nuevo post listo para editar.

📊 Análisis de Rendimiento
MétricaAntesDespuésMejora
FCP2.3s0.8s⬇️ 65%
LCP3.8s1.2s⬇️ 68%
CLS0.250.01⬇️ 96%
// Optimización aplicada
import { lazy } from 'react'

const HeavyComponent = lazy(() =>
  import('./HeavyComponent')
)

Tips de Escritura

  1. Sé claro y conciso: Los lectores agradecen contenido directo
  2. Usa encabezados: Facilita el escaneo del contenido
  3. Incluye ejemplos: El código de ejemplo es muy valioso
  4. Formatea apropiadamente: Usa admoniciones para destacar puntos importantes
  5. Añade imágenes: El contenido visual mejora la comprensión

Elementos No Soportados

Elementos Deshabilitados

Aunque el tema soporta KaTeX para fórmulas matemáticas, está deshabilitado en este blog (katex: false en config.ts).

Si necesitas fórmulas matemáticas, puedes habilitarlo cambiando la configuración.

Conclusión

Esta guía demuestra todas las capacidades de escritura disponibles en este blog. Usa estos elementos para crear contenido rico, atractivo y fácil de leer.

Recursos útiles:

  • Crea posts con: pnpm new-post nombre-del-post
  • Formatea textos CJK: pnpm format-posts
  • Genera placeholders de imágenes: pnpm apply-lqip

¡Feliz escritura! 🎉

Referencias y Notas al Pie

Todas las notas al pie aparecen aquí automáticamente:

Footnotes

  1. Esta es una nota al pie que aparece al final del artículo. ↩

  2. Extracto de la charla de Rob Pike en Gopherfest, 18 de noviembre de 2015. ↩

Guía Markdown Tutorial Demostración