Code Markdown

Markdown propose plusieurs façons d'afficher du code, du simple code en ligne aux blocs de code complexes, pour répondre aux besoins d'affichage de code dans différents scénarios.

Code en ligne

S'il s'agit d'une fonction ou d'un extrait de code dans un paragraphe, vous pouvez l'entourer d'accents graves (`), par exemple :

`printf()` 函数

Le résultat affiché est le suivant :

Exemples d'utilisation courants :

  • Nom de fonction : utiliserconsole.log()afficher des informations
  • Nom de variable : affecter une valeur àuserNamevariable
  • Ligne de commande : exécuternpm installinstaller les dépendances
  • Touche de clavier : appuyerCtrl+Ccopier le contenu
  • Nom de fichier : modifierindex.htmlfichier

Échappement des caractères spéciaux

Lorsque vous devez afficher des backticks ou d'autres caractères spéciaux dans du code en ligne, vous devez effectuer un échappement.

Méthodes pour afficher des backticks :

Utilisez des doubles backticks pour entourer un seul backtick :

``Use `backticks` to surround code``

Effet rendu :

Utilisez plusieurs backticks pour entourer :

```Code containing `` double backticks```

Effet rendu :

Gestion des autres caractères spéciaux :

  • Balises HTML :<div>élément
  • Symbole mathématique : calculerx + y = z
  • Symbole spécial : utiliser&nbsp;pour représenter un espace

Blocs de code

Blocs de code indentés

Les blocs de code utilisent4 espacesou uncaractère de tabulation (touche Tab)。

Format de syntaxe:

Normal text paragraph

    This is an indented code block
    Each line is preceded by four spaces
    Keep the original format of the code

Continue normal text

Exemple :

Le résultat affiché est le suivant :

Blocs de code à triple backtick

Vous pouvez également utiliser```pour encadrer un morceau de code, et spécifier un langage (ou non) :

```
Multi-line code content
Can contain blank lines
Keep original indentation
```

Les triples backticks (```) sont la syntaxe de bloc de code la plus couramment utilisée, prenant en charge la coloration syntaxique et l'affichage de code multiligne.

```javascript
$(document).ready(function () {
    alert('EXAMPLE');
});
```

Le résultat affiché est le suivant :

Notes :

  • Les blocs de code indentés nécessitent des lignes vides avant et après pour les séparer
  • Toutes les lignes de code doivent maintenir une indentation constante
  • Aucune coloration syntaxique prise en charge
  • En cas d'utilisation dans une liste, une indentation de 8 espaces est requise

Identificateurs de langage et coloration syntaxique

Ajouter un identificateur de langage après les triples accents graves peut activer la coloration syntaxique.

Liste des identificateurs de langage courants :

  • javascript / js - JavaScript
  • python / py - Python
  • html - HTML
  • css - CSS
  • sql - SQL
  • json - JSON
  • xml - XML
  • yaml / yml - YAML
  • bash / shell- Shell script
  • java - Java
  • cpp / c++ - C++
  • csharp / c# - C#
  • php - PHP
  • ruby / rb - Ruby
  • go- Langage Go
  • rust - Rust
  • typescript / ts - TypeScript

JavaScript :

```javascript
const users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 }
];

const adults = users.filter(user => user.age >= 18);
console.log(adults);
```

Python :

```python
def calculate_area(radius):
    """计算圆的面积"""
    import math
    return math.pi * radius ** 2

# 使用函数
area = calculate_area(5)
print(f"圆的面积是: {area:.2f}")
```

SQL :

```sql
SELECT u.name, u.email, COUNT(o.id) as order_count
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE u.created_at >= '2024-01-01'
GROUP BY u.id, u.name, u.email
ORDER BY order_count DESC
LIMIT 10;
```

Fonctionnalités avancées des blocs de code

Affichage des numéros de ligne

Certains moteurs de rendu Markdown prennent en charge l'affichage des numéros de ligne, mis en œuvre au moyen d'une syntaxe ou d'une configuration spécifique.

Exemple de syntaxe (partiellement pris en charge) :

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

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

Ou utilisez :

```javascript showLineNumbers
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
const sum = doubled.reduce((a, b) => a + b, 0);
console.log(`总和: ${sum}`);
```

Comparaison de diff de code

Utilisé pour afficher les ajouts, suppressions ou modifications de code, souvent utilisé pour montrer les changements dans le contrôle de version.

Syntaxe du diff :

```diff
function calculateTotal(items) {
-   let total = 0;
+   let total = 0.0;
    
    for (let item of items) {
-       total += item.price;
+       total += parseFloat(item.price);
    }
    
+   // 保留两位小数
+   total = Math.round(total * 100) / 100;
    return total;
}
```

Affichage de diff de style Git :

```diff
@@ -1,5 +1,8 @@
 function greetUser(name) {
-    console.log("Hello " + name);
+    if (!name) {
+        throw new Error("Name is required");
+    }
+    console.log(`Hello, ${name}!`);
 }
```

Comparaison de diff spécifique au langage :

```javascript
// 之前的代码
const oldFunction = () => {
    var x = 10;  // &#x274c; 使用 var
    console.log("Value: " + x);  // &#x274c; 字符串拼接
}

// 改进后的代码  
const newFunction = () => {
    const x = 10;  // &#x2705; 使用 const
    console.log(`Value: ${x}`);  // &#x2705; 模板字符串
}
```

Autres extensions