How to color a substring in Tkinter canvas?

Tkinter, the standard GUI toolkit for Python, provides a versatile set of tools for creating graphical user interfaces. One common requirement in GUI applications is the ability to highlight or color specific substrings within a block of text. This article explores how to achieve this functionality using Tkinter's Text widget with tags, enabling developers to create more visually appealing and interactive user interfaces.

Understanding Tkinter Text Widget

While Tkinter's Canvas widget is great for drawing shapes and images, the Text widget is specifically designed for handling text content with advanced formatting capabilities. The Text widget provides built-in support for tags, making it the ideal choice for coloring substrings.

Using Tags for Text Formatting

Tags in Tkinter are a powerful mechanism for applying formatting to specific ranges of text. The tag_configure() method defines the visual properties of a tag, while tag_add() associates a tag with a specific text range.

Basic Example

Here's how to color a specific substring in a Text widget ?

import tkinter as tk

def color_substring(widget, substring, tag_name):
    # Start searching from the beginning
    start_index = "1.0"
    
    while True:
        # Search for the substring
        start_index = widget.search(substring, start_index, stopindex=tk.END)
        
        if not start_index:
            break
        
        # Calculate end index
        end_index = widget.index(f"{start_index}+{len(substring)}c")
        
        # Add tag to the substring
        widget.tag_add(tag_name, start_index, end_index)
        
        # Move to next occurrence
        start_index = end_index

# Create main window
root = tk.Tk()
root.title("Color Substring Example")
root.geometry("400x200")

# Create Text widget
text_widget = tk.Text(root, width=50, height=8)
text_widget.pack(padx=10, pady=10)

# Configure tag with red color
text_widget.tag_configure("red_text", foreground="red", font=("Arial", 10, "bold"))

# Insert sample text
text_widget.insert(tk.END, "This is a sample text with a colored substring. The colored word stands out.")

# Color all occurrences of "colored"
color_substring(text_widget, "colored", "red_text")

root.mainloop()

Multiple Colors and Styles

You can define multiple tags with different colors and styles ?

import tkinter as tk

def color_multiple_substrings(widget, substring_colors):
    for substring, tag_name in substring_colors.items():
        start_index = "1.0"
        while True:
            start_index = widget.search(substring, start_index, stopindex=tk.END)
            if not start_index:
                break
            end_index = widget.index(f"{start_index}+{len(substring)}c")
            widget.tag_add(tag_name, start_index, end_index)
            start_index = end_index

# Create main window
root = tk.Tk()
root.title("Multiple Colored Substrings")
root.geometry("500x250")

# Create Text widget
text_widget = tk.Text(root, width=60, height=10)
text_widget.pack(padx=10, pady=10)

# Configure different tags
text_widget.tag_configure("red_text", foreground="red", font=("Arial", 10, "bold"))
text_widget.tag_configure("blue_text", foreground="blue", background="lightblue")
text_widget.tag_configure("green_text", foreground="green", underline=True)

# Insert sample text
sample_text = """Python is a powerful programming language.
Tkinter provides excellent GUI capabilities.
Text widgets offer flexible formatting options."""

text_widget.insert(tk.END, sample_text)

# Define substrings and their corresponding tags
substring_colors = {
    "Python": "red_text",
    "Tkinter": "blue_text", 
    "Text": "green_text"
}

# Apply colors
color_multiple_substrings(text_widget, substring_colors)

root.mainloop()

Dynamic Text Coloring

For applications where text changes dynamically, you can create a function that reapplies colors whenever content is updated ?

import tkinter as tk

class ColoredTextEditor:
    def __init__(self, root):
        self.root = root
        self.keywords = {"def": "blue", "import": "green", "return": "red"}
        
        # Create Text widget
        self.text_widget = tk.Text(root, width=60, height=15)
        self.text_widget.pack(padx=10, pady=10)
        
        # Configure tags for syntax highlighting
        for keyword, color in self.keywords.items():
            self.text_widget.tag_configure(keyword, foreground=color, font=("Courier", 10, "bold"))
        
        # Bind text change event
        self.text_widget.bind("<KeyRelease>", self.on_text_change)
    
    def highlight_keywords(self):
        # Remove all existing tags first
        for keyword in self.keywords.keys():
            self.text_widget.tag_remove(keyword, "1.0", tk.END)
        
        # Apply highlighting to keywords
        for keyword in self.keywords.keys():
            start_index = "1.0"
            while True:
                start_index = self.text_widget.search(keyword, start_index, stopindex=tk.END)
                if not start_index:
                    break
                end_index = self.text_widget.index(f"{start_index}+{len(keyword)}c")
                self.text_widget.tag_add(keyword, start_index, end_index)
                start_index = end_index
    
    def on_text_change(self, event):
        # Highlight keywords when text changes
        self.highlight_keywords()

# Create main window
root = tk.Tk()
root.title("Dynamic Syntax Highlighting")
root.geometry("600x400")

# Create colored text editor
editor = ColoredTextEditor(root)

# Insert sample Python code
sample_code = """def hello_world():
    import sys
    print("Hello, World!")
    return True

def main():
    hello_world()
    return 0"""

editor.text_widget.insert(tk.END, sample_code)
editor.highlight_keywords()

root.mainloop()

Best Practices

Conclusion

Coloring substrings in Tkinter is achieved effectively using the Text widget's tag system. Use tag_configure() to define styles and tag_add() to apply them to specific text ranges. For dynamic content, implement event handlers that reapply colors when text changes.