Composants
Composants de formulaire
CodeEditor

CodeEditor

wc-code-editor

Éditeur de code complet avec coloration syntaxique pour multiples langages de programmation, indentation automatique et suggestions. Adapté aux exercices d'informatique comme la programmation, le débogage, la complétion de code, les algorithmes, ou l'analyse de code avec une interface professionnelle similaire aux IDE modernes.

Documentation

Le composant CodeEditor offre un environnement d'édition de code complet directement intégré dans vos exercices PLaTon. Il dispose de fonctionnalités essentielles qu'on retrouve dans les IDE modernes, rendant l'expérience de programmation agréable et productive pour les apprenants.

Caractéristiques principales

  • Coloration syntaxique pour de nombreux langages de programmation
  • Indentation automatique qui s'adapte selon le langage utilisé
  • Numérotation des lignes pour une référence facile
  • Suggestions de code (auto-complétion) qui peuvent être activées ou désactivées
  • Hauteur personnalisable pour s'adapter à vos besoins de mise en page

Langages supportés

Le composant prend en charge un large éventail de langages de programmation, notamment Python, JavaScript, Java, C, C++, HTML, CSS et bien d'autres. Spécifiez simplement le langage souhaité via la propriété language.

Cas d'utilisation

Le CodeEditor est parfait pour:

  • Des exercices de programmation où les apprenants doivent écrire du code complet
  • Des activités de débogage où un code avec des erreurs est présenté
  • Des exercices à trous où certaines parties du code doivent être complétées
  • Des démonstrations interactives avec du code modifiable

Conseil d'utilisation

Pour une expérience optimale, adaptez la hauteur de l'éditeur en fonction de la quantité de code attendue, et activez les suggestions uniquement lorsque c'est pédagogiquement pertinent.

Exemple interactif

API

code
Le contenu de l'éditeur.
string
Default: ""
height
Le hauteur de l'éditeur en px.
number
Default: 400
tabSize
Le nombre d'espaces correspondant à une tabulation.
number
Default: 4
language
Le langage pour la coloration syntaxique.
string
Default: "plaintext"
quickSuggestions
Activer l'auto-complétion des mots?
boolean
Default: true