Blocs de Code Délimités

Les blocs de code délimités sont une fonctionnalité importante de la syntaxe étendue de Markdown, offrant des capacités d'affichage de code plus puissantes que les blocs de code basiques, incluant la coloration syntaxique, la numérotation des lignes, les noms de fichiers et d'autres fonctionnalités avancées.

Blocs de Code Délimités de Base

Trois Accents Graves

Utilisez trois accents graves ``` pour créer un bloc de code :

markdown

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

Rendu affiché :

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

Trois Tildes

Vous pouvez aussi utiliser trois tildes ~~~ pour créer un bloc de code :

markdown

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

Rendu affiché :

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

Coloration Syntaxique

Spécifier le Langage de Programmation

Indiquez le nom du langage après le marqueur d'ouverture pour activer la coloration syntaxique :

markdown

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

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

Rendu affiché :

javascript

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

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

Exemples de Langages Courants

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)

# Exemple d'utilisation
numbers = [3, 6, 8, 10, 1, 2, 1]
print(quicksort(numbers))
```

Rendu affiché :

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)

# Exemple d'utilisation
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);
    }
}
```

Rendu affiché :

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

Rendu affiché :

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())
}

Fonctionnalités Avancées

Mise en évidence des Lignes

Certains processeurs Markdown supportent la mise en évidence de lignes spécifiques :

markdown

```javascript {2,4-6}
function calculateTotal(items) {
    let total = 0; // This line is highlighted
    
    for (const item of items) { // These lines are highlighted
        total += item.price * item.quantity;
    } // Highlight ends
    
    return total;
}
```

Afficher les Numéros de Ligne

Affichez les numéros de ligne :

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

Rendu affiché :

python

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

Nom du Fichier Titre

Affichez le nom du fichier :

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();
    }
}
```

Rendu affiché :

typescript

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();
    }
}

Affichage Différent du Code

Affichez les changements de code :

markdown

```diff
function calculateTax(amount) {
-   return amount * 0.05; // Old tax rate
+   return amount * 0.08; // New tax rate
}

+ // New function
+ function calculateDiscount(amount, percentage) {
+     return amount * (percentage / 100);
+ }
```

Rendu affiché :

diff

function calculateTax(amount) {
-   return amount * 0.05; // Old tax rate
+   return amount * 0.08; // New tax rate
}

+ // New function
+ function calculateDiscount(amount, percentage) {
+     return amount * (percentage / 100);
+ }

Exemples de Fichiers de Configuration

Configuration 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"
  }
}
```

Rendu affiché :

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"
  }
}

Configuration 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"
```

Rendu affiché :

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"

Requête SQL

markdown

```sql
-- Create users table
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
);

-- Create indexes
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_username ON users(username);

-- Query active users
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;
```

Rendu affiché :

sql

-- Create users table
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
);

-- Create indexes
CREATE INDEX idx_users_email ON users(email);
CREATE INDEX idx_users_username ON users(username);

-- Query active users
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 et Commandes Shell

Script Bash

markdown

```bash
#!/bin/bash

# Deployment script
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 "Starting deployment of ${APP_NAME}..."

# Create backup
if [ -d "$DEPLOY_DIR" ]; then
    echo "Creating backup at ${BACKUP_DIR}/${CURRENT_DATE}"
    mkdir -p "$BACKUP_DIR"
    cp -r "$DEPLOY_DIR" "${BACKUP_DIR}/${CURRENT_DATE}"
fi

# Stop service
echo "Stopping service..."
sudo systemctl stop $APP_NAME || true

# Deploy new version
echo "Deploying new version..."
rm -rf "$DEPLOY_DIR"
mkdir -p "$DEPLOY_DIR"
tar -xzf "${APP_NAME}.tar.gz" -C "$DEPLOY_DIR"

# Install dependencies
echo "Installing dependencies..."
cd "$DEPLOY_DIR"
npm ci --production

# Start service
echo "Starting service..."
sudo systemctl start $APP_NAME
sudo systemctl enable $APP_NAME

echo "Deployment complete!"
```

Rendu affiché :

bash

#!/bin/bash

# Deployment script
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 "Starting deployment of ${APP_NAME}..."

# Create backup
if [ -d "$DEPLOY_DIR" ]; then
    echo "Creating backup at ${BACKUP_DIR}/${CURRENT_DATE}"
    mkdir -p "$BACKUP_DIR"
    cp -r "$DEPLOY_DIR" "${BACKUP_DIR}/${CURRENT_DATE}"
fi

# Stop service
echo "Stopping service..."
sudo systemctl stop $APP_NAME || true

# Deploy new version
echo "Deploying new version..."
rm -rf "$DEPLOY_DIR"
mkdir -p "$DEPLOY_DIR"
tar -xzf "${APP_NAME}.tar.gz" -C "$DEPLOY_DIR"

# Install dependencies
echo "Installing dependencies..."
cd "$DEPLOY_DIR"
npm ci --production

# Start service
echo "Starting service..."
sudo systemctl start $APP_NAME
sudo systemctl enable $APP_NAME

echo "Deployment complete!"

Erreurs et Solutions Communes

1. Nombre Incohérent de Backticks

markdown

❌ Erreur :
```javascript
function hello() {
    console.log("Hello");
}
``  ← Seulement deux backticks

✅ Correct :
```javascript
function hello() {
    console.log("Hello");
}
```  ← Trois backticks

2. Identificateur de Langage Incorrect

markdown

❌ Erreur :
```js  ← Certains processeurs ne reconnaissent pas
function hello() {}
```

✅ Recommandé :
```javascript  ← Utilisez le nom complet
function hello() {}
```

3. Blocs de Code imbriqués

markdown

❌ Problème : Ne peut pas afficher le code contenant ```

