Démonstration de toutes les fonctionnalités Shiki pour la coloration syntaxique

Exemples de Code avec Shiki

Cette page démontre toutes les fonctionnalités de Shiki intégrées dans ce projet.

1. Coloration Syntaxique de Base

Python

# Programme calculatrice
x = float(input("Introduire la valeur de x : "))
y = float(input("Introduire la valeur de y : "))
op = input("Introduire un opérateur <+,-,*,/> : ")

if op == "+":
    res = x + y
elif op == "-":
    res = x - y
elif op == "*":
    res = x * y
elif op == "/":
    res = x / y

print("Le résultat de l'opération est :", res)

JavaScript

function calculateAverage(numbers) {
  const total = numbers.reduce((sum, num) => sum + num, 0);
  return total / numbers.length;
}

const result = calculateAverage([10, 20, 30]);
console.log(`Average: ${result}`);

2. Mise en Évidence de Lignes

Utilisez {numéros-lignes} pour mettre en évidence des lignes spécifiques.

def calculate_average(numbers):
    """Calculate the average of a list of numbers."""
    total = sum(numbers)
    average = total / len(numbers)
    return average

result = calculate_average([10, 20, 30, 40, 50])
print(f"The average is: {result}")

Syntaxe : ```python {3-5} met en évidence les lignes 3 à 5.

3. Mise en Évidence de Mots

Utilisez /motif/ pour mettre en évidence des mots spécifiques.

# Saisie des données
x = float(input("Introduire la valeur de x : "))
y = float(input("Introduire la valeur de y : "))

# Calcul
result = x + y
print("Le résultat est :", result)

Syntaxe : ```python /input/ /float/ met en évidence tous les occurrences de "input" et "float".

4. Notation Diff (Ajout/Suppression)

Utilisez + et - au début des lignes pour montrer les changements.

def calculate_sum(a, b):
-   return a + b  # Ancienne implémentation
+   # Nouvelle implémentation avec vérification de type
+   if not isinstance(a, (int, float)) or not isinstance(b, (int, float)):
+       raise TypeError("Les arguments doivent être des nombres")
+   return a + b

Syntaxe : Les lignes commençant par - sont en rouge (supprimées), celles avec + sont en vert (ajoutées).

Exemple avec Chaînes de Caractères

# Conversion majuscule → minuscule
-C = input("Entrer un caractère majuscule : ")
-code_maj = ord(C)
-code_min = code_maj + 32
-C = chr(code_min)

+# Méthode simple avec lower()
+C = input("Entrer un caractère majuscule : ")
+C = C.lower()

5. Mode Focus

Utilisez {numéros-lignes} avec le focus pour mettre en évidence certaines lignes tout en atténuant les autres.

def process_data(data):
    """Process and clean data."""
    # These lines are dimmed
    print("Starting data processing...")
    # These lines are focused
    cleaned = [x.strip() for x in data if x]
    filtered = [x for x in cleaned if len(x) > 0]
    # This line is dimmed
    return filtered

6. Niveaux d'Erreur/Avertissement/Info

Utilisez // [!code error], // [!code warning], ou // [!code info] pour marquer des lignes.

def divide(a, b):
    return a / b  #  Division par zéro non gérée

def safe_divide(a, b):
    if b == 0:  #  Considérer lever une exception
        return None
    return a / b  # [!code info]  Division sécurisée

Exemple avec Algorithme

# Extraction des chiffres d'un nombre
N = int(input("Entrer un nombre de 4 chiffres : "))  # [!code info]  Saisie utilisateur

