Comment ajouter une coloration syntaxique au code source dans Google Docs

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 éditeur et s'en tiennent à ce programme. L'une des raisons à cela est qu'un bon éditeur de codage inclut la coloration syntaxique, une fonctionnalité qui formate le code source et attribue des polices et des couleurs aux mots-clés et aux constructions dans le code pour le rendre beaucoup plus facile à lire. Les éditeurs de texte tels que Notepad ++, qui sont traités dans ce Guide Tech Junkie , sont favorisés par les développeurs pour cette raison. La plupart des développeurs ne considèrent pas Google Docs comme un éditeur de codage potentiel, malgré ses excellentes fonctionnalités de groupe de travail et son intégration dans le cloud, car il n'inclut pas d'options intégrées de mise en évidence de la syntaxe.

Cependant, vous pouvez ajouter une coloration syntaxique au code dans les documents Google Doc. Il existe en fait au moins quelques modules complémentaires pour Docs qui vous permettent de formater divers langages de programmation et de balisage avec mise en évidence de la syntaxe. Il existe également de nombreuses applications Web que vous pouvez utiliser pour insérer du code source avec surbrillance dans Google Docs. Dans cet article, je vais vous montrer comment ajouter une mise en évidence de la syntaxe du code source à vos documents Docs.

Formater le code source avec Code Pretty

Code Pretty est un module complémentaire pour Google Docs qui ajoute automatiquement une surbrillance au code sélectionné. Code Pretty n'inclut pas une énorme quantité de paramètres pour personnaliser la mise en forme de la syntaxe, mais il ajoute toujours une option de mise en évidence de la syntaxe pratique à Docs. Vous pouvez ajouter CP à Docs en cliquant sur le boutonFr eebouton allumé cette page Web . Appuyez ensuite sur laPermettrebouton 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 inclura désormais le module complémentaire Code Pretty. Pour vous donner un exemple de la façon dont ce module complémentaire met en évidence 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 modifie l'attribut src (source) d'une image.

Allume la lumière

Éteindre la lumière

Collez cet exemple JavaScript dans Docs en appuyant sur Ctrl + V. Sélectionnez ensuite le code dans le traitement de texte avec le curseur. Cliquez surModules complémentaires>Code joliet sélectionnez leSélection de formatoption du sous-menu. Cela formatera le JavaScript comme indiqué dans l'instantané directement ci-dessous.

discordia cómo compartir pantalla en un servidor

Comme indiqué, CP n'inclut pas beaucoup de paramètres pour la coloration syntaxique. Cependant, vous pouvez ajuster la taille de la police du code en surbrillance en cliquant surModules complémentaires>Code jolietParamètres. Cela ouvrira la barre latérale montrée directement 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

Code Blocks est un module complémentaire alternatif à CP que vous pouvez ajouter à Docs. Il s'agit en fait d'un module complémentaire légèrement meilleur pour mettre en évidence la syntaxe, car il comprend de nombreux thèmes de mise en évidence. appuie sur leLibérerbouton allumé cette page du site pour ajouter des blocs de code à Docs.

Une fois les blocs de code installés, ouvrez Docs et copiez et collez le même code JavaScript ci-dessus dans le traitement de texte qu'auparavant. Cliquez surModules complémentaires>Blocs de codeet sélectionnezDémarrerpour ouvrir la barre latérale montrée dans la photo directement 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électionnerJavaScriptdans le premier menu déroulant. Ensuite, vous pouvez également sélectionner un thème dans leThèmemenu déroulant. appuie sur leFormatbouton pour ajouter la coloration syntaxique au code comme indiqué ci-dessous. Maintenant, le texte JavaScript est beaucoup plus clair avec ses balises de balisage mises en évidence.

Copiez et collez le code source en surbrillance dans Google Docs

Outre les blocs de code et Code Pretty Docs, vous pouvez également utiliser des applications Web de surligneur de syntaxe pour formater le code source. Ensuite, vous pouvez copier et coller le code source en surbrillance à partir d'une application Web dans votre document Docs. Textmate est une application Web de surligneur de syntaxe 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 cet article dans la zone de code source de Textmate avec les touches de raccourci Ctrl + C et Ctrl + V. SélectionnerJavaScriptdans le menu déroulant Langue. Sélectionnez un thème de surbrillance de la syntaxe dans le menu déroulant Thème. appuie sur leSurlignerbouton pour obtenir un aperçu de la mise en forme du code source comme indiqué dans l'instantané directement ci-dessous.

Ensuite, sélectionnez le code JavaScript en surbrillance dans l'aperçu avec le curseur et appuyez sur Ctrl + C. Collez le code en surbrillance dans Google Docs en appuyant sur Ctrl + V. Cela ajoutera le code source JavaScript en surbrillance au document Docs, comme indiqué directement ci-dessous.

Ainsi, vous n'avez pas besoin d'un éditeur de texte de bureau pour ajouter une coloration syntaxique au code du logiciel et du site Web. Au lieu de cela, vous pouvez mettre en évidence le code de syntaxe dans les documents Docs avec les extensions Code Pretty et Code Blocks. Vous pouvez également copier et coller votre code vers et depuis l'application Web Textmate pour insérer le code source avec surbrillance dans Google Docs.

Avez-vous d'autres moyens d'ajouter la mise en forme de la syntaxe à Google Docs ? Partagez-les avec nous ci-dessous!