Bloques de Código Delimitados

Los bloques de código delimitados son una característica importante de la sintaxis extendida de Markdown, proporcionando capacidades de visualización de código más potentes que los bloques de código básicos, incluyendo resaltado de sintaxis, números de línea, nombres de archivo y otras funciones avanzadas.

Bloques de Código Delimitados Básicos

Tres acentos graves

Utiliza tres acentos graves ``` para crear un bloque de código:

markdown

```
function hello() {
    console.log("Hello, World!");
}
```

Visualización renderizada:

function hello() {
    console.log("Hello, World!");
}

Tres virgulillas

También puedes usar tres virgulillas ~~~ para crear un bloque de código:

markdown

~~~
function hello() {
    console.log("Hello, World!");
}
~~~

Visualización renderizada:

function hello() {
    console.log("Hello, World!");
}

Resaltado de Sintaxis

Especificar el Lenguaje de Programación

Especifica el nombre del lenguaje después del marcador de apertura para habilitar el resaltado de sintaxis:

markdown

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

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

Visualización renderizada:

javascript

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

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

Ejemplos de Lenguajes Comunes

Python

markdown

```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)

# Ejemplo de uso
numbers = [3, 6, 8, 10, 1, 2, 1]
print(quicksort(numbers))
```

Visualización renderizada:

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)

# Ejemplo de uso
numbers = [3, 6, 8, 10, 1, 2, 1]
print(quicksort(numbers))

TypeScript

markdown

```typescript
interface User {
    id: number;
    name: string;
    email: string;
    isActive: boolean;
}

class UserService {
    private users: User[] = [];

    async createUser(userData: Omit<User, 'id'>): Promise<User> {
        const newUser: User = {
            id: Date.now(),
            ...userData
        };
        
        this.users.push(newUser);
        return newUser;
    }

    async getUserById(id: number): Promise<User | undefined> {
        return this.users.find(user => user.id === id);
    }
}
```

Visualización renderizada:

typescript

interface User {
    id: number;
    name: string;
    email: string;
    isActive: boolean;
}

class UserService {
    private users: User[] = [];

    async createUser(userData: Omit<User, 'id'>): Promise<User> {
        const newUser: User = {
            id: Date.now(),
            ...userData
        };
        
        this.users.push(newUser);
        return newUser;
    }

    async getUserById(id: number): Promise<User | undefined> {
        return this.users.find(user => user.id === id);
    }
}

Go

markdown

```go
package main

import (
    "fmt"
    "net/http"
    "log"
)

type Server struct {
    port string
}

func NewServer(port string) *Server {
    return &Server{port: port}
}

func (s *Server) Start() error {
    http.HandleFunc("/", s.handleHome)
    http.HandleFunc("/api/health", s.handleHealth)
    
    fmt.Printf("Server starting on port %s\n", s.port)
    return http.ListenAndServe(":"+s.port, nil)
}

func (s *Server) handleHome(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Welcome to Go Server!")
}

func (s *Server) handleHealth(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    fmt.Fprintf(w, `{"status": "healthy"}`)
}

func main() {
    server := NewServer("8080")
    log.Fatal(server.Start())
}
```

Visualización renderizada:

package main

import (
    "fmt"
    "net/http"
    "log"
)

type Server struct {
    port string
}

func NewServer(port string) *Server {
    return &Server{port: port}
}

func (s *Server) Start() error {
    http.HandleFunc("/", s.handleHome)
    http.HandleFunc("/api/health", s.handleHealth)
    
    fmt.Printf("Server starting on port %s\n", s.port)
    return http.ListenAndServe(":"+s.port, nil)
}

func (s *Server) handleHome(w http.ResponseWriter, r *http.Request) {
    fmt.Fprintf(w, "Welcome to Go Server!")
}

func (s *Server) handleHealth(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json")
    fmt.Fprintf(w, `{"status": "healthy"}`)
}

func main() {
    server := NewServer("8080")
    log.Fatal(server.Start())
}

Funciones Avanzadas

Resaltado de Líneas

Algunos procesadores de Markdown permiten resaltar líneas específicas:

markdown

```javascript {2,4-6}
function calculateTotal(items) {
    let total = 0; // Esta línea está resaltada
    
    for (const item of items) { // Estas líneas están resaltadas
        total += item.price * item.quantity;
    } // Fin del resaltado
    
    return total;
}
```

Mostrar Números de Línea

Muestra los números de línea del código:

markdown

```python:line-numbers
def binary_search(arr, target):
    left, right = 0, len(arr) - 1
    
    while left <= right:
        mid = (left + right) // 2
        if arr[mid] == target:
            return mid
        elif arr[mid] < target:
            left = mid + 1
        else:
            right = mid - 1
    
    return -1
