Syntaxe du code

Le code est un élément crucial dans la documentation technique. Markdown propose plusieurs façons d'afficher du code, notamment le code en ligne et les blocs de code.

Code en ligne

Syntaxe de base

Utilisez des accents graves ` pour entourer le code :

markdown

Ceci est un exemple de `code en ligne`.
Utilisez la fonction `console.log()` pour afficher des informations.

Rendu :

Ceci est un exemple de code en ligne. Utilisez la fonction console.log() pour afficher des informations.

Code contenant des accents graves

Lorsque le code lui-même contient des accents graves, utilisez des doubles accents graves :

markdown

``Utilisez la fonction `console.log()```

Rendu :

``Utilisez la fonction `console.log()```

Gestion de plusieurs accents graves

markdown

```Code avec plusieurs accents graves `` ` ``` ici```

Rendu :

Code avec plusieurs accents graves `` ` ici```

Blocs de code

Blocs de code indentés

Utilisez 4 espaces ou 1 tabulation pour indenter :

markdown

    function hello() {
        console.log("Bonjour, Monde !");
    }

Rendu :

function hello() {
    console.log("Bonjour, Monde !");
}

Blocs de code délimités

Utilisez trois accents graves ``` ou des tildes ~~~ pour entourer le code :

markdown

```
function hello() {
    console.log("Bonjour, Monde !");
}
```

Rendu :

function hello() {
    console.log("Bonjour, Monde !");
}

Spécifier le langage de programmation

Indiquez le nom du langage après l'ouverture des accents graves pour activer la coloration syntaxique :

markdown

```javascript
function hello(name) {
    console.log(`Bonjour, ${name} !`);
}
```

Rendu :

javascript

function hello(name) {
    console.log(`Bonjour, ${name} !`);
}

Exemples courants de langages de programmation

JavaScript

markdown

```javascript
// Exemple de fonction asynchrone
async function fetchData(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Erreur :', error);
    }
}
```

Rendu :

javascript

// Exemple de fonction asynchrone
async function fetchData(url) {
    try {
        const response = await fetch(url);
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Erreur :', error);
    }
}

Python

markdown

```python
# Exemple de définition de classe
class Calculatrice:
    def __init__(self):
        self.resultat = 0
    
    def addition(self, x, y):
        return x + y
    
    def multiplication(self, x, y):
        return x * y

# Exemple d'utilisation
calc = Calculatrice()
print(calc.addition(5, 3))
```

Rendu :

python

# Exemple de définition de classe
class Calculatrice:
    def __init__(self):
        self.resultat = 0
    
    def addition(self, x, y):
        return x + y
    
    def multiplication(self, x, y):
        return x * y

# Exemple d'utilisation
calc = Calculatrice()
print(calc.addition(5, 3))

HTML

markdown

```html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Page d'exemple</title>
</head>
<body>
    <h1>Bienvenue sur Markdown</h1>
    <p>Ceci est un paragraphe d'exemple.</p>
</body>
</html>
```

Rendu :

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Page d'exemple</title>
</head>
<body>
    <h1>Bienvenue sur Markdown</h1>
    <p>Ceci est un paragraphe d'exemple.</p>
</body>
</html>

CSS

markdown

```css
/* Exemple de mise en page responsive */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

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

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

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

Rendu :

css

/* Exemple de mise en page responsive */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

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

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

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

Bash/Shell

markdown

```bash
#!/bin/bash

# Exemple de script : traitement par lot de fichiers
for file in *.txt; do
    if [ -f "$file" ]; then
        echo "Traitement de $file"
        cp "$file" "backup_$file"
    fi
done

# Définition de fonction
function verifier_dependances() {
    command -v git >/dev/null 2>&1 || {
        echo "Git est requis mais non installé."
        exit 1
    }
}