chiffre1 = N // 1000
chiffre2 = (N // 100) % 10
chiffre3 = (N // 10) % 10
chiffre4 = N % 10

S = chiffre1 + chiffre2 + chiffre3 + chiffre4  #  Pas de validation
print(f"La somme est {S}")  # [!code info]  Affichage résultat

7. Combinaison de Fonctionnalités

Vous pouvez combiner plusieurs fonctionnalités ensemble !

Exemple : Mise en Évidence + Mots Clés

def calculate_average(numbers):
    total = sum(numbers)
    average = total / len(numbers)
    return average

result = calculate_average([10, 20, 30])
print(f"Average: {result}")

Exemple : Diff + Mise en Évidence de Mots

# Ancienne version
-x = input("Entrer x : ")
-y = input("Entrer y : ")
-result = int(x) + int(y)

# Nouvelle version avec float
+x = float(input("Entrer x : "))
+y = float(input("Entrer y : "))
+result = x + y

8. Exemples Pédagogiques

Méthode 1 vs Méthode 2

Méthode Arithmétique

# Extraction des chiffres - Méthode arithmétique
N = int(input("Entrer un nombre de 4 chiffres : "))
chiffre1 = N // 1000
chiffre2 = (N // 100) % 10
chiffre3 = (N // 10) % 10
chiffre4 = N % 10
S = chiffre1 + chiffre2 + chiffre3 + chiffre4
print(f"La somme des chiffres est {S}")

Méthode Chaînes (Plus Simple)

N = input("Entrer un nombre de 4 chiffres : ")
# Cette méthode est plus simple et plus lisible
S = int(N[0]) + int(N[1]) + int(N[2]) + int(N[3])
print(f"La somme des chiffres est {S}")

Comparaison avec Diff

# Somme des chiffres
-# Méthode arithmétique (complexe)
-N = int(input("Entrer un nombre de 4 chiffres : "))
-chiffre1 = N // 1000
-chiffre2 = (N // 100) % 10
-chiffre3 = (N // 10) % 10
-chiffre4 = N % 10
-S = chiffre1 + chiffre2 + chiffre3 + chiffre4

+# Méthode chaînes (simple)
+N = input("Entrer un nombre de 4 chiffres : ")
+S = int(N[0]) + int(N[1]) + int(N[2]) + int(N[3])

print(f"La somme est {S}")

9. Fonctions Prédéfinies en Python

Fonctions sur les Caractères

# Conversion code ASCII → caractère
R = chr(65)
print(R)  # Affiche : A

R = chr(97)
print(R)  # Affiche : a

# Conversion caractère → code ASCII
code = ord('A')
print(code)  # Affiche : 65

code = ord('a')
print(code)  # Affiche : 97

# Différence entre majuscule et minuscule
print(ord('a') - ord('A'))  # Affiche : 32

Fonctions sur les Chaînes

# Conversion en majuscules
nom = "python"
nom_maj = nom.upper()
print(nom_maj)  # PYTHON

# Longueur d'une chaîne
texte = "Bonjour"
longueur = len(texte)
print(longueur)  # 7

# Recherche dans une chaîne
texte = "Programmation Python"
position = texte.find("Python")
print(position)  # 14

10. Gestion des Erreurs Communes

Erreur : Division par Zéro

def divide(a, b):
    return a / b  #  Erreur si b == 0

# Solution 1 : Vérification
def safe_divide_v1(a, b):
    if b == 0:  #  Vérifier avant
        return None
    return a / b  # [!code info]  Sûr maintenant

# Solution 2 : Try-Except
def safe_divide_v2(a, b):
    try:
        return a / b  # [!code info]  Meilleure approche
    except ZeroDivisionError:
        return None  #  Gérer l'exception

Erreur : Type Incorrect

# Problème avec input()
-age = input("Entrer votre âge : ")
-if age >= 18:  #  TypeError: str vs int
-    print("Majeur")

# Solution : Conversion
+age = int(input("Entrer votre âge : "))  # [!code info]  Convertir en int
+if age >= 18:
+    print("Majeur")

11. Algorithmes Classiques

Calcul de Moyenne

# Programme calcul de moyenne
MT1 = float(input("Introduire la valeur de MT1 : "))
MT2 = float(input("Introduire la valeur de MT2 : "))
MT3 = float(input("Introduire la valeur de MT3 : "))

MA = (MT1 + MT2 * 2 + MT3 * 2) / 5

print("Le résultat de l'opération est :", MA)

Permutation de Chiffres

# Permutation premier et dernier chiffre
E = input("Entrer un nombre (au moins 3 chiffres) : ")

if len(E) >= 3:
    premier = E[0]
    dernier = E[-1]
    milieu = E[1:-1]

    resultat = dernier + milieu + premier
    print(f"Le résultat est {resultat}")
else:
    print("Le nombre doit avoir au moins 3 chiffres")

12. JavaScript - Exemples Comparatifs

Même Algorithme en JS

function calculateAverage(numbers) {
  const total = numbers.reduce((sum, num) => sum + num, 0);
  const average = total / numbers.length;
  return average;
}

const notes = [15, 16, 14, 18, 17];
const moyenne = calculateAverage(notes);
console.log(`Moyenne: ${moyenne}`);

Conversion Python → JavaScript

// Python: x = float(input("Entrer x : "))
-// En JavaScript (navigateur)
-const x = parseFloat(prompt("Entrer x : "));

+// En JavaScript (Node.js moderne)
+import readline from 'readline/promises';
+const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+const x = parseFloat(await rl.question("Entrer x : "));

Résumé des Syntaxes

Fonctionnalité	Syntaxe	Exemple
Langage	```langue	```python
Lignes en évidence	`{numéros}`	`{2-4,6}`
Mots en évidence	`/motif/`	`/input/ /float/`
Diff ajout	`+` début de ligne	`+nouveau_code`
Diff suppression	`-` début de ligne	`-ancien_code`
Erreur	`// [!code error]`	`x / 0 // [!code error]`
Avertissement	`// [!code warning]`	`if x: // [!code warning]`
Info	`// [!code info]`	`return x // [!code info]`
Combinaison	Multiples	`{2-4} /mot/`

Conseils d'Utilisation

Astuce : Combinez plusieurs fonctionnalités pour créer des exemples pédagogiques puissants !

Par exemple : utilisez les lignes en évidence pour montrer la partie importante, avec des mots clés mis en évidence pour attirer l'attention sur les concepts clés.

Attention : La notation diff (+ et -) doit être au tout début de la ligne, sans espaces avant.

Information : Toutes ces fonctionnalités fonctionnent en mode clair et sombre grâce aux thèmes GitHub intégrés.

Exemples de Code avec Shiki

On this page