```

Título de Nombre de Archivo

Muestra el nombre del archivo de código:

markdown

```typescript title="userService.ts"
export class UserService {
    private apiUrl = '/api/users';

    async getUsers(): Promise<User[]> {
        const response = await fetch(this.apiUrl);
        return response.json();
    }

    async createUser(user: CreateUserDto): Promise<User> {
        const response = await fetch(this.apiUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(user)
        });
        return response.json();
    }
}
```

Visualización de Diferencias en Bloques de Código

Muestra los cambios en el código:

markdown

```diff
function calculateTax(amount) {
-   return amount * 0.05; // Tasa de impuesto antigua
+   return amount * 0.08; // Nueva tasa de impuesto
}

+ // Nueva función
+ function calculateDiscount(amount, percentage) {
+     return amount * (percentage / 100);
+ }
```

Visualización renderizada:

diff

function calculateTax(amount) {
-   return amount * 0.05; // Tasa de impuesto antigua
+   return amount * 0.08; // Nueva tasa de impuesto
}

+ // Nueva función
+ function calculateDiscount(amount, percentage) {
+     return amount * (percentage / 100);
+ }

Ejemplos de Archivos de Configuración

Configuración JSON

markdown

```json
{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "build": "webpack --mode production",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.2",
    "mongoose": "^7.0.3",
    "jsonwebtoken": "^9.0.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.22",
    "jest": "^29.5.0",
    "webpack": "^5.82.0"
  }
}
```

Visualización renderizada:

json

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "build": "webpack --mode production",
    "test": "jest"
  },
  "dependencies": {
    "express": "^4.18.2",
    "mongoose": "^7.0.3",
    "jsonwebtoken": "^9.0.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.22",
    "jest": "^29.5.0",
    "webpack": "^5.82.0"
  }
}

Configuración YAML

markdown

```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: web-app
  labels:
    app: web-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: web-app
  template:
    metadata:
      labels:
        app: web-app
    spec:
      containers:
      - name: web
        image: nginx:1.21
        ports:
        - containerPort: 80
        env:
        - name: NODE_ENV
          value: production
        resources:
          requests:
            memory: "64Mi"
            cpu: "250m"
          limits:
            memory: "128Mi"
            cpu: "500m"
```

Visualización renderizada:

yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: web-app
  labels:
    app: web-app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: web-app
  template:
    metadata:
      labels:
        app: web-app
    spec:
      containers:
      - name: web
        image: nginx:1.21
        ports:
        - containerPort: 80
        env:
        - name: NODE_ENV
          value: production
        resources:
          requests:
            memory: "64Mi"
            cpu: "250m"
          limits:
            memory: "128Mi"
            cpu: "500m"

Consulta SQL

markdown

```sql
-- Crear tabla de usuarios
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Crear índices
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_username ON users(username);

-- Consultar usuarios activos
SELECT 
    u.id,
    u.username,
    u.email,
    COUNT(p.id) as post_count
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
WHERE u.created_at >= NOW() - INTERVAL '30 days'
GROUP BY u.id, u.username, u.email
HAVING COUNT(p.id) > 0
ORDER BY post_count DESC
LIMIT 10;
```

Visualización renderizada:

sql

-- Crear tabla de usuarios
CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Crear índices
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_username ON users(username);

-- Consultar usuarios activos
SELECT 
    u.id,
    u.username,
    u.email,
    COUNT(p.id) as post_count
FROM users u
LEFT JOIN posts p ON u.id = p.user_id
WHERE u.created_at >= NOW() - INTERVAL '30 days'
GROUP BY u.id, u.username, u.email
HAVING COUNT(p.id) > 0
ORDER BY post_count DESC
LIMIT 10;

Scripts y Comandos de Shell

Script Bash

markdown

```bash
#!/bin/bash

# Script de despliegue
set -e

APP_NAME="my-app"
DEPLOY_DIR="/var/www/${APP_NAME}"
BACKUP_DIR="/var/backups/${APP_NAME}"
CURRENT_DATE=$(date +%Y%m%d_%H%M%S)

echo "Iniciando despliegue de ${APP_NAME}..."

# Crear copia de seguridad
if [ -d "$DEPLOY_DIR" ]; then
    echo "Creando copia en ${BACKUP_DIR}/${CURRENT_DATE}"
    mkdir -p "$BACKUP_DIR"
    cp -r "$DEPLOY_DIR" "${BACKUP_DIR}/${CURRENT_DATE}"
fi

# Detener servicio
echo "Deteniendo servicio..."
sudo systemctl stop $APP_NAME || true

# Desplegar nueva versión
echo "Desplegando nueva versión..."
rm -rf "$DEPLOY_DIR"
mkdir -p "$DEPLOY_DIR"
tar -xzf "${APP_NAME}.tar.gz" -C "$DEPLOY_DIR"

