Texto de código

El texto de código muestra código fuente en el tablero, en una caja que editas como en un editor de programación:

• Resaltado: resalta la sintaxis de su lenguaje y puede mostrar números de línea, ajustar las líneas largas y plegar bloques.
• Editor: se edita en un editor de código con emparejado de paréntesis, sangría automática, autocompletado y comprobación de sintaxis.
• Caja fija: el código se desplaza dentro de ella en lugar de reajustar la caja.

Crear texto de código

Las dos formas dejan la caja en modo edición, con resaltado de JavaScript hasta que elijas un lenguaje, y con la herramienta de selección activa de nuevo cuando terminas.

Crear una caja con el tamaño por defecto

Una caja colocada con un clic, con el tamaño estándar.

• Operación:
  1. Elige Texto de código en el panel de herramientas.
  2. Haz clic donde deba ir la caja.
  3. Escribe o pega el código y haz clic en el tablero vacío para terminar.
• Resultado: una caja con el tamaño por defecto, en modo edición. Una caja vacía se queda en el tablero.
• Consejo: pegar un fragmento de código en el tablero sin nada seleccionado también crea un texto de código para él, con el lenguaje detectado a partir del código.

Crear una caja con un tamaño personalizado

Una caja dimensionada a mano desde el principio.

• Operación:
  1. Elige Texto de código en el panel de herramientas.
  2. Arrastra para dibujar la caja que ocupará el código.
  3. Escribe o pega el código y haz clic en el tablero vacío para terminar.
• Resultado: una caja con el tamaño que has arrastrado, en modo edición. El código que no cabe se desplaza dentro de la caja.
• Consejo: el tamaño puede cambiarse después con los tiradores. Consulta Dimensionar.

Editar

Cambia el código con la ayuda de un editor de código real.

• Operación:
  1. Empieza a editar. Cómo hacerlo depende de si la caja ya está seleccionada:
     • Si la caja está seleccionada, haz clic en ella de nuevo, o haz clic en Entrar en modo edición en el panel de acciones.
     • Si la caja no está seleccionada, haz doble clic en ella.
  2. Escribe o pega el código.
  3. Haz clic en el tablero vacío para terminar.
• Resultado: la caja conserva el código tal como lo escribiste, con su resaltado.

Ayudas al escribir

• La sintaxis se resalta según el lenguaje elegido.
• Los paréntesis emparejados se resaltan, y los de cierre se añaden al escribir los de apertura.
• Las líneas nuevas siguen la sangría del lenguaje.
• El autocompletado sugiere mientras escribes.
• Las demás apariciones del texto seleccionado se resaltan.

Plegar bloques

• Los bloques se pliegan y despliegan desde el margen.
• Los bloques plegados se conservan con el elemento, así que el tablero muestra lo que dejaste visible.

Errores de sintaxis

Los errores de sintaxis se marcan en el margen y en el código.

Dimensionar

Los tiradores alrededor de una caja seleccionada redimensionan la caja, nunca el código.

• Cualquier tirador cambia el ancho y el alto de la caja.
  • El código conserva su tamaño. Lo fija el Tamaño de fuente de Estilo de texto.
  • El código que no cabe se desplaza dentro de la caja.

Ajustar líneas y desplazarse

• Ajuste en la sección Código ajusta las líneas largas en lugar de desplazarlas hacia los lados.
• Mientras editas, la rueda desplaza el código dentro de la caja. El elemento conserva esa posición de desplazamiento.

Atributos

El texto de código seleccionado muestra estas secciones del panel de atributos.

Información de la selección

Los atributos que afectan al elemento en su conjunto.

• X: la posición horizontal del pivote del elemento. Dentro de un marco, se mide desde el marco.
• Y: la posición vertical del pivote, también medida desde el marco dentro de uno. Hacia dónde crece depende de la dirección del eje Y de los ajustes de interfaz.
• W: el ancho del elemento.
• H: el alto del elemento.
• Rotación: el ángulo alrededor del pivote.
• Opacidad: la transparencia del elemento entero, trazo y relleno incluidos.
• Radio de esquinas: redondea las esquinas del elemento.

Código

El lenguaje y la disposición del código.

