Documentation de référence sur Markdown pour les tutoriels

Les tutoriels Cloud Shell, faciles à configurer et à lancer, aident les utilisateurs à se familiariser rapidement et efficacement avec votre projet. Un tutoriel Cloud Shell est un ensemble d'instructions écrites au format CommonMark. Il peut également inclure des instructions, c'est-à-dire des expressions Markdown spécifiques aux tutoriels permettant d'ajouter des fonctionnalités avancées (effets de surbrillance, sélection de projets, etc.).

Reportez-vous au guide de rédaction de tutoriels pour découvrir comment configurer, concevoir et démarrer un tutoriel dans Cloud Shell.

Format des instructions

Pour ajouter une instruction, utilisez le format suivant :

<walkthrough-directive-name param-name="param-value">
</walkthrough-directive-name>

Instructions Cloud Shell

Les tableaux ci-dessous répertorient les instructions, ainsi que leurs paramètres respectifs, disponibles pour la création d'un tutoriel Cloud Shell.

Métadonnées et mise en page du tutoriel

Auteur

Le tag "author" définit les métadonnées sur l'auteur. Tous les paramètres sont facultatifs.

author Crée des métadonnées concernant l'auteur du tutoriel.
name Nom de l'auteur.
repositoryUrl Lien vers le dépôt utilisé pour les commentaires.
tutorialName ID du tutoriel.

Durée du tutoriel

Le tag "tutorial-duration" affiche une icône d’horloge et un message indiquant la durée nécessaire pour compléter le tutoriel.

tutorial-duration Affiche la durée du tutoriel.
duration Durée estimée du tutoriel en minutes.

Fiche de tutoriel

Le tag "tutorial-card" renvoie à un autre tutoriel suggéré.

tutorial-card Affiche un tutoriel suggéré.
url URL du tutoriel.
icon Nom de l'icône.
label Libellé pour l'analyse des événements de clic.

Note de bas de page

L'instruction "footnote" définit le texte concerné comme une note de bas de page qui sera affichée au bas de l'étape.

Le texte de la note de bas de page est écrit en innertext.

footnote Affiche le texte sous forme de note de bas de page.

Sélection de projet

Configuration du projet

Le composant "project-setup" aide l'utilisateur à créer ou à sélectionner un projet sur lequel travailler. Il ne pourra pas continuer jusqu'à ce qu'un projet valide soit sélectionné.

Le tag "permissions" définit les autorisations de projet requises pour le tutoriel. Si l'utilisateur ne dispose pas des autorisations nécessaires pour le projet sélectionné, ce dernier ne sera pas considéré comme étant valide.

Consultez la documentation pour en savoir plus sur le fonctionnement des autorisations de projet.

project-setup Remplace l'étape de configuration du projet.
permissions (Facultatif) Liste des autorisations requises, séparées par une virgule.

Configuration du projet et de la facturation

Le composant "project-billing-setup" aide l'utilisateur à créer ou à sélectionner un projet sur lequel travailler. Il ne pourra pas continuer jusqu'à ce qu'un projet valide soit sélectionné.

project-billing-setup Remplace l'étape de configuration du projet avec facturation obligatoire.
permissions (Facultatif) Liste des autorisations requises, séparées par une virgule.

Effets de surbrillance et boutons

Pointeur de mise en surbrillance

L'instruction "spotlight-pointer" crée une zone cliquable qui met en surbrillance l'élément d'interface utilisateur spécifié à l'écran. Un seul des paramètres est nécessaire. Si les deux sont fournis, l'ID spotlightId sera utilisé.

Cet effet peut s'appliquer à un élément à l'aide de l'ID d'instrumentation, qui est une propriété de l'élément DOM, ou à l'aide d'un sélecteur CSS. Les deux types de sélecteurs séparés par des virgules permettent de sélectionner des éléments. Tous les éléments correspondant au sélecteur seront mis en surbrillance.

Le texte du libellé est écrit en innertext.

spotlight-pointer Crée un effet de surbrillance.
spotlightId ID d'instrumentation. Utilisez des virgules pour séparer plusieurs identifiants.
cssSelector Sélecteur CSS.
Cibles de l'effet de surbrillance de la console GCP Description
console-nav-menu Menu de navigation de la console, le hamburger en haut à gauche.
devshell-activate-button Bouton permettant d'ouvrir Cloud Shell, en haut à droite.
devshell-web-editor-button Bouton permettant d'ouvrir l'éditeur Orion, dans la barre supérieure de Cloud Shell.
devshell-web-preview-button Bouton permettant d'ouvrir Ouvre une fenêtre d'aperçu sur le Web pour Cloud Shell.

