BrauSoft

Coloreando el código en el editor

Una funcionalidad muy fácil de implementar y que resulta interesante es la de colorear en el editor de código que estoy creando las palabras del script dependiendo del tipo de palabra del que se trate.

Teniendo implementado el analizador léxico desarrollar esta funcionalidad es trivial. Para empezar lanzamos el analizador léxico y recibimos la colección de palabras que componen el script. Para cada una de ellas tendremos el tipo de palabra de que se trata y su posición en el script, indicada por su línea y columna. Con esta información simplemente seleccionaremos en el control RichTextBox que contiene el código las palabras que queramos resaltar y establecemos el color deseado según el tipo de palabra.

Se ha decidido colorear las palabras reservadas y las constantes lógicas (verdadero y falso) de azul, las cadenas de caracteres de color morado y los errores de color rojo. El resto de palabras permanecerán de color negro.

Esta es la apariencia que muestra el código una vez coloreado:

 

Texto coloreado.

 

La palabra entera no la colorea de azul porque no es un tipo valido, el tipo es "numerica".

El código empleado en VB.NET es el siguiente:

 

MAXIMIZAR PLAIN TEXT

VB.NET:

1. ''' <summary>
2.     ''' Colorea las palabras del script existente en una RichTextBox.
3.     ''' </summary>
4.     ''' <param name="rtxt"></param>
5.     ''' <param name="r"></param>
6.     ''' <remarks></remarks>
7.     Private Sub ColorearCodigo(ByVal rtxt As RichTextBox, ByVal r As ResultadoAnalizadorLexico)
8.         Dim p As Palabra
9.  
10.         For Each p In r.Palabras
11.             If p.Tipo = TipoPalabra.Palabra_Reservada Or p.Tipo = TipoPalabra.Erronea Or p.Tipo = TipoPalabra.CTE_Logica Or p.Tipo = TipoPalabra.CTE_Cadena Then
12.                 'Quitamos 1 tanto a la línea como a la columna por que están en base 1 y el richtexbox maneja base 0
13.                 rtxt.SelectionStart = rtxtCodigo.GetFirstCharIndexFromLine(p.Linea - 1) + p.Columna - 1
14.                 rtxt.SelectionLength = p.Palabra.Length
15.             End If
16.             Select Case p.Tipo
17.                 Case TipoPalabra.Palabra_Reservada, TipoPalabra.CTE_Logica
18.                     rtxt.SelectionColor = Color.Blue
19.                 Case TipoPalabra.Erronea
20.                     rtxt.SelectionColor = Color.Red
21.                 Case TipoPalabra.CTE_Cadena
22.                     rtxt.SelectionColor = Color.Purple
23.             End Select
24.         Next
25.     End Sub

This entry was posted on Lunes, Septiembre 4th, 2006 at 23:56 and is filed under Motor Aventura Gráfica, Artículos. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 Responses to “Coloreando el código en el editor”

1. tamat Says:
   Septiembre 5th, 2006 at 1:21

   Si no recuerdo mal el nombre técnico de esos highlights es “pretty print”. Recuerdo haber programado en la universidad un parser que lo hacía, es un coñazo, suerte que .NET te lo pone facil.

2. elpibedealabama Says:
   Septiembre 5th, 2006 at 11:02

   hey brau, ensancha los marcos tío, es mazo de agobiante ver código tan estrecho, además de descuadra el cuadro de la derecha

3. brausoft Says:
   Septiembre 5th, 2006 at 19:48

   No tenía ni idea de que se llamaba así. Lo más difícil, que tampoco lo ha sido tanto es hacer analizador léxico. El resto con el control ritchtextbox no es nada.

   Tienes razón con lo de que se lee mal el código. El problema de ampliar el ancho es que me baso en una plantilla ya creada y si aumento el ancho de la página no se verá correctamente para resoluciones de 800×600, que según las estadísticas es la que tiene el 17% de los visitantes de esta página.

4. elpibe Says:
   Septiembre 5th, 2006 at 21:28

   y por el 17% vas a hacer que el resto lo vea chungo?…. raro que hoy en día alguien mantenga el 800×600, sobre todo para escribir código, los monitores son casi todos de 17″ o más

   yo lo hice en la mía, te tienes que currar algo como quitar las imágenes de las esquinas para que no quede feo, pero puedes añadir otras cosas no se. Prueba a disminuir el tamaño de letra del código

5. brausoft Says:
   Septiembre 5th, 2006 at 21:47

   Lo del código coloreado en el blog es un plugin para wordpress. Voy a intentar modificarlo para que se abra una nueva ventana de mayores dimensiones para que quepa todo el código.

6. _dgoQ Says:
   Septiembre 17th, 2007 at 12:29

   Este codigo es util para una edicion en tiempo real? es decir al momento de ir escribiendo el codigo fuente?

7. brausoft Says:
   Septiembre 17th, 2007 at 20:32

   Sí, valdría para una edición en tiempo real. Para editar código muy grande probablemente habría que lanzar el analizador léxico en otro hilo para evitar retardos, aunque el analizador léxico es bastante rápido.

   Saludos

8. _Quevedo Says:
   Noviembre 10th, 2007 at 20:24

   !Buen codigo!, util para implementar color a mi codigo:D…. ahora bien, pues me dirijo mas que nada para una orientacion. ¿Como sera posible simular o organizar el editor de codigo para que expanda o colapse ciertos fragmentos del codigo (como funciones, clases etc) que es lo que hace el editor de codigo de .NET…:S alguna sugerencia?

9. brausoft Says:
   Noviembre 10th, 2007 at 20:30

   Interesante, lo mismo lo incorporo al editor.
   Primero tendrías que identificar todos los fragmentos de código (funciones, procedimientos, regiones, etc.) sabiendo donde empieza y termina cada fragmento.
   Por otro lado podrías crearte tu propio control que heredara de richtextbox y que dibujara el - y el + para contraer y expandir respectivamente el código y q respondiera al click del usuario.

   Saludos

10. elburrito CM Says:
    Junio 21st, 2008 at 10:43

    Hola que tal.
    Tu idea es excelente, gracias.
    pero tengo una duda. ¿El proceso de resaltado se ejecuta al tiempo de editar el codigo?
    Si alguien puede responder se lo agradecer mucho.

Leave a Reply