Le composant Affichage de code présente un bloc de code source sur vos pages SharePoint, coloré selon la syntaxe du langage choisi, sur un fond sombre ou clair. Vos visiteurs le lisent tel que vous l'avez saisi et le copient d'un clic.

Cet article décrit les cas d'usage du composant WebPart, sa prise en main, son paramétrage, la saisie du code sur la page et les bonnes pratiques à suivre.

📋 Sommaire

1. Présentation du composant
2. Ajouter le composant à votre page
3. Paramétrer le composant
4. Saisir le code et le titre sur la page
5. Bonnes pratiques
6. Ce qui change par rapport à la version précédente

1. Présentation du composant

L'Affichage de code se compose de trois éléments : un titre facultatif, un bloc de code coloré selon la syntaxe, et un bouton Copier qui place tout le code dans le presse-papiers de vos visiteurs.

Cas d'usage

• Illustrer un tutoriel ou un guide d'installation avec les commandes à exécuter.
• Documenter un script, une requête ou une configuration dans une page de documentation technique.
• Partager un extrait de code que vos collègues copient sans risque d'erreur de saisie.

2. Ajouter le composant à votre page

1. Ouvrez le mode édition de la page SharePoint en cliquant sur Modifier en haut à droite.
2. À l'emplacement souhaité, cliquez sur le bouton « + » pour ouvrir le catalogue de composants.
3. Recherchez ou déroulez le catalogue pour sélectionner Jint - Affichage de code, dans la catégorie « Texte, média et contenu ».
4. Le composant est ajouté à l'emplacement souhaité, avec ses valeurs par défaut.

Un Affichage de code fraîchement inséré porte le titre « Affichage de code » et une zone de saisie vide, qui affiche « Collez ou saisissez votre code ici ». Tant que vous n'avez saisi aucun code, vos visiteurs ne voient pas le composant.

3. Paramétrer le composant

Le panneau de configuration se compose de trois onglets : Design, Contenu et Visibilité. Chaque réglage s'applique immédiatement sur la page.

3.1 Onglet Design

Couleurs du code

Chaque thème a ses propres couleurs de syntaxe : un fond sombre avec un texte clair, ou un fond clair avec un texte foncé.

Apparence

La rubrique Apparence règle le contour, l'ombre et l'arrondi du composant.

Par défaut, le composant suit le thème Jint de votre site : la rubrique affiche « Les valeurs d'apparence viennent du thème. Il se règle dans Jint Portal. » et ses réglages sont désactivés. Cliquez sur Personnaliser pour les modifier. Pour revenir au thème, cliquez sur Réinitialiser depuis le thème.

3.2 Onglet Contenu

Titre

Le titre se saisit et se met en forme directement sur la page (voir la partie 4). Désactivez Afficher le titre pour n'afficher que le bloc de code.

Code

• Langage : le code se colore selon la syntaxe du langage choisi, pendant la saisie comme à la lecture. Choisissez Texte brut pour un contenu sans coloration.
• Taille des tabulations : la largeur d'affichage d'une tabulation saisie dans le code.
• Retour à la ligne automatique : désactivé, une ligne plus large que le bloc défile horizontalement, sans élargir la page. Activé, elle passe à la ligne ; avec les numéros de ligne, une ligne coupée garde un seul numéro.

Le bloc adapte sa hauteur à la longueur du code : il n'a jamais de barre de défilement verticale.

💡 Si la coloration d'un langage n'est pas disponible, le code s'affiche sans couleur, mais reste lisible et copiable.

3.3 Onglet Visibilité

Audience

Activez Audience personnalisée pour réserver le composant à des personnes ou aux membres de groupes Microsoft 365. Seuls les visiteurs choisis, ou membres d'au moins un groupe choisi, le voient. Pour les autres, il ne prend aucune place sur la page.

Affichage

Activez Planifier la visibilité pour limiter l'affichage dans le temps, avec un Début de l'affichage, une Fin de l'affichage, ou les deux. Chaque date apparaît quand vous activez son interrupteur : le début est proposé à l'instant présent, la fin dans 7 jours.