Activer des API

Le composant "enable-apis" crée un bouton qui active des API lorsque l'utilisateur clique dessus. Cela permet à votre projet d'accéder à l'ensemble des API GCP.

Consultez la documentation pour connaître les API que vous pouvez activer.

enable-apis Affiche un composant permettant d'activer des API.
apis Liste des API à activer, séparées par une virgule.

Ouvrir Cloud Shell

Le composant "open-cloud-shell-button" crée un bouton qui ouvre Cloud Shell lorsque l'utilisateur clique dessus.

open-cloud-shell-button Affiche un composant permettant d'ouvrir Cloud Shell avec le projet en cours sélectionné.
open-cloud-shell Ouvre Cloud Shell lorsque l'étape parente est affichée.
devshell-precreate Provisionne une instance Cloud Shell en arrière-plan pour accélérer le chargement. S'exécute lorsque l'étape est affichée.

Variables dynamiques

Liaison de données

Les tutoriels permettent la liaison de données pour les paires clé/valeur. Les valeurs sont définies par des instructions ou par le framework du tutoriel. Elles peuvent être définies dans la session du tutoriel à l'aide de l'instruction watcher-constant.

La valeur de chaîne peut ensuite être référencée comme suit :

{{<key>}}

Exemple d'utilisation dans Markdown :

# My Tutorial

## Step 1

<walkthrough-watcher-constant key="my-key" value="Hello Google">
</walkthrough-watcher-constant>

My message: {{my-key}}

Des clés intégrées sont disponibles :

Nom de la donnée Description de la valeur
project-id ID du projet actuel de l'utilisateur.
project-name Nom du projet de l'utilisateur.

Observateur d'état

Un observateur est une chaîne dynamique pouvant être définie pour un tutoriel. Un observateur d'état définit la valeur au début du tutoriel. Consultez la section relative à la liaison de données pour plus d'informations.

watcher-constant Définit une valeur de chaîne au moment du rendu.
key Clé de l'observateur.
value Valeur de l'observateur.

Instructions d'icônes

Les icônes suivantes sont conçues comme des icônes intégrées au texte.

Instruction Icône
cloud-shell-icon Icône Cloud Shell
web-preview-icon Icône "Aperçu sur le Web"
cloud-shell-editor-icon Icône "Éditeur Cloud Shell"
nav-menu-icon Icône du menu de navigation
notification-menu-icon Icône du menu de notification
pin-section-icon Icône pour épingler une section de menu

L'icône suivante est mise en forme en tant qu'image.

Instruction Icône
conclusion-trophy Trophée d'achèvement

Instructions de l'éditeur Cloud Shell

La page de l'éditeur Cloud Shell accepte les instructions.

Ouvrir un fichier

L'instruction "editor-open-file" crée une zone cliquable permettant d'ouvrir un fichier à partir du disque Cloud Shell.

Le texte du libellé est écrit en innertext.

editor-open-file Ouvre un fichier Cloud Shell dans l'éditeur.
filePath Chemin de fichier relatif.

Sélectionner du texte

L'instruction "editor-select-line" crée un libellé cliquable permettant d'ouvrir un fichier et de sélectionner le texte qu'il contient.

editor-select-line Sélectionne le texte spécifié dans l'éditeur.
filePath Chemin de fichier relatif.
startLine Ligne de début.
startCharacterOffset Index de début.
endLine Ligne de fin.
endCharacterOffset Index de fin.
editor-select-regex Sélectionne le texte spécifié dans l'éditeur.
filePath Chemin de fichier relatif.
regex Expression régulière correspondante.

Le texte du libellé est écrit en innertext.

Pointeur de mise en surbrillance

L'instruction "editor-spotlight" crée une zone cliquable qui met en surbrillance l'élément d'interface utilisateur spécifié à l'écran.

Cet effet de surbrillance ne peut sélectionner que des cibles prédéfinies.

editor-spotlight Met en surbrillance une cible prédéfinie.
spotlightId ID éditeur

Le texte du libellé est écrit en innertext.

Cibles de l'effet de surbrillance dans l'éditeur Description
fileMenu Met en surbrillance le bouton du menu "Fichier".
editMenu Met en surbrillance le bouton du menu "Édition".
navigator Met en surbrillance un fichier spécifié dans le champ d'élément.
Cette page vous a-t-elle été utile ? Évaluez-la :

Envoyer des commentaires concernant…