Por qué el código copiado de la web no funciona al pegarlo

Copiar un fragmento de código de una página no siempre te da el código: te da lo que el navegador ha seleccionado, que a menudo incluye elementos de la interfaz del visor. Los problemas más habituales son:

• Números de línea: muchos visores (GitHub, GitLab, Pastebin, la documentación de muchos proyectos) muestran una columna con el número de cada línea. Al copiar, esos números se cuelan al principio de cada línea y el código deja de compilar.
• La canaleta (gutter): la barra vertical | o │ que separa los números del código.
• Prompts del intérprete: los ejemplos de Python en la consola llevan >>> y ... al principio; los de shell llevan $ o #; los de Jupyter, In [1]:.
• Comillas tipográficas: algunos blogs y CMS «embellecen» automáticamente las comillas rectas (") convirtiéndolas en tipográficas (“ ”), y los guiones en rayas (—). El código con esas comillas produce un error de sintaxis.
• Caracteres invisibles: espacios de no separación ( ), espacios de ancho cero, marcas de dirección de texto. No se ven pero rompen el análisis del código.
• Espacios al final de línea y líneas en blanco de más que ensucian el diff.
• Texto de botones: palabras como «Copy», «Raw» o «Toggle» que a veces entran en la selección.

Operaciones de limpieza

Detección de números de línea

Distinguir un número de línea de un número que forma parte del código no es trivial. La herramienta no elimina un número solo porque una línea empiece por una cifra: comprueba que la mayoría de las líneas empiecen por un número y que esos números sean correlativos (1, 2, 3…). Solo entonces los trata como numeración de visor y los quita. Así, un archivo de datos con valores numéricos o una lista numerada legítima no se ven afectados.

La conversión de tabulaciones

Cuando copias código, la indentación puede llegar como tabulaciones o como espacios, y a veces mezclada. El selector de tabulaciones te permite unificarla: mantener los tabuladores, convertirlos a 2 o a 4 espacios, o hacer lo contrario y transformar los grupos de espacios en tabuladores. Es útil para adaptar el fragmento a la convención de tu proyecto.

Ejemplo

Entrada (copiado de un visor con números de línea):

1  | function suma(a, b) {
2  |   return a + b;
3  | }
Copy
4  | console.log(suma(2, 3));

Salida:

function suma(a, b) {
  return a + b;
}
console.log(suma(2, 3));

El botón de detección automática

En lugar de repasar todas las casillas, pulsa «Detección automática»: la herramienta analiza el texto pegado y activa solo las limpiezas que hacen falta (si hay comillas tipográficas, activa esa; si hay numeración correlativa, activa la de números de línea; y así con el resto). Después puedes ajustar cualquier opción a mano.

Casos de uso

• Copiar código de Stack Overflow o de un blog y que compile sin editar comillas ni quitar prompts.
• Extraer un fragmento de GitHub o GitLab desde la vista de archivo, sin los números de línea.
• Limpiar código copiado de un PDF de documentación, que suele traer comillas tipográficas y espacios raros.
• Pegar ejemplos de la consola de Python o de Jupyter quitando los >>> para poder ejecutarlos.
• Normalizar la indentación de un fragmento antes de incorporarlo a tu proyecto.

Herramientas relacionadas en porcentaje.net

• Eliminador de Caracteres no Imprimibles: solo los caracteres de control e invisibles.
• Agregar Número de Línea a Texto: la operación inversa, para añadir la numeración.
• Normalizador de Texto Unicode: unifica la forma de los caracteres.
• Eliminar Espacios al Inicio y Final de Línea: recorta la indentación y los espacios finales.
• Envoltura de Texto a N Caracteres: ajusta el código o el comentario a un ancho.

Preguntas Frecuentes (FAQ)