Cómo empaquetar muestras de código en dispositivos móviles -

Una parte de ser un blogger técnico que he tenido que afrontar son los ejemplos de código y las pequeñas pantallas de dispositivos móviles. Me sorprendí cuando vi que un porcentaje de dos dígitos de visitas a este blog eran desde teléfonos móviles: ¡una locura! Comencé a prestar más atención a los detalles de dichos dispositivos y me di cuenta de que las muestras de código requerían mucho desplazamiento horizontal: ¡qué asco! Al utilizar espacios en blanco CSS, podemos ajustar el código y evitar el desplazamiento entumecido en pantallas pequeñas:

pre {espacio en blanco: línea previa;}

Me gusta usar PrismJS, por lo que requiere un selector diferente:

pre[clase*='idioma-'], código[clase*='idioma-'] {espacio en blanco: línea previa;}

Afortunadamente, los espacios en blanco me permiten ayudarlos a todos a evitar el desplazamiento horizontal en los móviles. Por supuesto, tendrás que elegir a qué consulta de medios quieres aplicar eso, pero te dejaré hacerlo. En algunos casos, puede resultar difícil leer el código con líneas rotas, pero eso seguramente es mejor que todo ese loco desplazamiento.