Cómo agregar resaltado de sintaxis al código fuente en Google Docs

Los desarrolladores y programadores han usado durante mucho tiempo editores de texto como la forma principal de ingresar código de computadora. Algunos entornos de desarrollo tienen sus propios editores integrados, pero los desarrolladores suelen preferir un editor y se apegan a ese programa. Una razón para esto es que un buen editor de codificación incluye resaltado de sintaxis, una función que formatea el código fuente y asigna fuentes y colores a las palabras clave y construcciones dentro del código para que sea mucho más fácil de leer. Editores de texto como Notepad ++, que se tratan en este Guía de adictos a la tecnología, son favorecidos por los desarrolladores por este motivo. La mayoría de los desarrolladores no ven a Google Docs como un editor de codificación potencial, a pesar de sus excelentes funciones para grupos de trabajo y la integración en la nube, porque no incluye opciones integradas de resaltado de sintaxis.

Cómo agregar resaltado de sintaxis al código fuente en Google Docs

Sin embargo, puede agregar resaltado de sintaxis al código en documentos de Google Doc. De hecho, hay al menos un par de complementos para Docs que le permiten formatear varios lenguajes de programación y marcado con resaltado de sintaxis. También existen numerosas aplicaciones web que puede utilizar para insertar código fuente resaltado en Google Docs. En este artículo, le mostraré cómo agregar resaltado de sintaxis de código fuente a sus documentos de Docs.

Formatea el código fuente con Code Pretty

Code Pretty es un complemento para Google Docs que agrega automáticamente resaltado al código seleccionado. Code Pretty no incluye una gran cantidad de configuraciones para personalizar el formato de sintaxis, pero aún agrega una práctica opción de resaltado de sintaxis a Docs. Puede agregar CP a Docs haciendo clic en el botón Gratis en esta página web. Luego presione el botón Permitir para confirmar los permisos para el complemento.

A continuación, abra Docs en su navegador; y haga clic en la pestaña Complementos para abrir su menú. Ese menú ahora incluirá el complemento Code Pretty. Para darle un ejemplo de cómo este complemento resalta la sintaxis, seleccione y copie el código JavaScript de muestra a continuación en un documento de Docs presionando Ctrl + C.



¿Qué puede hacer JavaScript?

JavaScript puede cambiar los atributos HTML.

En este caso, JavaScript cambia el atributo src (fuente) de una imagen.


Pegue esa muestra de JavaScript en Docs presionando Ctrl + V. Luego, seleccione el código en el procesador de textos con el cursor. Haz clic en Add-ons > Code Pretty y selecciona la opción Format Selection del submenú. Eso formateará el JavaScript como se muestra en la instantánea directamente debajo.

1673570704 275 Como agregar resaltado de sintaxis al codigo fuente en Google

Como se indicó, CP no incluye muchas configuraciones para el resaltado de sintaxis. Sin embargo, puede ajustar el tamaño de fuente del código resaltado haciendo clic en Complementos > Código bonito y configuración. Eso abrirá la barra lateral que se muestra directamente debajo. Luego puede seleccionar un tamaño de fuente predeterminado alternativo para el código resaltado desde allí.

1673570704 247 Como agregar resaltado de sintaxis al codigo fuente en Google

Dar formato al código fuente con bloques de código

Code Blocks es un complemento alternativo a CP que puede agregar a Docs. Este es en realidad un complemento ligeramente mejor para resaltar la sintaxis, ya que incluye numerosos temas de resaltado. Presione el botón Gratis en esta página del sitio web para agregar bloques de código a Documentos.

Cuando haya instalado Code Blocks, abra Docs y copie y pegue el mismo código JavaScript anterior en el procesador de textos como antes. Haga clic en Complementos > Bloques de código y seleccione Iniciar para abrir la barra lateral que se muestra en la captura directamente debajo.

1673570705 211 Como agregar resaltado de sintaxis al codigo fuente en Google

Seleccione solo el texto de JavaScript con el cursor. Asegúrese de no seleccionar ningún espacio de documento vacío encima o debajo del código. Seleccione JavaScript en el primer menú desplegable. Luego, también puede seleccionar un tema del menú desplegable Tema. Presione el botón Formato para agregar el resaltado de sintaxis al código como se muestra a continuación. Ahora el texto de JavaScript es mucho más claro con sus etiquetas de marcado resaltadas.

1673570705 672 Como agregar resaltado de sintaxis al codigo fuente en Google

Copie y pegue el código fuente resaltado en Google Docs

Además de Code Blocks y Code Pretty Docs, también puede utilizar aplicaciones web de resaltado de sintaxis para formatear el código fuente. Luego, puede copiar y pegar el código fuente resaltado de una aplicación web nuevamente en su documento de Docs. Textmate es una aplicación web de resaltado de sintaxis que da formato a numerosos lenguajes de programación y marcado.

Hacer clic este hipervínculo para abrir Textmate. Luego copie y pegue el texto de JavaScript incluido en esta publicación en el cuadro de código fuente de Textmate con las teclas de acceso rápido Ctrl + C y Ctrl + V. Seleccione JavaScript en el menú desplegable Idioma. Seleccione un tema de resaltado de sintaxis en el menú desplegable Tema. Presione el botón Resaltar para obtener una vista previa del formato del código fuente como se muestra en la instantánea directamente debajo.

1673570705 682 Como agregar resaltado de sintaxis al codigo fuente en Google

A continuación, seleccione el JavaScript resaltado en la vista previa con el cursor y presione Ctrl + C. Pegue el código resaltado en Google Docs presionando Ctrl + V. Eso agregará el código fuente de JavaScript resaltado al documento de Docs como se muestra directamente a continuación.

1673570706 339 Como agregar resaltado de sintaxis al codigo fuente en Google

Por lo tanto, no necesita un editor de texto de escritorio para agregar resaltado de sintaxis al software y al código del sitio web. En su lugar, puede resaltar el código de sintaxis en los documentos de Docs con las extensiones Code Pretty y Code Blocks. Alternativamente, copie y pegue su código hacia y desde la aplicación web Textmate para insertar el código fuente resaltado en Google Docs.

¿Tiene alguna otra forma de agregar formato de sintaxis a Google Docs? ¡Compártelos con nosotros a continuación!