Bloques de código, pero mejores

Pedro Duarte hizo una lista de deseos para bloques de código con estilo en publicaciones de blog y documentación, luego elabora manualmente una solución perfecta para esa lista de deseos. Por ejemplo, una función para poder resaltar ciertas líneas o palabras dentro del bloque de código. El resaltador de líneas es único en el sentido de que solo la sintaxis resalta las líneas resaltadas, dejando el resto en gris, lo cual es una forma elegante de llamar la atención. Y el resaltador de palabras funciona mediante una expresión regular. Pedro señala que esto no es un tutorial, es solo una muestra de todas las características que se combinaron utilizando una combinación existente de código personalizado y bibliotecas existentes. Es bastante específico de React + Next.js + MDX, pero aparentemente su núcleo se basa en rehype, que es nuevo para mí.

¡Los resultados son bloques de código bastante bonitos y de aspecto moderno, si me preguntas! Al mismo tiempo, creo que es igualmente notable lo que no existe en comparación con lo que sí existe. He visto (y probado) bloques de código realmente repletos de funciones en el pasado, con funciones como un botón de copiar al portapapeles, un botón de ver código sin formato y exportar a cualquier servicio. Los bloques de código de Pedro ni siquiera tienen una opción para mostrar el idioma en uso.

La lista de deseos de cada uno es diferente. Una cosa que no está en la lista de deseos de Pedro es el renderizado del lado del servidor, pero puedes ver en la publicación del blog que funciona totalmente con eso (presumiblemente es solo Next.js en funcionamiento). Tengo mucha envidia de eso. Aunque en última instancia ambos usamos Prism.js como resaltador de sintaxis, yo solo lo uso en el lado del cliente. Ahora se me ocurre que tal vez podría lograr todo esto en un Cloudflare Worker usando HTMLRewriter, lo que significa que esencialmente parecería que está hecho en el lado del servidor y podría copiar la copia de Prism del lado del cliente. Quizás lo más ideal sería hacerlo como un complemento de WordPress. Básicamente, una adaptación PHP de Prism, lo que parece una tarea difícil.

Mi lista de deseos para el complemento de bloque de código…

• Resaltado de sintaxis (tanto en el sitio renderizado como durante la creación)
• Cosas renderizadas del lado del servidor spanpara resaltar la sintaxis
• Funciona muy bien con los bloques de código del editor de bloques nativo de WordPress ( ```). Por ejemplo, al pegar un bloque de código se detecta automáticamente y se utiliza el bloque correcto. Fácil de convertir código hacia y desde este tipo de bloque.
• Resaltador de línea opcional
• Números de línea opcionales
• Resaltador de palabras opcional
• Visualización de idioma opcional (y la capacidad de anular esa etiqueta)
• Copia y pega muy limpiamente.
• No es necesario escapar del código durante la creación.
• Sin embargo, hay libertad para aplicar estilos en la interfaz (para modos, temas, barras de desplazamiento personalizadas, etc.). El diseño de bloques de código tiene un millón de cosas a considerar, por lo que los valores predeterminados inteligentes probablemente deberían venir con el complemento, pero son fáciles de anular.
• Objetivo ambicioso: ¿puede ayudar de alguna manera inlinetambién con el código?