Principal Google Docs Comment ajouter une coloration syntaxique au code source dans Google Docs

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.

Comment ajouter une coloration syntaxique au code source dans Google Docs

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!

Des Articles Intéressants

Choix De L'Éditeur

Rechercher des minuteries de réveil dans Windows 10
Rechercher des minuteries de réveil dans Windows 10
Voyons comment trouver des minuteries de réveil actives dans Windows 10 capables de sortir l'ordinateur du mode veille. Nous utiliserons l'application powercfg pour cela.
Supprimer l'entrée du menu de démarrage dans Windows 10
Supprimer l'entrée du menu de démarrage dans Windows 10
Comment supprimer une entrée du menu de démarrage dans Windows 10 Avec Windows 8, Microsoft a apporté des modifications à l'expérience de démarrage. Le chargeur de démarrage basé sur du texte simple est maintenant désactivé par défaut et à sa place, il y a une interface utilisateur graphique tactile avec des icônes et du texte. Windows 10 a cela aussi. Les utilisateurs peuvent gérer les
Le voyage de FIFA 17: imparfait, mais EA pourrait être sur quelque chose de vraiment spécial s'il s'y tenait
Le voyage de FIFA 17: imparfait, mais EA pourrait être sur quelque chose de vraiment spécial s'il s'y tenait
Avec la nouvelle que FIFA 18 verra le retour de The Journey, cela m'a semblé être le bon moment pour revisiter mon expérience avec la saison 1. Malheureusement, la prochaine saison continuera l'histoire d'Alex Hunter - ce qui est bien, mais
Correction: l'application Windows 10 Sticky Notes ne synchronise pas les notes
Correction: l'application Windows 10 Sticky Notes ne synchronise pas les notes
Voici les solutions que vous pouvez essayer si la fonction de synchronisation ne fonctionne pas correctement dans l'application moderne Sticky Notes pour Windows 10.
Comment modifier les paramètres de votre
Comment modifier les paramètres de votre
Personnalisez votre Apple Watch en apprenant à accéder et à modifier divers paramètres, notamment la luminosité, le son, divers modes d'économie d'énergie, etc.
Comment réparer l'erreur 'Aucun périphérique de sortie audio n'est installé' dans Windows 10
Comment réparer l'erreur 'Aucun périphérique de sortie audio n'est installé' dans Windows 10
Vous êtes prêt à lire le dernier remix que vous venez de télécharger, mais lorsque vous cliquez sur lecture, Windows 10 vous donne le redoutable
Pourquoi la batterie de votre ordinateur portable se vide-t-elle si vite ? 17 façons de réparer
Pourquoi la batterie de votre ordinateur portable se vide-t-elle si vite ? 17 façons de réparer
Impossible de désactiver les annonces automatiques par programmation sur la page, alors nous y sommes !