# Instalar dependencias
echo "Instalando dependencias..."
cd "$DEPLOY_DIR"
npm ci --production

# Iniciar servicio
echo "Iniciando servicio..."
sudo systemctl start $APP_NAME
sudo systemctl enable $APP_NAME

echo "¡Despliegue completo!"
```

Visualización renderizada:

bash

#!/bin/bash

# Script de despliegue
set -e

APP_NAME="my-app"
DEPLOY_DIR="/var/www/${APP_NAME}"
BACKUP_DIR="/var/backups/${APP_NAME}"
CURRENT_DATE=$(date +%Y%m%d_%H%M%S)

echo "Iniciando despliegue de ${APP_NAME}..."

# Crear copia de seguridad
if [ -d "$DEPLOY_DIR" ]; then
    echo "Creando copia en ${BACKUP_DIR}/${CURRENT_DATE}"
    mkdir -p "$BACKUP_DIR"
    cp -r "$DEPLOY_DIR" "${BACKUP_DIR}/${CURRENT_DATE}"
fi

# Detener servicio
echo "Deteniendo servicio..."
sudo systemctl stop $APP_NAME || true

# Desplegar nueva versión
echo "Desplegando nueva versión..."
rm -rf "$DEPLOY_DIR"
mkdir -p "$DEPLOY_DIR"
tar -xzf "${APP_NAME}.tar.gz" -C "$DEPLOY_DIR"

# Instalar dependencias
echo "Instalando dependencias..."
cd "$DEPLOY_DIR"
npm ci --production

# Iniciar servicio
echo "Iniciando servicio..."
sudo systemctl start $APP_NAME
sudo systemctl enable $APP_NAME

echo "¡Despliegue completo!"

Errores Comunes y Soluciones

1. Número de acentos graves no coincide

markdown

❌ Error:
```javascript
function hello() {
    console.log("Hello");
}
``  ← Solo dos acentos graves

✅ Correcto:
```javascript
function hello() {
    console.log("Hello");
}
```  ← Tres acentos graves

2. Identificador de Lenguaje Incorrecto

markdown

❌ Error:
```js  ← Algunos procesadores no lo reconocen
function hello() {}
```

✅ Recomendado:
```javascript  ← Usar el nombre completo
function hello() {}
```

3. Bloques de Código Anidados

markdown

❌ Problema: No se puede mostrar código que contenga ```

✅ Solución: Usa cuatro acentos graves para envolver tres acentos graves
````markdown
```javascript
console.log("hello");
```


### 4. Manejo de Caracteres Especiales

````markdown
```markdown
<!-- Mostrar sintaxis markdown en un bloque de código markdown -->
\```javascript  ← Escapar acentos graves
código aquí
\```
```

Lista de Lenguajes Soportados

Lenguajes de Programación

Lenguaje	Identificador	Alias
JavaScript	`javascript`	`js`
TypeScript	`typescript`	`ts`
Python	`python`	`py`
Java	`java`
C++	`cpp`	`c++`, `cxx`
C#	`csharp`	`cs`
Go	`go`	`golang`
Rust	`rust`	`rs`
PHP	`php`
Ruby	`ruby`	`rb`
Swift	`swift`
Kotlin	`kotlin`	`kt`

Lenguajes de Marcado y Configuración

Lenguaje	Identificador	Uso
HTML	`html`	Marcado web
CSS	`css`	Hojas de estilo
XML	`xml`	Intercambio de datos
JSON	`json`	Formato de datos
YAML	`yaml`, `yml`	Archivo de configuración
TOML	`toml`	Archivo de configuración
Markdown	`markdown`, `md`	Documentación

Lenguajes de Datos y Consulta

Lenguaje	Identificador	Uso
SQL	`sql`	Consulta de base de datos
GraphQL	`graphql`	Consulta de API
R	`r`	Computación estadística
MATLAB	`matlab`	Computación numérica

Shell y Scripts

Lenguaje	Identificador	Uso
Bash	`bash`, `sh`	Shell Unix
PowerShell	`powershell`, `ps1`	Shell de Windows
Batch	`batch`, `bat`	Batch de Windows
Dockerfile	`dockerfile`	Configuración de contenedores

Mejores Prácticas

1. Elige el Identificador de Lenguaje Apropiado

markdown

✅ Recomendado: Usa el identificador de lenguaje correcto
```typescript
interface User {
    id: number;
    name: string;
}
```

❌ No recomendado: Usa el identificador incorrecto
```javascript  ← Este es código TypeScript
interface User {
    id: number;
    name: string;
}
```

2. Añade Comentarios Significativos

markdown

✅ Recomendado: Incluye comentarios explicativos
```python
def fibonacci(n):
    """Calcula el n-ésimo número de Fibonacci"""
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
```

