Les développeurs et les programmeurs utilisent depuis longtemps les éditeurs de texte comme principal moyen de saisir du code informatique. Certains environnements de développement ont leurs propres éditeurs intégrés, mais les développeurs aiment généralement un seul éditeur et s'en tiennent à ce programme. Une bonne raison à cela est qu’un bon éditeur de codage inclut la coloration syntaxique, une fonctionnalité qui formate le code source et assigne les polices et les couleurs aux mots-clés et aux constructions du code pour en faciliter la lecture. Les éditeurs de texte tels que Notepad ++, décrits dans ce guide Tech Junkie, sont préférés des développeurs pour cette raison. La plupart des développeurs ne considèrent pas Google Docs comme un éditeur de code potentiel, en dépit de ses fonctionnalités de groupe de travail et de son intégration dans le cloud, car il n'inclut pas d'options de surbrillance de la syntaxe intégrées.
Toutefois, vous pouvez ajouter une coloration syntaxique au code dans les documents Google Doc. En fait, il existe au moins deux modules complémentaires pour Docs qui vous permettent de formater divers langages de programmation et de balisage avec la coloration syntaxique. Il existe également de nombreuses applications Web que vous pouvez utiliser pour insérer du code source en surbrillance dans Google Docs. Je vais vous montrer comment ajouter la syntaxe de code source en surbrillance à vos documents Docs.
Formater le code source avec Code Pretty
Code Pretty est un module complémentaire pour Google Documents qui ajoute automatiquement la surbrillance au code sélectionné. Code Pretty n'inclut pas une quantité énorme de paramètres pour personnaliser la mise en forme de la syntaxe, mais il ajoute une option pratique de mise en évidence de la syntaxe à Docs. Vous pouvez ajouter CP à Docs en cliquant sur le bouton Free de cette page Web. Appuyez ensuite sur le bouton Autoriser pour confirmer les autorisations pour le module complémentaire.
Ensuite, ouvrez Docs dans votre navigateur. et cliquez sur l'onglet Modules complémentaires pour ouvrir son menu. Ce menu va maintenant inclure le complément Code Pretty. Pour vous donner un exemple de la manière dont ce module complémentaire met en surbrillance la syntaxe, sélectionnez et copiez l'exemple de code JavaScript ci-dessous dans un document Docs en appuyant sur Ctrl + C.
Que peut faire JavaScript?
JavaScript peut modifier les attributs HTML.
Dans ce cas, JavaScript change l'attribut src (source) d'une image.
Collez cet échantillon JavaScript dans Docs en appuyant sur Ctrl + V. Sélectionnez ensuite le code dans le traitement de texte avec le curseur. Cliquez sur Modules complémentaires > Code Pretty et sélectionnez l'option Formater la sélection dans le sous-menu. Cela formatera le JavaScript comme indiqué dans l'instantané ci-dessous.
Comme indiqué, le CP n'inclut pas beaucoup de paramètres pour la coloration syntaxique. Toutefois, vous pouvez ajuster la taille de la police du code en surbrillance en cliquant sur Modules complémentaires > Code Pretty et sur Paramètres . Cela ouvrira la barre latérale indiquée ci-dessous. Ensuite, vous pouvez sélectionner une autre taille de police par défaut pour le code en surbrillance à partir de là.
Formater le code source avec des blocs de code
Les blocs de code sont une alternative au CP que vous pouvez ajouter à Docs. Ceci est en fait un complément légèrement meilleur pour mettre en évidence la syntaxe car il inclut de nombreux thèmes de surbrillance. Appuyez sur le bouton Libre de la page de ce site Web pour ajouter des blocs de code à Docs.
Une fois que vous avez installé les blocs de code, ouvrez Docs, puis copiez et collez le même code JavaScript que ci-dessus dans le traitement de texte. Cliquez sur Modules complémentaires > Blocs de code et sélectionnez Démarrer pour ouvrir la barre latérale illustrée ci-dessous.
Sélectionnez uniquement le texte JavaScript avec votre curseur. Assurez-vous de ne sélectionner aucun espace de document vide au-dessus ou en dessous du code. Sélectionnez JavaScript dans le premier menu déroulant. Ensuite, vous pouvez également sélectionner un thème dans le menu déroulant Thème . Appuyez sur le bouton Format pour ajouter la syntaxe en surbrillance au code, comme indiqué ci-dessous. Maintenant, le texte JavaScript est beaucoup plus clair avec ses balises de marquage en surbrillance.
Copier et coller le code source en surbrillance dans Google Docs
Outre les blocs de code et Code Pretty Docs, vous pouvez également utiliser des applications Web surligneur de syntaxe pour formater le code source. Vous pouvez ensuite copier et coller le code source en surbrillance à partir d’une application Web dans votre document Docs. Textmate est une application web de surligneur syntaxique qui formate de nombreux langages de programmation et de balisage.
Cliquez sur ce lien hypertexte pour ouvrir Textmate. Ensuite, copiez et collez le texte JavaScript inclus dans ce message dans la zone de code source de Textmate à l’aide des touches de raccourci Ctrl + C et Ctrl + V. Sélectionnez JavaScript dans le menu déroulant Langue. Sélectionnez un thème en surbrillance dans le menu déroulant Thème. Appuyez sur le bouton Highlight pour obtenir un aperçu de la mise en forme du code source, comme indiqué dans l’instantané ci-dessous.
Ensuite, sélectionnez le code JavaScript en surbrillance dans l'aperçu avec le curseur, puis appuyez sur Ctrl + C. Collez le code en surbrillance dans Google Documents en appuyant sur Ctrl + V. Le code source JavaScript en surbrillance sera ajouté au document Docs, comme indiqué ci-dessous.
Vous n'avez donc pas besoin d'un éditeur de texte pour ajouter de la syntaxe au code du logiciel et du site Web. Au lieu de cela, vous pouvez mettre en surbrillance le code de syntaxe dans les documents Docs avec les extensions Code Pretty et Code Blocks. Vous pouvez également copier et coller votre code dans et depuis l'application Web Textmate pour insérer du code source en surbrillance dans Google Docs.
Avez-vous d'autres moyens d'ajouter un format de syntaxe à Google Docs? Partagez-les avec nous ci-dessous!
