Sintaxis de Código

El código es un elemento crucial en la documentación técnica. Markdown proporciona varias formas de mostrar código, incluyendo código en línea y bloques de código.

Código en Línea

Sintaxis Básica

Usa acentos graves ` para encerrar el código:

markdown

Este es un ejemplo de `código en línea`.
Usa la función `console.log()` para mostrar información.

Visualización Renderizada:

Este es un ejemplo de código en línea. Usa la función console.log() para mostrar información.

Código que Contiene Acentos Graves

Cuando el propio código contiene acentos graves, usa doble acento grave:

markdown

``Usa la función `console.log()```

Visualización Renderizada:

``Usa la función `console.log()```

Manejo de Múltiples Acentos Graves

markdown

```Código con varios acentos graves `` ` ``` aquí```

Visualización Renderizada:

Código con varios acentos graves `` ` aquí```

Bloques de Código

Bloques de Código Indentados

Usa 4 espacios o 1 tabulación para indentar:

markdown

    function hola() {
        console.log("¡Hola, Mundo!");
    }

Visualización Renderizada:

function hola() {
    console.log("¡Hola, Mundo!");
}

Bloques de Código Delimitados

Usa tres acentos graves ``` o virgulillas ~~~ para encerrar el código:

markdown

```
function hola() {
    console.log("¡Hola, Mundo!");
}
```

Visualización Renderizada:

function hola() {
    console.log("¡Hola, Mundo!");
}

Especificar Lenguaje de Programación

Especifica el nombre del lenguaje después de los acentos graves para habilitar el resaltado de sintaxis:

markdown

```javascript
function hola(nombre) {
    console.log(`¡Hola, ${nombre}!`);
}
```

Visualización Renderizada:

javascript

function hola(nombre) {
    console.log(`¡Hola, ${nombre}!`);
}

Ejemplos Comunes de Lenguajes de Programación

JavaScript

markdown

```javascript
// Ejemplo de función async
async function obtenerDatos(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error:', error);
    }
}
```

Visualización Renderizada:

javascript

// Ejemplo de función async
async function obtenerDatos(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error:', error);
    }
}

Python

markdown

```python
# Ejemplo de definición de clase
class Calculadora:
    def __init__(self):
        self.resultado = 0
    
    def sumar(self, x, y):
        return x + y
    
    def multiplicar(self, x, y):
        return x * y

# Ejemplo de uso
calc = Calculadora()
print(calc.sumar(5, 3))
```

Visualización Renderizada:

python

# Ejemplo de definición de clase
class Calculadora:
    def __init__(self):
        self.resultado = 0
    
    def sumar(self, x, y):
        return x + y
    
    def multiplicar(self, x, y):
        return x * y

# Ejemplo de uso
calc = Calculadora()
print(calc.sumar(5, 3))

HTML

markdown

```html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Página de Ejemplo</title>
</head>
<body>
    <h1>Bienvenido a Markdown</h1>
    <p>Este es un párrafo de ejemplo.</p>
</body>
</html>
```

Visualización Renderizada:

html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Página de Ejemplo</title>
</head>
<body>
    <h1>Bienvenido a Markdown</h1>
    <p>Este es un párrafo de ejemplo.</p>
</body>
</html>

CSS

markdown

```css
/* Ejemplo de diseño responsivo */
.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .contenedor {
        padding: 0 10px;
    }
}

.boton {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.boton:hover {
    background-color: #0056b3;
}
```

Visualización Renderizada:

css

/* Ejemplo de diseño responsivo */
.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .contenedor {
        padding: 0 10px;
    }
}

.boton {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.boton:hover {
    background-color: #0056b3;
}

Bash/Shell

markdown

```bash
#!/bin/bash

# Ejemplo de script: procesar archivos por lotes
for file in *.txt; do
    if [ -f "$file" ]; then
        echo "Procesando $file"
        cp "$file" "backup_$file"
    fi
done

# Definición de función
function verificar_dependencias() {
    command -v git >/dev/null 2>&1 || {
        echo "Se requiere Git pero no está instalado."
        exit 1
    }
}

verificar_dependencias
echo "Todas las dependencias satisfechas."
```

Visualización Renderizada:

bash

#!/bin/bash

# Ejemplo de script: procesar archivos por lotes
for file in *.txt; do
    if [ -f "$file" ]; then
        echo "Procesando $file"
        cp "$file" "backup_$file"
    fi
done

# Definición de función
function verificar_dependencias() {
    command -v git >/dev/null 2>&1 || {
        echo "Se requiere Git pero no está instalado."
        exit 1
    }
}

verificar_dependencias
echo "Todas las dependencias satisfechas."

JSON

markdown

```json
{
  "name": "tutorial-markdown",
  "version": "1.0.0",
  "description": "Tutorial de Markdown en Español",
  "main": "index.js",
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "preview": "vitepress preview docs"
  },
  "dependencies": {
    "vitepress": "^1.0.0"
  },
  "author": "Tu Nombre",
  "license": "MIT"
}
```

Visualización Renderizada:

json

{
  "name": "tutorial-markdown",
  "version": "1.0.0",
  "description": "Tutorial de Markdown en Español",
  "main": "index.js",
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "preview": "vitepress preview docs"
  },
  "dependencies": {
    "vitepress": "^1.0.0"
  },
  "author": "Tu Nombre",
  "license": "MIT"
}

