Passer au contenu principal
RM
Retour au blog

Article de démonstration pour valider le syntax highlighting dans le blog.

Radnoumane Mossabely2 min read
Code blocks demonstration
MDX
Test
0 vues

Introduction

Cet article démontre l'utilisation de code blocks avec syntax highlighting dans les articles MDX du blog.

Inline Code

Utiliser const variable = "valeur" pour déclarer une constante JavaScript.

TypeScript Example

Interface et fonction TypeScript :

hljs typescript
[object Object], ,[object Object], {
  ,[object Object],: ,[object Object],
  ,[object Object],: ,[object Object],
  ,[object Object],: ,[object Object],
}

,[object Object], ,[object Object],(,[object Object],): ,[object Object], {
  ,[object Object], {
    id,
    ,[object Object],: ,[object Object],,
    ,[object Object],: ,[object Object],
  }
}

,[object Object], user = ,[object Object],(,[object Object],)
,[object Object],.,[object Object],(user.,[object Object],)

Bash Commands

Installation et lancement du projet :

hljs bash
npm install
npm run dev
npm run build

React Component

Composant React avec hooks :

hljs tsx
[object Object], { useState, useEffect } ,[object Object], ,[object Object],

,[object Object], ,[object Object], ,[object Object],(,[object Object],) {
  ,[object Object], [count, setCount] = ,[object Object],(,[object Object],)

  ,[object Object],(,[object Object], {
    ,[object Object],.,[object Object],(,[object Object],)
  }, [count])

  ,[object Object], (
    ,[object Object],
  )
}

Python Example

Fonction Python simple :

hljs python
[object Object], ,[object Object],(,[object Object],):
    total = ,[object Object],(numbers)
    ,[object Object], total

result = calculate_sum([,[object Object],, ,[object Object],, ,[object Object],, ,[object Object],, ,[object Object],])
,[object Object],(,[object Object],)

JSON Configuration

Fichier de configuration package.json :

hljs json
[object Object],
  ,[object Object],[object Object], ,[object Object],[object Object],
  ,[object Object],[object Object], ,[object Object],[object Object],
  ,[object Object],[object Object], ,[object Object],
    ,[object Object],[object Object], ,[object Object],[object Object],
    ,[object Object],[object Object], ,[object Object],[object Object],
    ,[object Object],[object Object], ,[object Object],
  ,[object Object],[object Object],
  ,[object Object],[object Object], ,[object Object],
    ,[object Object],[object Object], ,[object Object],[object Object],
    ,[object Object],[object Object], ,[object Object],
  ,[object Object],
,[object Object],

CSS Styling

Styles CSS modernes :

hljs css
[object Object], {
  ,[object Object],: flex;
  ,[object Object],: center;
  ,[object Object],: center;
  ,[object Object],: ,[object Object],;
  ,[object Object],: ,[object Object],(,[object Object],, ,[object Object], ,[object Object],, ,[object Object], ,[object Object],);
}

,[object Object], {
  ,[object Object],: ,[object Object],;
  ,[object Object],: white;
  ,[object Object],: ,[object Object],;
  ,[object Object],: ,[object Object], ,[object Object], ,[object Object], ,[object Object],(,[object Object],, ,[object Object],, ,[object Object],, ,[object Object],);
}

Conclusion

Tous ces exemples de code devraient s'afficher avec syntax highlighting correctement appliqué.

Test de publication : si ce fichier build sans erreur, le système de code blocks fonctionne parfaitement.

Partager: