Articles

Comment intégrer CodePen et JSFiddle dans MadCap Flare

Alors, vous n’avez aucune difficulté à utiliser des exemples de code dans votre documentation. Peut-être même que vous avez lu notre article qui explique comment insérer des blocs de code dans Flare avec Prism.js. Et maintenant que vous avez goûté aux fonctionnalités qui peuvent transformer du code ennuyant en code époustouflant, avez-vous une envie soudaine et irrépressible de passer au niveau supérieur en tant que rédacteur technique pour des logiciels?

Les blocs de code classiques représentent une excellente solution pour afficher quelques lignes d’un code simple, mais sont beaucoup moins utiles quand vous devez montrer en même temps du code HTML, CSS et JavaScript. Les lignes de code peuvent rapidement s’additionner et votre utilisateur peut se retrouver à faire défiler du code à l’infini si vous vous résignez à utiliser un bloc de code après l’autre.

Il y aurait donc une façon plus élégante de présenter différents langages de code dans Flare?

Bien sûr! Vous pouvez mettre votre code dans CodePen ou JSFiddle pour en faire un joli petit paquet dans un gadget logiciel (un widget!) interactif intégrable. Si vous n’avez pas encore utilisé l’un de ces outils (ou un autre outil du même genre), disons qu’ils consituent de véritables terrains de jeu pour le développement en ligne qui vous permettent de voir vos codes HTML, CSS et JS simultanément, et en même temps que le résultat final :

Ce sont non seulement de super outils à utiliser pour votre propre codage en ligne mais en plus, intégrer des Pens et des Fiddles directement dans Flare peut vraiment améliorer votre documentation. Que vos utilisateurs débutent dans le codage ou qu’ils soient des maîtres de la programmation, ce style de présentation dynamique peut réellement les aider à mieux comprendre (et en plus, ça a vraiment de la classe).

Ça me tente d’essayer! Mais est-ce que je devrais utiliser CodePen ou JSFiddle?

Côté pratico-pratique, les deux outils sont très semblables. Si vous n’avez aucune expérience avec l’un ou l’autre, le mieux serait d’essayer les deux et de voir quelle interface vous préférez. Une des principales différences est que CodePen exécute votre code automatiquement, tandis qu’avec JSFiddle, vous devez appuyer sur un bouton. Pour le reste, tout est une question d’esthétique et de préférences personnelles.

Si vous avez l’esprit d’aventure, vous pouvez aussi essayer d’autres outils semblables — CodePen et JSFiddle ne sont que deux des options les plus populaires parmi une multitude de choix.

Je suis prêt à commencer. Comment est-ce que je peux intégrer mon code avec CodePen?

Vous n’avez qu’à suivre ces étapes :

1. Allez à codepen.io.
2. Connectez-vous à votre compte CodePen, si vous en avez un, ou créez un nouveau compte en cliquant sur Sign Up.
   
3. Dans la section CREATE de la barre latérale, cliquez sur Pen pour créer un nouveau Pen.
   
4. Dans la page qui s’ouvre, entrez votre code HTML, CSS ou JS. Votre code sera automatiquement exécuté et vous pourrez voir le résultat en temps réel.
   
5. Quand vous avez fini de jouer avec votre code, cliquez sur Save.
6. Pour obtenir le code dont vous avez besoin pour intégrer votre Pen, cliquez sur Embed dans le coin inférieur droit.
   
7. Modifiez les paramètres au besoin.
   

   Conseil : Si vous avez un compte Pro dans CodePen, vous pouvez cocher la case Make code editable pour permettre à d’autres de s’amuser avec votre code et de voir les résultats. Comme cela, vous rendrez votre documentation beaucoup plus cool et vous ferez le bonheur des développeurs!

8. Dans la section Copy & Paste Code, assurez-vous que l’onglet HTML est sélectionné.
   
9. Copiez le code.
10. Dans MadCap Flare, ouvrez la rubrique dans laquelle vous voulez intégrer votre Pen et affichez-la dans l’Éditeur de texte.
    
11. Collez le code, et ne paniquez pas quand Flare vous avertira que la ligne contenant la balise <script> contient un jeton inattendu. Cela se produit parce que l’attribut async doit prendre une valeur pour être considéré comme du code XHTML valide.
    
12. Pour faire disparaître l’avertissement, remplacez <script async src= par <script async="async" src=.
    
13. Sauvegardez vos modifications, publiez votre projet et admirez votre Pen intégré!
    

Comment est-ce que je peux intégrer mon code avec JSFiddle?

Nous vous montrerons comment faire, étape par étape :

1. Allez à jsfiddle.net.

   Conseil : Si vous démarrez une session avec un profil JSFiddle existant ou que vous en créez un, vous pourrez sauvegarder le Fiddle que vous aurez complété dans votre compte et le supprimer par après. Cela étant dit, ce ne sera pas nécessaire pour ce que nous voulons faire, dans la mesure où ça ne vous dérange pas que votre Fiddle soit public.

2. Dans la page qui s’ouvre, entrez votre code HTML, CSS ou JS.
   
3. Pour essayer d’exécuter votre code, cliquez sur Run.
   
4. Quand vous avez fini d’élaborer votre code, cliquez sur Save. Dans la bulle qui s’affiche, lisez l’avertissement et cliquez sur Save fiddle.
   
5. Rafraîchissez la page.
6. Cliquez sur Embed pour afficher le code qui intégrera votre Fiddle.
   
7. Modifiez les paramètres au besoin.
   
8. Dans la section Embed snippet, cliquez sur Prefer iframe? (c’est ce format qui fonctionne le mieux avec MadCap Flare).
   
9. Copiez le code.
   
10. Dans MadCap Flare, ouvrez la rubrique dans laquelle vous voulez intégrer votre Fiddle et affichez-la dans l’Éditeur de texte.
    
11. Collez le code, et ne vous en faites pas si Flare se plaint que la ligne où se trouve la balise <iframe> contient un jeton inattendu.
    
12. Supprimez les attributs allowfullscreen et allowpaymentrequest. Pour faire une histoire courte, Flare n’aime pas beaucoup ces attributs et ils ne sont pas nécessaires pour que votre Fiddle fonctionne. En plus de vous débarrasser de cet agaçant avertissement, cela rendra votre code plus propre.
    
13. Sauvegardez vos modifications, publiez votre projet et admirez votre Fiddle intégré!