Funciones Avanzadas de Bloques de Código

Mostrar Números de Línea

Algunos procesadores de Markdown permiten mostrar números de línea:

markdown

```javascript {1}
// Esta es la línea uno
function ejemplo() {
    console.log("Hola");
}
```

Resaltado de Líneas

Resalta líneas específicas:

markdown

```javascript {2-3}
function ejemplo() {
    console.log("Esta línea está resaltada");  // resaltada
    return true;               // resaltada
}
```

Mostrar Nombre de Archivo

Muestra el nombre del archivo de código:

markdown

```javascript title="app.js"
const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('¡Hola Mundo!');
});
```

Errores Comunes y Soluciones

1. Número de Acentos Graves Incorrecto

markdown

❌ Incorrecto:
```javascript
function hola() {
    console.log("Hola");
}
``  ← Número de acentos graves incorrecto

✅ Correcto:
```javascript
function hola() {
    console.log("Hola");
}
```

2. Indentación Inconsistente

markdown

❌ Incorrecto: Bloque de código indentado
    Primera línea (4 espacios)
  Segunda línea (2 espacios)  ← Indentación inconsistente

✅ Correcto: Bloque de código indentado
    Primera línea (4 espacios)
    Segunda línea (4 espacios)

3. Nombre de Lenguaje Incorrecto

markdown

❌ Incorrecto:
```js  ← debería ser javascript
function hola() {}
```

✅ Correcto:
```javascript
function hola() {}
```

Lista de Lenguajes Soportados

Identificadores comunes de lenguajes:

Lenguaje	Identificador	Ejemplo
JavaScript	`javascript`, `js`	`function(){}`
Python	`python`, `py`	`def funcion():`
Java	`java`	`public class{}`
C++	`cpp`, `c++`	`#include <iostream>`
C#	`csharp`, `cs`	`public class{}`
Go	`go`	`func main(){}`
Rust	`rust`, `rs`	`fn main(){}`
TypeScript	`typescript`, `ts`	`interface{}`
PHP	`php`	`<?php`
Ruby	`ruby`, `rb`	`def metodo`
SQL	`sql`	`SELECT * FROM`
HTML	`html`	`<div></div>`
CSS	`css`	`.clase{}`
XML	`xml`	`<root></root>`
YAML	`yaml`, `yml`	`clave: valor`
Markdown	`markdown`, `md`	`# Título`
Bash	`bash`, `sh`	`#!/bin/bash`
PowerShell	`powershell`, `ps1`	`Get-Process`
Dockerfile	`dockerfile`	`FROM ubuntu`

Buenas Prácticas

1. Elige el Formato de Código Apropiado

markdown

✅ Recomendado: Usa formato en línea para código corto
Usa el método `Array.map()` para procesar arreglos.

✅ Recomendado: Usa bloques de código para código largo
function procesarArreglo(arr) {
    return arr.map(item => item * 2);
}

2. Añade Comentarios Adecuados

markdown

✅ Recomendado: Incluye comentarios explicativos
```javascript
// Calcular el promedio de los elementos de un arreglo
function calcularPromedio(numeros) {
    const suma = numeros.reduce((acc, num) => acc + num, 0);
    return suma / numeros.length;
}
```

3. Usa Identificadores de Lenguaje Correctos

markdown

✅ Recomendado: Identificador de lenguaje claro
```typescript
interface Usuario {
    id: number;
    nombre: string;
}
```

❌ No recomendado: Identificador de lenguaje vago
```text
interface Usuario {
    id: number;
    nombre: string;
}
```

4. Mantén el Código Conciso

markdown

✅ Recomendado: Muestra la lógica principal
```javascript
// Autenticación de usuario
function autenticar(token) {
    return validarToken(token);
}
```