✅ Solution : Utilisez quatre backticks pour envelopper trois backticks
````markdown
```javascript
console.log("hello");
```


### 4. Gestion des Caractères Spéciaux

````markdown
```markdown
<!-- Afficher la syntaxe Markdown dans un bloc de code Markdown -->
\```javascript  ← Échapper les backticks
code ici
\```
```

Langages Supportés

Langages de Programmation

Langage	Identificateur	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`

Langages de Marquage et de Configuration

Langage	Identificateur	Usage
HTML	`html`	Marquage Web
CSS	`css`	Feuille de style
XML	`xml`	Échange de données
JSON	`json`	Format de données
YAML	`yaml`, `yml`	Fichier de configuration
TOML	`toml`	Fichier de configuration
Markdown	`markdown`, `md`	Documentation

Langages de Données et de Requête

Langage	Identificateur	Usage
SQL	`sql`	Requête de base de données
GraphQL	`graphql`	Requête API
R	`r`	Calcul statistique
MATLAB	`matlab`	Calcul numérique

Scripts et Shell

Langage	Identificateur	Usage
Bash	`bash`, `sh`	Shell Unix
PowerShell	`powershell`, `ps1`	Shell Windows
Batch	`batch`, `bat`	Batch Windows
Dockerfile	`dockerfile`	Configuration de conteneur

Meilleures Pratiques

1. Choisir l'Identificateur de Langage Approprié

markdown

✅ Recommandé : Utilisez l'identificateur de langage précis
```typescript
interface User {
    id: number;
    name: string;
}
```

❌ Non recommandé : Utilisez l'identificateur incorrect
```javascript  ← Ce code est en TypeScript
interface User {
    id: number;
    name: string;
}
```

2. Ajouter des Commentaires Pertinents

markdown

✅ Recommandé : Incluez des commentaires explicatifs
```python
def fibonacci(n):
    """Calculer le n-ième nombre de Fibonacci"""
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
```

❌ Non recommandé : Code sans explication
```python
def fib(n):
    if n <= 1:
        return n
    return fib(n-1) + fib(n-2)
```

3. Garder le Code Concis

markdown

✅ Recommandé : Montrer la logique essentielle
```javascript
// Middleware d'authentification utilisateur
function authenticate(req, res, next) {
    const token = req.headers.authorization;
    if (!token) {
        return res.status(401).json({ error: 'Aucun token fourni' });
    }
    // Logique de vérification...
    next();
}
```

❌ Non recommandé : Trop de code non pertinent
```javascript
// Omis beaucoup de code non lié...
```

4. Utiliser les Noms de Fichiers Titres

markdown

✅ Recommandé : Afficher le nom du fichier
```javascript title="middleware/auth.js"
export function authenticate(req, res, next) {
    // Logique d'authentification
}
```

✅ Recommandé : Afficher le nom du fichier de configuration
```json title="package.json"
{
  "name": "my-app",
  "version": "1.0.0"
}
```

Scénarios d'Application Pratique

1. Documentation API

markdown

## API de Connexion Utilisateur

**Exemple de Requête :**

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

**Exemple de Réponse :**

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

**Exemple de Réponse d'Erreur :**

```json
{
  "success": false,
  "error": {
    "code": "INVALID_CREDENTIALS",
    "message": "Email ou mot de passe invalide"
  }
}
```

2. Guide d'Installation

markdown

## Configuration de l'Environnement

### 1. Installation de Node.js

**macOS (via Homebrew) :**

```bash
# Installer Homebrew (si non déjà installé)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Installer Node.js
brew install node

# Vérifier l'installation
node --version
npm --version
```

**Ubuntu/Debian :**

```bash
# Mettre à jour la liste des paquets
sudo apt update

# Installer Node.js et npm
sudo apt install nodejs npm

# Vérifier l'installation
node --version
npm --version
```

**Windows (via Chocolatey) :**

```powershell
# Installer Chocolatey (exécuter en tant qu'administrateur)
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'))

# Installer Node.js
choco install nodejs

# Vérifier l'installation
node --version
npm --version
```

3. Comparaison de Code

markdown

## Avant et Après la Refactorisation

**Avant (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 });
            });
        });
    });
}
```

**Aprè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;
    }
}
```

Sortie HTML

Les blocs de code délimités sont convertis en HTML :

markdown

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

Converti en :

html

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

Syntaxes Relatives

Syntaxe de Base des Codes - Code inline et blocs de code basiques
Syntaxe HTML - Améliorations HTML
Vue d'ensemble de la Syntaxe Étendue - Autres fonctionnalités étendues

Pratique

Essayez de créer les blocs de code suivants :

Une collection d'exemples de code dans plusieurs langages de programmation
Une documentation complète d'utilisation d'API (y compris les requêtes et les réponses)
Une documentation de script de déploiement
Un script SQL pour la conception de base de données

Outils et Plugins

Bibliothèques de Coloration Syntaxique

Prism.js : Coloration syntaxique légère
highlight.js : Bibliothèque de coloration riche
CodeMirror : Éditeur de code en ligne
Monaco Editor : Noyau de l'éditeur VS Code

Processors Markdown

markdown-it : Parser Markdown extensible
remark : Traitement Markdown unifié
marked : Parser Markdown rapide
gray-matter : Parser Front Matter

Plugins d'Éditeur

VS Code : Aperçu Markdown Amélioré
Sublime Text : MarkdownEditing
Atom : markdown-preview-plus
Vim : vim-markdown

Blocs de Code Délimités ​