verifier_dependances
echo "Toutes les dépendances sont satisfaites."
```

Rendu :

bash

#!/bin/bash

# Exemple de script : traitement par lot de fichiers
for file in *.txt; do
    if [ -f "$file" ]; then
        echo "Traitement de $file"
        cp "$file" "backup_$file"
    fi
done

# Définition de fonction
function verifier_dependances() {
    command -v git >/dev/null 2>&1 || {
        echo "Git est requis mais non installé."
        exit 1
    }
}

verifier_dependances
echo "Toutes les dépendances sont satisfaites."

JSON

markdown

```json
{
  "name": "markdown-tutoriel",
  "version": "1.0.0",
  "description": "Tutoriel Markdown en français",
  "main": "index.js",
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "preview": "vitepress preview docs"
  },
  "dependencies": {
    "vitepress": "^1.0.0"
  },
  "author": "Votre Nom",
  "license": "MIT"
}
```

Rendu :

json

{
  "name": "markdown-tutoriel",
  "version": "1.0.0",
  "description": "Tutoriel Markdown en français",
  "main": "index.js",
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "preview": "vitepress preview docs"
  },
  "dependencies": {
    "vitepress": "^1.0.0"
  },
  "author": "Votre Nom",
  "license": "MIT"
}

Fonctionnalités avancées des blocs de code

Afficher les numéros de ligne

Certains moteurs Markdown permettent d'afficher les numéros de ligne :

markdown

```javascript {1}
// Ceci est la ligne une
function exemple() {
    console.log("Bonjour");
}
```

Mise en évidence de lignes

Mettez en surbrillance des lignes spécifiques :

markdown

```javascript {2-3}
function exemple() {
    console.log("Cette ligne est surlignée");  // surlignée
    return true;               // surlignée
}
```

Afficher le nom du fichier

Affichez le nom du fichier de code :

markdown

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

app.get('/', (req, res) => {
    res.send('Bonjour le monde !');
});
```

Erreurs courantes et solutions

1. Nombre d'accents graves non appariés

markdown

❌ Incorrect :
```javascript
function hello() {
    console.log("Bonjour");
}
``  ← Nombre d'accents graves non appariés

✅ Correct :
```javascript
function hello() {
    console.log("Bonjour");
}
```

2. Indentation incohérente

markdown

❌ Incorrect : Bloc de code indenté
    Première ligne (4 espaces)
  Deuxième ligne (2 espaces)  ← Indentation incohérente

✅ Correct : Bloc de code indenté
    Première ligne (4 espaces)
    Deuxième ligne (4 espaces)

3. Nom de langage incorrect

markdown

❌ Incorrect :
```js  ← devrait être javascript
function hello() {}
```

✅ Correct :
```javascript
function hello() {}
```

Liste des langages supportés

Identifiants de langages courants :

Langage	Identifiant	Exemple
JavaScript	`javascript`, `js`	`function(){}`
Python	`python`, `py`	`def function():`
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 method`
SQL	`sql`	`SELECT * FROM`
HTML	`html`	`<div></div>`
CSS	`css`	`.class{}`
XML	`xml`	`<root></root>`
YAML	`yaml`, `yml`	`key: value`
Markdown	`markdown`, `md`	`# Titre`
Bash	`bash`, `sh`	`#!/bin/bash`
PowerShell	`powershell`, `ps1`	`Get-Process`
Dockerfile	`dockerfile`	`FROM ubuntu`

Bonnes pratiques

1. Choisissez le format de code approprié

markdown

✅ Recommandé : Utilisez le format en ligne pour le code court
Utilisez la méthode `Array.map()` pour traiter les tableaux.

✅ Recommandé : Utilisez des blocs de code pour le code long
function traiterTableau(arr) {
    return arr.map(item => item * 2);
}

2. Ajoutez des commentaires pertinents

markdown

✅ Recommandé : Inclure des commentaires explicatifs
```javascript
// Calculer la moyenne des éléments d'un tableau
function calculerMoyenne(nombres) {
    const somme = nombres.reduce((acc, num) => acc + num, 0);
    return somme / nombres.length;
}
```

3. Utilisez les bons identifiants de langage

markdown

