Clase 02 — Enlaces, Imágenes y Código

Enlaces (links)

<!-- Enlace inline -->
[Texto del enlace](https://github.com)

<!-- Enlace con título (tooltip) -->
[GitHub](https://github.com "Ir a GitHub")

<!-- Enlace a sección del mismo documento -->
[Ir a la sección de código](#bloques-de-código)

<!-- Enlace a otro archivo -->
[Ver README](../README.md)

<!-- Enlace por referencia -->
Visitá [GitHub][gh] o [GitLab][gl] para más info.

[gh]: https://github.com
[gl]: https://gitlab.com

URLs automáticas

<!-- GitHub convierte URLs automáticamente -->
https://github.com

<!-- Forzar con angle brackets -->
<https://github.com>
<user@email.com>

Imágenes

<!-- Imagen básica -->
![Texto alternativo](./images/logo.png)

<!-- Imagen con título -->
![Logo del proyecto](./images/logo.png "Logo ROXS")

<!-- Imagen desde URL -->
![Docker](https://img.shields.io/badge/Docker-2496ED?logo=docker&logoColor=white)

<!-- Imagen por referencia -->
![Logo][logo-img]

[logo-img]: ./images/logo.png

Imagen como enlace

[![Texto alt](./images/logo.png)](https://www.roxs.dev/)

Redimensionar imágenes (HTML)

<!-- Markdown puro no soporta tamaño, usá HTML -->
<img src="./images/logo.png" alt="Logo" width="200" />

<!-- Centrar imagen -->
<div align="center">
  <img src="./images/logo.png" alt="Logo" width="300" />
</div>

Código inline

Ejecutá `docker compose up -d` para iniciar los servicios.

El archivo de configuración es `docker-compose.yml`.

Usá la variable `$HOME` para el directorio home.

Bloques de código

```bash
#!/bin/bash
echo "Hola DevOps"
docker compose up -d
```

```yaml
services:
  web:
    image: nginx:alpine
    ports:
      - "80:80"
```

```python
def deploy(env: str) -> bool:
    print(f"Deploying to {env}")
    return True
```

```json
{
  "name": "mi-app",
  "version": "1.0.0"
}
```

Lenguajes comunes para syntax highlighting

Lenguaje	Identificador
Bash/Shell	bash, sh, shell
Python	python, py
JavaScript	javascript, js
TypeScript	typescript, ts
YAML	yaml, yml
JSON	json
Dockerfile	dockerfile
SQL	sql
Go	go
HCL (Terraform)	hcl
Markdown	markdown, md
Diff	diff

Bloques de código con diff

```diff
- imagen: nginx:1.24
+ imagen: nginx:1.25
  ports:
    - "80:80"
```

- imagen: nginx:1.24
+ imagen: nginx:1.25
  ports:
    - "80:80"

Resaltar líneas (Docusaurus)

```bash {2,4}
#!/bin/bash
echo "Esta línea está resaltada"
echo "Esta no"
echo "Esta también está resaltada"
```

Ejemplo: Sección de instalación

## 🔧 Instalación

Cloná el repositorio:

```bash
git clone https://github.com/roxsross/bootcamp-devops.git
cd bootcamp-devops

Instalá las dependencias:

npm install

Configurá las variables de entorno:

cp .env.example .env

Nota: Editá .env con tus credenciales antes de continuar.

## Ejercicios

1. Creá un documento con 3 enlaces: uno inline, uno por referencia, y uno a una sección interna
2. Agregá una imagen con texto alternativo y un enlace que la envuelva
3. Creá bloques de código en 3 lenguajes diferentes con syntax highlighting