⚠ Si vous activez Audience personnalisée sans choisir personne, plus personne ne voit le composant. La rubrique vous le signale : « Personne ne voit ce composant WebPart : choisissez au moins une personne ou un groupe. »

⚠ Si la fin de l'affichage précède le début, le panneau affiche « La date de fin doit être postérieure à la date de début. » et la planification ne limite pas l'affichage tant que vous ne l'avez pas corrigée.

💡 En mode édition, vous voyez toujours le composant, quelle que soit son audience ou sa planification. Un badge vous le signale : « Audience », ou les dates d'affichage.

4. Saisir le code et le titre sur la page

Le code

Le code se saisit directement sur la page, pas dans le panneau de configuration. Cliquez dans la zone de code, puis saisissez ou collez votre code : il se colore au fil de la frappe.

• Tab insère une tabulation dans le code, sans quitter la zone.
• Entrée ouvre une nouvelle ligne avec l'indentation de la ligne en cours.
• Un texte collé perd sa mise en forme d'origine.
• Le code s'affiche tel que vous l'avez saisi : tabulations, indentation et retours à la ligne compris. Il n'est jamais traduit, même sur une page traduite.

Le titre

Cliquez sur le titre : il devient modifiable et une barre d'outils s'affiche au-dessus de lui. Elle règle le Style de texte (H1 à H4 ou Corps), la Police, la Taille de police, la Couleur du texte, le gras, l'italique, le souligné et l'alignement. Le bouton Réinitialiser la mise en forme rétablit le style d'origine. Cliquez en dehors du titre pour valider.

Par défaut, le titre est en H4, noir, 20 px et gras.

💡 Tant que le composant suit le thème Jint, la barre d'outils du titre affiche à la place le bandeau du thème. Cliquez sur Personnaliser pour mettre le titre en forme.

Le bouton Copier

Vos visiteurs cliquent sur Copier pour copier tout le code, sans les numéros de ligne. Le bouton affiche Copié pendant 2 secondes pour confirmer la copie.

⚠ En mode édition, le bouton Copier est désactivé. Testez la copie sur la page publiée.

5. Bonnes pratiques

Choisir le bon langage

Une coloration juste rend le code bien plus lisible. Pour un contenu qui n'est pas du code, comme une sortie de commande ou un message d'erreur, choisissez Texte brut.

Numéroter les lignes d'un code commenté

Dans un tutoriel qui renvoie à des lignes précises, activez Afficher les numéros de ligne. Vos visiteurs copient le code sans les numéros.

Adapter le retour à la ligne au contenu

Laissez Retour à la ligne automatique désactivé pour du code dont l'indentation compte. Activez-le pour de longues commandes, plus lisibles sur un écran étroit.

Ne pas laisser de bloc vide

Un code qui ne contient que des espaces ou des lignes vides n'est pas considéré comme vide : vos visiteurs voient alors un bloc vide. Supprimez le composant, ou saisissez du code.

6. Ce qui change par rapport à la version précédente

Si vous utilisiez la version précédente du composant (voir l'article Affichage de code) :

• Le code se saisit et se colore directement sur la page.
• Vos visiteurs disposent d'un bouton Copier, qui exclut les numéros de ligne.
• Afficher les numéros de ligne fonctionne de nouveau.
• Nouveaux réglages : Thème du code (Sombre ou Clair), Taille des tabulations, Afficher le bouton de copie et Retour à la ligne automatique.
• La liste des langages évolue : Texte brut, C++, Diff, Go, Java, KQL, Python, SCSS, SQL et YAML font leur entrée ; HTML et XML remplacent Markup. ASP.NET, C-like, git, Less et Sass ne sont plus proposés.
• Le composant peut afficher un titre, mis en forme sur la page.
• Le panneau s'organise en trois onglets, Design, Contenu et Visibilité. L'onglet Visibilité permet de réserver le composant à une audience et d'en planifier l'affichage.
• Tant qu'aucun code n'est saisi, le composant reste invisible pour vos visiteurs.