✅ Recommandé : Identifiant de langage clair
```typescript
interface Utilisateur {
    id: number;
    name: string;
}
```

❌ Non recommandé : Identifiant vague
```text
interface Utilisateur {
    id: number;
    name: string;
}
```

4. Gardez le code concis

markdown

✅ Recommandé : Montrez la logique principale
```javascript
// Authentification utilisateur
function authentifier(token) {
    return validerToken(token);
}
```

❌ Non recommandé : Trop de détails inutiles
```javascript
// Ceci est un long code avec beaucoup de détails non pertinents...
```

Sortie HTML

Le code Markdown est converti en HTML :

markdown

`code en ligne`

Devient :

html

<code>code en ligne</code>

Bloc de code :

markdown

```javascript
function hello() {}
```

Devient :

html

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

Exemples pratiques

Documentation d'API

markdown

## Connexion utilisateur

Envoyez une requête POST à `/api/login` :

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

Réponse exemple :

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

Exemple de fichier de configuration

markdown

## Configuration du projet

Créez un fichier `config.json` :

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

Mettez à jour les scripts de `package.json` :

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

Guide d'installation

markdown

## Préparation de l'environnement

1. Installer Node.js :

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

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

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

2. Vérifier l'installation :

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

3. Initialiser le projet :

```bash
mkdir mon-projet
cd mon-projet
npm init -y
```

Syntaxes associées

Blocs de code délimités – Fonctions avancées de code
Syntaxe de l'emphase – Mise en forme du texte
Syntaxe des liens – Création de liens
Caractères d'échappement – Gestion des caractères spéciaux

Pratique

Essayez de créer les éléments suivants :

Une collection d'exemples de code dans différents langages
Un tutoriel d'utilisation d'API avec requêtes et réponses
Un guide d'installation avec instructions en ligne de commande pour différents systèmes
Un modèle de fichier de configuration avec commentaires détaillés

Syntaxe du code ​

Code en ligne ​

Syntaxe de base ​

Code contenant des accents graves ​

Gestion de plusieurs accents graves ​

Blocs de code ​

Blocs de code indentés ​

Blocs de code délimités ​

Spécifier le langage de programmation ​

Exemples courants de langages de programmation ​

JavaScript ​

Python ​

HTML ​

CSS ​

Bash/Shell ​

JSON ​

Fonctionnalités avancées des blocs de code ​

Afficher les numéros de ligne ​

Mise en évidence de lignes ​

Afficher le nom du fichier ​

Erreurs courantes et solutions ​

1. Nombre d'accents graves non appariés ​

2. Indentation incohérente ​

3. Nom de langage incorrect ​

Liste des langages supportés ​

Bonnes pratiques ​

1. Choisissez le format de code approprié ​

2. Ajoutez des commentaires pertinents ​

3. Utilisez les bons identifiants de langage ​

4. Gardez le code concis ​

Sortie HTML ​

Exemples pratiques ​

Documentation d'API ​

Exemple de fichier de configuration ​

Guide d'installation ​

Syntaxes associées ​

Pratique ​

Syntaxe du code

Code en ligne

Syntaxe de base

Code contenant des accents graves

Gestion de plusieurs accents graves

Blocs de code

Blocs de code indentés

Blocs de code délimités

Spécifier le langage de programmation

Exemples courants de langages de programmation

JavaScript

Python

HTML

CSS

Bash/Shell

JSON

Fonctionnalités avancées des blocs de code

Afficher les numéros de ligne

Mise en évidence de lignes

Afficher le nom du fichier

Erreurs courantes et solutions

1. Nombre d'accents graves non appariés

2. Indentation incohérente

3. Nom de langage incorrect

Liste des langages supportés

Bonnes pratiques

1. Choisissez le format de code approprié

2. Ajoutez des commentaires pertinents

3. Utilisez les bons identifiants de langage

4. Gardez le code concis

Sortie HTML

Exemples pratiques

Documentation d'API

Exemple de fichier de configuration

Guide d'installation

Syntaxes associées

Pratique