Hace unos meses publiqué
mi primer post sobre Habré. Quizás algunos de ustedes noten que el código en el artículo está pintado de una manera inusual, y lo más importante, coloreado correctamente, a pesar de que el editor de texto incorporado en el sitio no admite el marcado original del código y a menudo resalta sus elementos incorrectamente. Al mismo tiempo, el código no se inserta en la imagen, como hacen algunos escritores completamente desesperados.
En mi caso, preservar el marcado fue especialmente importante porque el artículo era una descripción de cómo trabajar en el código. Para resolver el problema, creé una
herramienta que le permite transferir el resaltado de código en el esquema seleccionado de IDEA a un artículo sobre Habr. Hablaré sobre el proceso de creación de una herramienta y las características de su uso.
Porque todo esto
A primera vista, puede parecer que esto se hace por travesuras, simplemente porque la iluminación estándar implementada a través de la etiqueta
<source> no es adecuada.
En cierto modo, esto es, por supuesto, cierto, pero no del todo.
En primer lugar, el resaltado dentro del
<source> no puede funcionar con fragmentos de código, ya que no habrá suficiente información para colorear. Todos los elementos declarados fuera del alcance de la pieza serán pintados al azar. Este problema no tiene solución, ya que, hasta donde yo sé, ninguno de los servicios para colorear en línea le permite hacer lo siguiente:
- Pegue el código completo del proyecto en el artículo sin mostrarlo en su totalidad, o pegue el enlace al commit en GitHub. En lugares específicos del artículo, use recortes de líneas del código completo (con una indicación del rango). En este caso, la luz de fondo debe determinarse en función del código completo, por supuesto.
- Indique metainformación explícita para elementos indefinidos. Una manera bastante difícil para el usuario, pero estaría de acuerdo con tal cosa.
En segundo lugar, el resaltado dentro de
<source> nunca es igual al número de diferentes tipos de elementos con un IDE regular. Y debido al problema descrito anteriormente, hacer coloreado avanzado no tiene sentido: nadie inserta el código completo del proyecto en el artículo, por lo que esta funcionalidad no funcionará.
Al mismo tiempo, la realidad es que los fragmentos de código deben insertarse en los artículos, y cuanto más pequeños sean, mejor.
Puede leer el código sin resaltar, pero por qué.
Características de Habr
IntelliJ IDEA tiene soporte incorporado para exportar código a HTML. La copia regular del código se coloca en el portapapeles, incluido el código de color, que se puede leer como HTML.
Desafortunadamente, Habr no permite el uso de marcado HTML en artículos directamente. Las razones de esto son un misterio cubierto de oscuridad, pero quizás esto se deba a la unificación de la apariencia de los artículos. Si permite el uso de HTML en los artículos, será posible ponerse al día de tal manera que haya problemas con la visualización.
En general, apoyo la idea de prohibir HTML en los artículos, pero hay una advertencia. Un recurso para profesionales de TI, donde el código a menudo se discute y no hay forma de insertarlo correctamente en un artículo, es de alguna manera extraño.
Entonces, tenemos a nuestra disposición las etiquetas
<b> ,
<i> ,
<font> . Además, todo esto funciona dentro de la
<code> , que es necesaria para formatear. Bueno,
; También nos salvaron, lo que es útil para largas líneas de código y sangría.
No es necesario decir que todas las formas estándar para obtener código HTML de IDEA no ofrecen ese tipo de HTML, por lo que el trabajo de conversión será bastante grande.
El enfoque
Para empezar, vale la pena agradecer al autor
capslocky por su
material sobre este tema. No utilicé la herramienta propuesta en el artículo directamente, y difícilmente hubiera sucedido, pero gracias a este material entendí toda la profundidad del problema y al mismo tiempo sentí el viento de la esperanza.
El único inconveniente de esta publicación es la gran cantidad de código combinado con una explicación muy escasa de lo que hace y por qué.
Intentaré corregir la situación y describir lo que tendrá que hacer con su marcado HTML si desea llevarlo a un formulario que esté listo para su inserción en Habr.
- Antes de exportar, debe establecer el esquema de color deseado en IDEA, por ejemplo, desde el sitio web de Temas de color . El código se exportará con el esquema seleccionado. Es mejor elegir un esquema con un fondo blanco (ya que el fondo no se puede establecer en el Habré) y sin subrayar. No pensé en lo fácil que es arrastrarlos, porque realmente no quería hacerlo.
- Trabajamos solo con los elementos internos de la
<pre> . Incluso si está utilizando la exportación no desde IDEA, sino alguna otra, probablemente habrá esta etiqueta en el marcado HTML, ya que sin ella es difícil formatear el código correctamente. La etiqueta en sí se elimina, reemplazándola con <code> . - Lo más probable es que el texto se presente como un
<span> con diferentes estilos. Todos tienen que deshacerse de ellos. Muchos servicios de coloración incorporan estilos en una hoja de estilos, lo cual es lógico, y utilizan enlaces a nombres de estilos. Específicamente, IDEA aún no hace esto, lo que hace que la tarea sea un poco más fácil (la configuración de estilo se encuentra directamente en <span> ). - Establezca el color de la fuente a través de la
<font> . Desafortunadamente, el color de fondo no se puede establecer. font-style:italic propiedad de font-style:italic en un par de etiquetas <i> </i> y font-weight:bold en <b> </b> .- Reemplace todos los espacios con
; . - Los saltos de línea en forma de
<br> reemplazan por \n . - El marcado HTML en IDEA produce líneas en blanco con estilos y espacios a partir de espacios con estilos. Es mejor tirar estos estilos: esto reducirá en gran medida la longitud y aumentará la comprensión del código.
- Asegúrese de que los avances de línea no tengan ningún estilo. De lo contrario, habrá problemas con las líneas vacías.
El último párrafo se ilustra con un ejemplo:
<code>1 <font color="000000"></font> 2</code>El código dado será activado por "Habr" en
12 . Lo mismo se aplica a las etiquetas
<b> y
<i> , así como a cualquier combinación de las mismas. Los saltos de línea no deben tener un estilo, y todo estará bien.
Implementación
Al principio, la tarea de escribir un convertidor para código HTML arbitrario me pareció bastante complicada. Sin embargo, si toma una decisión para una versión específica de HTML, entonces no todo es tan malo. Logré hacer todo en RegExp puro, es decir, incluso sin análisis HTML. El problema principal resultó identificar las características del marcado "Habr".
Para que los avances de línea no tuvieran estilos, tuve que hacer reemplazos bastante complicados, que probablemente sean los más incomprensibles (vea la función popupBr). La idea es que las etiquetas
<br> después de cada reemplazo "emerjan" desde la profundidad de las etiquetas de formato hacia el exterior. Por lo tanto, después de todos los reemplazos, la etiqueta
<br> tiene formato.
Además, resultó que IDEA no solo pone texto enriquecido en el portapapeles, sino también objetos bastante complicados como
application/x-java-jvm-local-objectref . El problema es que la presencia de tales objetos en el portapapeles conduce a errores persistentes en mi consola sobre el tema de la construcción de DataFlavor. Desafortunadamente, no hay nada que puedas hacer: JDK simplemente funciona con el portapapeles. Para mí, fue un descubrimiento tener
ese código . Aparentemente, los tíos inteligentes que escribieron esto creen que servirá. En general, no tenga miedo de los errores que puedan ocurrir al trabajar con la herramienta.
El proyecto está escrito en Kotlin y vive en
GitHub .
¡Sugerencias para mejorar son bienvenidas! Por ejemplo, sería bueno diseñar esta herramienta como un complemento para IDEA. Todavía no he encontrado una forma simple de hacer esto: desafortunadamente, las fuentes del complemento Copiar como HTML están cerradas, y lleva demasiado tiempo descubrir cómo escribir un complemento de este tipo desde cero.