❌ No recomendado: Demasiado detalle irrelevante
```javascript
// Este es un código largo con muchos detalles no relacionados...
```

Salida HTML

El código en Markdown se convierte a HTML:

markdown

`código en línea`

Se convierte en:

html

<code>código en línea</code>

Bloque de código:

markdown

```javascript
function hola() {}
```

Se convierte en:

html

<pre><code class="language-javascript">
function hola() {}
</code></pre>

Ejemplos Prácticos

Documentación de API

markdown

## Inicio de Sesión de Usuario

Envía una solicitud POST a `/api/login`:

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

Respuesta de ejemplo:

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

Ejemplo de Archivo de Configuración

markdown

## Configuración del Proyecto

Crea un archivo `config.json`:

```json
{
  "database": {
    "host": "localhost",
    "port": 5432,
    "name": "myapp"
  },
  "server": {
    "port": 3000,
    "host": "0.0.0.0"
  }
}
```

Actualiza los scripts de `package.json`:

```json
{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "test": "jest"
  }
}
```

Guía de Instalación

markdown

## Configuración del Entorno

1. Instala Node.js:

```bash
# macOS (usando Homebrew)
brew install node

# Ubuntu/Debian
sudo apt update
sudo apt install nodejs npm

# Windows (usando Chocolatey)
choco install nodejs
```

2. Verifica la instalación:

```bash
node --version
npm --version
```

3. Inicializa el proyecto:

```bash
mkdir mi-proyecto
cd mi-proyecto
npm init -y
```

Sintaxis Relacionada

Bloques de Código Delimitados - Funciones extendidas de código
Sintaxis de Énfasis - Formato de texto
Sintaxis de Enlaces - Crear enlaces
Caracteres de Escape - Manejo de caracteres especiales

Práctica

Intenta crear lo siguiente:

Una colección de ejemplos de código en varios lenguajes de programación
Un tutorial de uso de API con código de solicitud y respuesta
Una guía de instalación con instrucciones de línea de comandos para diferentes sistemas
Una plantilla de archivo de configuración con comentarios detallados

Sintaxis de Código ​

Código en Línea ​

Sintaxis Básica ​

Código que Contiene Acentos Graves ​

Manejo de Múltiples Acentos Graves ​

Bloques de Código ​

Bloques de Código Indentados ​

Bloques de Código Delimitados ​

Especificar Lenguaje de Programación ​

Ejemplos Comunes de Lenguajes de Programación ​

JavaScript ​

Python ​

HTML ​

CSS ​

Bash/Shell ​

JSON ​

Funciones Avanzadas de Bloques de Código ​

Mostrar Números de Línea ​

Resaltado de Líneas ​

Mostrar Nombre de Archivo ​

Errores Comunes y Soluciones ​

1. Número de Acentos Graves Incorrecto ​

2. Indentación Inconsistente ​

3. Nombre de Lenguaje Incorrecto ​

Lista de Lenguajes Soportados ​

Buenas Prácticas ​

1. Elige el Formato de Código Apropiado ​

2. Añade Comentarios Adecuados ​

3. Usa Identificadores de Lenguaje Correctos ​

4. Mantén el Código Conciso ​

Salida HTML ​

Ejemplos Prácticos ​

Documentación de API ​

Ejemplo de Archivo de Configuración ​

Guía de Instalación ​

Sintaxis Relacionada ​

Práctica ​

Sintaxis de Código

Código en Línea

Sintaxis Básica

Código que Contiene Acentos Graves

Manejo de Múltiples Acentos Graves

Bloques de Código

Bloques de Código Indentados

Bloques de Código Delimitados

Especificar Lenguaje de Programación

Ejemplos Comunes de Lenguajes de Programación

JavaScript

Python

HTML

CSS

Bash/Shell

JSON

Funciones Avanzadas de Bloques de Código

Mostrar Números de Línea

Resaltado de Líneas

Mostrar Nombre de Archivo

Errores Comunes y Soluciones

1. Número de Acentos Graves Incorrecto

2. Indentación Inconsistente

3. Nombre de Lenguaje Incorrecto

Lista de Lenguajes Soportados

Buenas Prácticas

1. Elige el Formato de Código Apropiado

2. Añade Comentarios Adecuados

3. Usa Identificadores de Lenguaje Correctos

4. Mantén el Código Conciso

Salida HTML

Ejemplos Prácticos

Documentación de API

Ejemplo de Archivo de Configuración

Guía de Instalación

Sintaxis Relacionada

Práctica