• Lenguaje: el lenguaje usado para resaltar la sintaxis: Plain text, JavaScript, HTML, CSS, JSON, Python o Markdown. Los elementos HTML usan siempre HTML.
• Fondo: el color de fondo del panel de código. Lo muestran los elementos HTML y los paneles de código de las lentes de cámara; la caja del texto de código se colorea en su sección Relleno.
• Numeración: muestra un número junto a cada línea. Se muestra mientras el margen está activado.
• Ajuste: ajusta las líneas largas en lugar de desplazarlas hacia los lados.
• Margen: muestra la franja con los números de línea, las marcas de plegado y las marcas de error junto al código. Oculto, el código no se mueve.
• Escala: reduce o amplía todo el panel de código junto al elemento, de 0,1 a 4. Se muestra con un elemento HTML o un panel de lente de cámara seleccionado.

Estilo de texto

La tipografía, el tamaño y el interlineado del código. El Tamaño de fuente se indica en píxeles.

Estilo de fuente y familia tipográfica

• Estilo de fuente: la familia de tipografías entre las que elegir.
  • Sans Serif: letras sencillas sin remates.
  • Serif: letras con remates, como en la imprenta.
  • Manuscrita: letras que parecen escritas a mano.
  • Mono: todos los caracteres ocupan el mismo ancho, como en el código.
  • Display: tipografías decorativas para títulos.
• Familia tipográfica: la tipografía, dentro del estilo elegido.

Variante de fuente

• Variante de fuente: el peso o la inclinación de esa tipografía.

Tamaño de fuente

• Tamaño de fuente: el tamaño del texto.

Espaciado entre letras

• Espaciado entre letras: en el texto sobre trazado, el espacio adicional entre caracteres a lo largo del trazado.
• Interlineado: el espacio entre líneas.

Trazo

El trazo de la caja.

• Estilo de trazo: el tipo de línea. El estilo decide qué controles de los siguientes aparecen.
  • Sin trazo: ninguna línea. Las flechas no lo ofrecen.
  • Trazo sólido: una línea continua.
  • Trazo discontinuo: una línea hecha de guiones.
• Color de trazo: el color de la línea.
• Opacidad de trazo: la transparencia de la línea por sí sola.
• Grosor de trazo: el grosor de la línea.
• Separación del trazo: el espacio entre guiones.
• Longitud del guion de trazo: la longitud de cada guion.

Relleno

El color y la opacidad de la caja que hay detrás del código.

• Color de relleno: el color de la caja. También elige la paleta de la sintaxis: un color oscuro da código claro y un color claro da código oscuro.
• Opacidad de relleno: la transparencia de la caja. A 0 solo queda el código sobre el tablero, y el color elegido sigue decidiendo la paleta.

Acciones

Además de las acciones que tiene cualquier elemento, descritas en Lo que comparten todos los elementos, el texto de código ofrece esta en el panel de acciones.

Convertir en imagen

Sustituye la caja por una imagen con el mismo aspecto que se dibuja más rápido, para mantener ligero un tablero con muchos elementos. La caja ya no puede editarse.

• Operación: haz clic en Convertir en imagen. Si la caja tiene una animación de texto, un diálogo avisa de que se perderá, y confirmas con Convertir.
• Resultado: una imagen en el lugar de la caja con el mismo aspecto, con el resaltado, los números de línea y los bloques plegados. Es un SVG cuando puede reproducir la caja con exactitud y, si no, un JPEG o PNG de hasta doble resolución. Las animaciones de mover, rotar, escalar, redimensionar y desvanecer pasan a la imagen, y la animación de texto se elimina.
• Consejo: para volver a editar el resultado como texto, usa Convertir imagen SVG en elementos. Obtienes elementos de texto con la misma disposición y colores, no texto de código.

Animar texto de código

El texto de código admite las animaciones de posición, rotación, escala, redimensionado, opacidad y texto. Animación de texto escribe o borra el código, y el resaltado lo sigue a medida que aparece. Para las demás, consulta Transformar elementos y Mostrar y ocultar elementos.

Interacción en el reproductor

En el modo de reproducción y en el reproductor el código se muestra tal como quedó, en su posición de desplazamiento guardada. Allí no puede desplazarse, seleccionarse ni copiarse.

Lenguajes

El resaltado cubre Plain text, JavaScript, HTML, CSS, JSON, Python y Markdown; elige el lenguaje en la sección Código. El código de más de 500 000 caracteres o 10 000 líneas se muestra sin resaltado.