Pues eso… el proyecto que tenía de colorear código para .NET (5.0) gsColorearCodigoNET que utiliza la librería o biblioteca de clases gsColorearNET (.NET Standard 2.0) y que creé en Visual Studio 2019 (este VS solo soporta hasta la versión 5.0 de .NET) lo decidí cambiar a .NET 9.0 para usarlo desde Visual Studio 2022.
Aunque esto fue de «rebote», como consecuencia de mi charla con Gemini (la IA de Google) que empezó pidiéndole consejos para cambiar los estilos del blog elguillemola.com (este blog) que hace un mes más o menos lo cambié a tema oscuro porque lo que pensaba publicar eran fotos y las fotos se ven mejor con el fondo oscuro que con el blanco.
Además que con el cambio de color oscuro los enlaces se quedaron que era complicado verlos bien (el azul sobre el negro no cuadra muy bien).
En realidad lo que le pedí era poder usar el coloreado de código para usarlo con cajas de texto oscuras, para aparentar el coloreado de código de Visual Studio cuando se usa el tema Dark.
Y le comenté que si era necesario de pasarla de la que tenía actualmente en .NET 5.0 con Visual Studio 2019 a .NET 9.0 (el .NET 10 aún está verde, así como el VS2026) y ahí empezó todo.
La versión anterior de gsColorearCodigoNET
Este es el enlace de la explicación de la utilidad creada anteriormente con .NET (existe otra creada con Visual Basic con Visual Studio 2008 después migrada a VS2019 pero que usa .NET Framework 4.8)
Los cambios en la nueva versión
Ahora mismo no me voy a enrollar con las cosas hechas, que Gemini me ha preparado un extracto, tanto de lo que se ha hecho para cambiar los estilos del sitio como de la aplicación al migrarla a .NET 9.0.
Así que te dejo aquí esas explicaciones, para que así también quede claramente, que sin la ayuda de Gemini, esto ahora no lo estarías leyendo.
Lo que le pedí a Gemini que me proporcionara:
Buenas tardes, solo me faltaría que me hicieras un par de pequeños resúmenes:
1- para publicarlo en la web, sobre los cambios en el programa (migración y cambios que tú has indicado).
2- Las cosas hechas en el WordPress para usar los dos códigos de coloreado, no es necesario expandirse, creo que explicando el que se ha usado en el programa que está todo encapsulado sería suficiente, salvo que opines que es mejor explicarlo de otra forma.
Gracias
Y esto fue lo que me respondió (así me ahorro tener que explicarte yo las cosas, que aquí es casi verano y hace mucho calor para pensar 😉 ).
===================================================
INTEGRACIÓN EN WORDPRESS Y ENCAPSULACIÓN DEL DISEÑO
===================================================
- 1. ARQUITECTURA INTEGRADA Y AUTÓNOMA (100% ENCAPSULADA):
- Todo el «motor» y la lógica visual del formateador interactivo se procesan exclusivamente dentro de la aplicación de escritorio en VB.NET.
- No se requiere la instalación de plugins adicionales, hojas de estilo externas (CSS) ni modificaciones en el archivo functions.php del servidor de WordPress.
- El código HTML generado es autosuficiente: incluye las funciones JavaScript ‘onclick’ nativas y los estilos en línea (‘inline CSS’) necesarios para que el navegador del lector conmute los fondos blanco y oscuro de forma inmediata.
- 2. FLUJO DE TRABAJO AUTOMATIZADO CON PATRONES:
- Se ha registrado un Patrón de Bloques (Block Pattern) personalizado y NO sincronizado directamente desde el editor de WordPress.
- Este patrón actúa como una plantilla fija que automatiza la estructura de los artículos técnicos con un solo clic.
- La estructura preconfigurada organiza el contenido en el siguiente orden: [Bloque de Párrafo Introductorio] -> [Bloque HTML Personalizado] -> [Bloque de Párrafo de Conclusión].
- El flujo de publicación final es óptimo: se inserta la plantilla en el post de WordPress, se procesa el código en la aplicación de VB.NET, y con un simple
- ‘Ctrl + V’ se vuelca el bloque dual interactivo en el contenedor central.
==========================================================
MIGRACIÓN Y ACTUALIZACIÓN DEL GENERADOR DE CÓDIGO (VB.NET)
==========================================================
- 1. MIGRACIÓN DE ARQUITECTURA:
- El proyecto se ha migrado con éxito a .NET 9.0 (utilizando .NET Standard 2.0 para la librería lógica central), asegurando compatibilidad moderna, mejor rendimiento y soporte a largo plazo.
- 2. PROCESAMIENTO DUAL INTERACTIVO (CLARO/OSCURO):
- Se ha diseñado e implementado el método ‘ObtenerCodigoDualHTML’ en la clase ‘Colorear’.
- Este método realiza un doble procesamiento del código RTF original de forma nativa utilizando expresiones regulares: una pasada optimizada para el Modo Claro y otra para el Modo Oscuro.
- Elimina dinámicamente las etiquetas antiguas generadas por la configuración local para evitar duplicidades de contenedores en la web.
- 3. INYECCIÓN DE ESTILOS EN LÍNEA (INLINE CSS):
- Para garantizar el aislamiento visual total en WordPress, las cajas finales llevan el color de fondo y de texto «grabados a fuego» mediante atributos ‘style’ en línea.
- El contenedor Claro fuerza un fondo blanco (#ffffff) con texto base negro.
- El contenedor Oscuro fuerza el fondo clásico de Visual Studio (#1e1e1e) con texto gris claro.
- 4. OPTIMIZACIÓN DEL VISOR HTML LOCAL:
- Se ha corregido el método de guardado del archivo temporal (‘guardarTEMP’) aislando el procesamiento en variables locales. Esto evita que los reemplazos de texto (como alterar los ‘ ‘) corrompan el HTML original que se muestra en el editor.
- Se ha inyectado un parche de compatibilidad con la directiva ‘IE=edge’ y JavaScript con sintaxis tradicional (usando ‘var’ y bucles clásicos) dentro del archivo físico temporal. Esto soluciona los molestos «errores de script» del control WebBrowser antiguo y permite probar los botones interactivos de cambio de modo directamente en el escritorio antes de publicar.
Código de ejemplo con los dos «coloreados»
Aquí te dejo parte del código nuevo, el que se encarga de colorear desde RTF (que es donde hemos hecho los cambios).
Primero las modificaciones en el método RTFaSPAN que es donde se procesa el código interno del control RTF para extraer los colores definidos, que tal como se copia desde Visual Studio siempre es como si estuviera con el tema claro a pesar de que lo copies desde Visual Studio con el tema ocuro.
Solo te pongo la definición de la función a la que le he añadido un segundo parámetro indicando si se usa el tema oscuro o no.
Public Shared Function RTFaSPAN(texto As String, usarTemaOscuro As Boolean, indentar As Integer, quitarEspaciosIniciales As Boolean) As String
Ahora la parte del código dentro de ese método que analiza el RTF en busca de las definiciones de los colores, tal como lo hacía en la versión anterior sigue usando expresiones regulares para extraer los «patrones» de colores y el bucle en el que se ha agregado la conversión a tema oscuro si así se indica (recuerda que el color obtenido directamente del RTF es para tema claro).
' La segunda línea será la definición de los colores Dim colores() As String Dim n As Integer = -1 Dim j, k As Integer ' Usar expresiones regulares para buscar los colores Dim re As New Regex("(?<r>(\b\\\b0 red\d0{1,3}))(?<g>(\b\\\b0 green\d0{1,3}))(?<b>(\b\\\b0 blue\d0{1,3}));") Dim mc As MatchCollection = re.Matches(texto) ReDim colores(0 To mc.Count) j = 1 colores(0) = "" ' guardarlos en formato hexadecimal (Adaptado para Modo Oscuro) For Each m As Match In mc 're.Matches(texto) ' 1. Extraer el valor hexadecimal original en mayúsculas (Formato "RRGGBB") Dim hexOriginal As String = CInt(m.Groups("r").Value.Substring(4)).ToString("X2") & CInt(m.Groups("g").Value.Substring(6)).ToString("X2") & CInt(m.Groups("b").Value.Substring(5)).ToString("X2") ' 2. Si el CheckBox está marcado, pasamos el valor por el traductor If usarTemaOscuro Then Select Case hexOriginal Case "0000FF" ' Azul estándar (Keywords: Dim, Public, Class...) colores(j) = "569CD6" ' Cian brillante (Modo oscuro) Case "008000" ' Verde estándar (Comentarios) colores(j) = "57A64A" ' Verde claro (Modo oscuro) Case "007F00", "228B22" ' Otras variantes de verde colores(j) = "608B4E" Case "A31515" ' Marrón/Rojo (Cadenas de texto / Strings) colores(j) = "D69D85" ' Salmón/Marrón claro Case "000000" ' Texto normal, variables, operadores colores(j) = "DCDCDC" ' Gris claro / Blanco hueso Case "2B91AF" ' Azul verdoso (Tipos de datos: Integer, Form...) colores(j) = "4EC9B0" ' Turquesa/Verde agua Case Else ' Si es un color que no tenemos mapeado, mantenemos el original colores(j) = hexOriginal End Select Else ' Si la casilla NO está marcada, se queda con el comportamiento claro de siempre colores(j) = hexOriginal End If j += 1
Y por último el nuevo método ObtenerCodigoDualHTML definido como en la misma clase Colorear de la biblioteca.
''' <summary> ''' Genera el bloque HTML completo e interactivo (Claro y Oscuro) con cajas independientes. ''' </summary> Public Shared Function ObtenerCodigoDualHTML(ByVal rtfContenido As String) As String ' 1. Obtener el código coloreado llamando a tu método de 4 parámetros ' Pasamos 0 a indentar y False a quitar espacios, tal como haces tú al copiar de VS. Dim htmlClaroCuerpo As String = RTFaSPAN(rtfContenido, usarTemaOscuro:=False, indentar:=0, quitarEspaciosIniciales:=False) Dim htmlOscuroCuerpo As String = RTFaSPAN(rtfContenido, usarTemaOscuro:=True, indentar:=0, quitarEspaciosIniciales:=False) ' NOTA IMPORTANTE: Si tus métodos actuales ya devuelven el <pre> y </pre> obligatoriamente, ' los limpiamos aquí rápidamente para quedarnos solo con el contenido coloreado: If htmlClaroCuerpo.StartsWith("<pre") Then htmlClaroCuerpo = htmlClaroCuerpo.Substring(htmlClaroCuerpo.IndexOf(">") + 1).Replace("</pre>", "") End If If htmlOscuroCuerpo.StartsWith("<pre") Then htmlOscuroCuerpo = htmlOscuroCuerpo.Substring(htmlOscuroCuerpo.IndexOf(">") + 1).Replace("</pre>", "") End If ' 2. Ensamblar la plantilla con las cajas <pre> controladas al 100% por nosotros Dim sb As New System.Text.StringBuilder() ' Selector de botones superior sb.AppendLine("<div class='selector-codigo'>") sb.AppendLine(" <button onclick=""cambiarCodigo(this, 'claro')"" class='btn-codigo activo'> \u9728?\u-497? Modo Claro</button>") sb.AppendLine(" <button onclick=""cambiarCodigo(this, 'oscuro')"">\f3\u-10180?\u-8423? Modo Oscuro</button>") sb.AppendLine("</div>") sb.AppendLine("<div class='contenedor-codigo-dual'>") ' --- CAJA CLARA (Fondo blanco forzado en línea) --- sb.AppendLine(" <div class='codigo-version codigo-claro'>") sb.AppendLine(" <pre style=""background-color: #ffffff; color: #000000; border: 1px solid #e2e8f0; padding: 20px; border-radius: 8px; font-family: 'Consolas', 'Courier New', monospace; font-size: 14px; line-height: 1.5; max-width: 92%; width: 92%; margin-left: auto; margin-right: auto; display: block; overflow-x: auto; white-space: pre; word-wrap: normal; box-sizing: border-box;"">") sb.AppendLine(htmlClaroCuerpo) sb.AppendLine(" </pre>") sb.AppendLine(" </div>") ' --- CAJA OSCURA (Fondo oscuro VS forzado en línea) --- sb.AppendLine(" <div class='codigo-version codigo-oscuro' style='display: none;'>") sb.AppendLine(" <pre style=""background-color: #1e1e1e; color: #dcdcdc; border: 1px solid #e2e8f0; padding: 20px; border-radius: 8px; font-family: 'Consolas', 'Courier New', monospace; font-size: 14px; line-height: 1.5; max-width: 92%; width: 92%; margin-left: auto; margin-right: auto; display: block; overflow-x: auto; white-space: pre; word-wrap: normal; box-sizing: border-box;"">") sb.AppendLine(htmlOscuroCuerpo) sb.AppendLine(" </pre>") sb.AppendLine(" </div>") sb.AppendLine("</div>") Return sb.ToString()
Y esto es todo, al menos por ahora.
Solo me falta ponerte el enlace al repositorio de GiHub donde puedes ver el código completo de la solución y los dos proyectos incluidos.
gsColorearCodigo NET9 en github.
Espero que lo disfrutes.
Nos vemos.
Guillermo