❌ No recomendado: Código sin explicación
```python
def fib(n):
    if n <= 1:
        return n
    return fib(n-1) + fib(n-2)
```

3. Mantén el Código Conciso

markdown

✅ Recomendado: Muestra la lógica principal
```javascript
// Middleware de autenticación de usuario
function authenticate(req, res, next) {
    const token = req.headers.authorization;
    if (!token) {
        return res.status(401).json({ error: 'No token provided' });
    }
    // Lógica de verificación...
    next();
}
```

❌ No recomendado: Demasiado código irrelevante
```javascript
// Se omite mucho código no relacionado...
```

4. Usa Títulos de Nombre de Archivo

markdown

✅ Recomendado: Muestra el nombre del archivo
```javascript title="middleware/auth.js"
export function authenticate(req, res, next) {
    // Lógica de autenticación
}
```

✅ Recomendado: Muestra el nombre del archivo de configuración
```json title="package.json"
{
  "name": "my-app",
  "version": "1.0.0"
}
```

Escenarios de Aplicación Práctica

1. Documentación de API

markdown

## API de Inicio de Sesión de Usuario

**Ejemplo de solicitud:**

```bash
curl -X POST https://api.example.com/auth/login \
  -H "Content-Type: application/json" \
  -d '{
    "email": "user@example.com",
    "password": "password123"
  }'
```

**Ejemplo de respuesta:**

```json
{
  "success": true,
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "user": {
      "id": 1,
      "email": "user@example.com",
      "name": "Zhang San"
    }
  }
}
```

**Respuesta de error:**

```json
{
  "success": false,
  "error": {
    "code": "INVALID_CREDENTIALS",
    "message": "Invalid email or password"
  }
}
```

2. Guía de Instalación

markdown

## Configuración del Entorno

### 1. Instalar Node.js

**macOS (usando Homebrew):**

```bash
# Instalar Homebrew (si no está instalado)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Instalar Node.js
brew install node

# Verificar instalación
node --version
npm --version
```

**Ubuntu/Debian:**

```bash
# Actualizar lista de paquetes
sudo apt update

# Instalar Node.js y npm
sudo apt install nodejs npm

# Verificar instalación
node --version
npm --version
```

**Windows (usando Chocolatey):**

```powershell
# Instalar Chocolatey (ejecutar como administrador)
Set-ExecutionPolicy Bypass -Scope Process -Force; 
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; 
iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

# Instalar Node.js
choco install nodejs

# Verificar instalación
node --version
npm --version
```

3. Comparación de Código

markdown

## Antes y Después de la Refactorización

**Antes (Callback Hell):**

```javascript
function getUserData(userId, callback) {
    getUser(userId, function(err, user) {
        if (err) {
            callback(err);
            return;
        }
        
        getPosts(user.id, function(err, posts) {
            if (err) {
                callback(err);
                return;
            }
            
            getComments(posts[0].id, function(err, comments) {
                if (err) {
                    callback(err);
                    return;
                }
                
                callback(null, { user, posts, comments });
            });
        });
    });
}
```

**Después (async/await):**

```javascript
async function getUserData(userId) {
    try {
        const user = await getUser(userId);
        const posts = await getPosts(user.id);
        const comments = await getComments(posts[0].id);
        
        return { user, posts, comments };
    } catch (error) {
        throw error;
    }
}
```

Salida HTML

Los bloques de código delimitados se convierten a HTML:

markdown

```javascript
function hello() {
    console.log("Hello");
}
```

Convertido a:

html

<pre><code class="language-javascript">
function hello() {
    console.log("Hello");
}
</code></pre>

Sintaxis Relacionada

Sintaxis básica de código - Código en línea y bloques de código básicos
Sintaxis HTML - Mejoras HTML
Resumen de sintaxis extendida - Otras funciones extendidas

Práctica

Intenta crear los siguientes bloques de código:

Una colección de ejemplos de código en varios lenguajes de programación
Un tutorial completo de uso de API (incluyendo solicitud y respuesta)
Documentación de un script de despliegue
Un script SQL para diseño de base de datos

Herramientas y Plugins

Librerías de Resaltado de Sintaxis

Prism.js: Resaltado de sintaxis ligero
highlight.js: Biblioteca de resaltado rica en funciones
CodeMirror: Editor de código en línea
Monaco Editor: Núcleo del editor de VS Code

Procesadores de Markdown

markdown-it: Analizador Markdown extensible
remark: Procesador Markdown unificado
marked: Analizador Markdown rápido
gray-matter: Analizador de Front Matter

Plugins de Editor

VS Code: Markdown Preview Enhanced
Sublime Text: MarkdownEditing
Atom: markdown-preview-plus
Vim: vim-markdown

Bloques de Código Delimitados ​