Markdown Master: Guía de Renderizado

Esta página sirve como banco de pruebas para todos los elementos de Markdown disponibles. El objetivo es asegurar que la tipografía, los colores (Coral + Deep Teal) y los componentes se rendericen de forma premium.

🧱 1. Elementos básicos de Markdown (CommonMark)

Markdown es un lenguaje de marcado ligero con sintaxis de formato de texto plano. Su diseño permite que sea convertido a muchos formatos, pero fue creado originalmente para ser convertido a HTML.

Encabezados

Los encabezados son fundamentales para el SEO y la accesibilidad. En esta web usamos ## para las secciones principales y ### para las subsecciones.

Texto y Énfasis

Es importante saber cuándo usar negritas o cursivas para guiar la atención del usuario sin saturar la página.

⚙️ 2. Elementos intermedios y Layout

Esta sección cubre elementos que ayudan a organizar datos de forma tabular o estructurada.

Tablas de Datos Técnicos

Las tablas permiten comparar especificaciones de diversos modelos de IA de un vistazo.

Listas de tareas (Checklists)

Útiles para guiar al usuario a través de procesos de instalación o configuración complejos.

🚀 3. Elementos avanzados y Extensiones

Aquí es donde realmente sacamos el potencial de los plugins de Eleventy.

Párrafos y saltos de línea

Este es un párrafo normal con suficiente texto para probar el interlineado y la legibilidad en pantallas grandes. El color de la fuente debe ser suave pero con buen contraste.

Salto de línea forzado (usando dos espacios al final)
Nueva línea en el mismo bloque.

Ejemplo

Citas y Alertas (Admonitions)

Cita anidada para discusiones o hilos de pensamiento complejos.

Listas

Lista sin orden

• Elemento de primer nivel
  • Elemento anidado

• Otro estilo de bullet

• Un tercer estilo

Lista ordenada

1. Primer paso de la guía.
2. Segundo paso con detalles.
   1. Sub-paso numerado.
3. Tercer paso final.

Enlaces y Multimedia

Enlaces

• Mi Perfil de LinkedIn
• Enlace automático

Imágenes

Pie de foto: Ejemplo de subtítulo para imágenes en el cuerpo del post.

Código

Código en línea
Puedes usar npm run dev para iniciar el servidor local o definir variables como const ai = true;.

Bloques de código

import openai

def call_ai(prompt):
    """Llamada simple a la API de OpenAI."""
    response = openai.chat.completions.create(
        model="gpt-4",
        messages=[{"role": "user", "content": prompt}]
    )
    return response.choices[0].message.content

# Ejemplo de uso
print(call_ai("¿Cómo saco el potencial de Markdown?"))

Laboratorio de Código

Aquí puedes ver cómo se comportan diferentes lenguajes con el tema VS Code Dark Plus:

Python (Arquitectura AI)

import asyncio
from langchain.agents import AgentExecutor

async def run_orchestrator(task: str):
    """Ejecuta un flujo de orquestación multi-agente."""
    print(f"🚀 Iniciando tarea: {task}")
    # Simulación de orquestación real
    await asyncio.sleep(1)
    return {"status": "success", "agent": "AzureExpert"}

if __name__ == "__main__":
    asyncio.run(run_orchestrator("Integración de RAG en Azure"))

JavaScript / Node.js

import fs from 'fs/promises';

/**
 * Generador de archivos estáticos ultraligero
 */
async function buildProject(config) {
    const { src, dist } = config;
    const files = await fs.readdir(src);
    
    console.log(`🔨 Construyendo ${files.length} archivos...`);
    
    for (const file of files) {
        const content = await fs.readFile(`${src}/${file}`, 'utf-8');
        await fs.writeFile(`${dist}/${file}`, content);
    }
}

Bash (DevOps)

#!/bin/bash
# Script de despliegue automatizado para Eleventy

echo "📦 Instalando dependencias..."
npm install

echo "🏗️ Generando sitio estático..."
npx @11ty/eleventy

echo "🚀 Subiendo a producción vía SCP..."
scp -r ./_site/* user@server:/var/www/personal-brand/

YAML (Configuración)

# GitHub Actions Workflow
name: CI/CD Pipeline
on:
  push:
    branches: [ main ]
jobs:
  build_site:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'

C# (Semantic Kernel / Enterprise)

using Microsoft.SemanticKernel;

// Inicialización del Kernel para orquestación enterprise
var builder = Kernel.CreateBuilder();
builder.AddAzureOpenAIChatCompletion(
    deploymentName: "gpt-4",
    endpoint: "https://your-resource.openai.azure.com/",
    apiKey: "your-api-key"
);

var kernel = builder.Build();
var result = await kernel.InvokePromptAsync("Explica el concepto de Agentes Autónomos");
Console.WriteLine(result);

YAML (Azure DevOps Pipeline)

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '20.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npx @11ty/eleventy
  displayName: 'Build Eleventy Site'

Rust (Performance)

fn main() {
    let mut count = 0;
    let message = "Construyendo el futuro con Rust e IA";
    
    for _ in 0..10 {
        count += 1;
        println!("{}: {}", count, message);
    }
}

⚙️ 2. Elementos intermedios

Tablas de Datos

Listas de tareas (Checklists)

• Implementar paleta Coral y Verde Oscuro.
• Configurar cabecera responsiva con menú hamburguesa.
• Integrar búsqueda en tiempo real.
• Añadir soporte para diagramas Mermaid.

Notas al pie

Puedes añadir aclaraciones técnicas al final de la página^[1].

Abreviaturas y Definiciones

*[LLM]: Large Language Model

El término LLM se usa mucho en esta guía.

Término
: Este es el formato de lista de definición, útil para glosarios técnicos.

🚀 3. Elementos avanzados

Bloques colapsables

{
  "theme": "dark",
  "accent": "coral",
  "font": "Montserrat"
}

Emojis y Resaltado

• Soporte para emojis nativos: 🚀 🧱 ⚙️ 💡
• Texto resaltado para llamar la atención (Highlighter).

Matemáticas (LaTeX)

$$
E = mc^2
$$

Comentarios y HTML