Syntax Highlighting in Godot 4

Hello readers, today we’re going to embark on an exciting journey into the world of game development by addressing an often-overlooked yet essential feature: syntax highlighting. We’ll be using Godot Engine, a popular open-source 2D and 3D game engine. If you’re someone who often tinkers with code within the engine, having syntax highlighting could significantly enhance your experience.

Syntax highlighting is an exciting feature that colors the text in different colors based on the logic of the syntax. It greatly helps improve readability and comprehension, allowing you to understand the code structure at a glance and debug effectively.

What you need

Before we begin, make sure you have Godot Engine installed on your machine. You also need to have a basic understanding of the GDScript language, which is used in Godot.

Creating a TextEdit Node

To get started, we will be creating a TextEdit node in Godot. This node provides a rich text editing control that supports selection, cursors, and other similar features.

Using a Script for Syntax Highlighting

We are going to use add_color_region function. From the documentation the function signature is as follows :

void add_color_region ( String start_key, String end_key, Color color, bool line_only=false )

Adds a color region such as comments or strings.

Both the start and end keys must be symbols. Only the start key has to be unique.

line_only denotes if the region should continue until the end of the line or carry over on to the next line. If the end key is blank this is automatically set to true.

Now that we have the TextEdit node ready from the previous step, the next step involves attaching a script to this node for achieving syntax highlighting. Here is the script:

extends TextEdit

var comment_color := Color(0.4, 0.4, 0.6, 1) # Blue-grey
var print_color := Color("#166534")

# Called when the node enters the scene tree for the first time.
func _ready():
    #init code here
    pass

func highlight(code):
    _highlight_comment(code)
    _highlight_print_statement(code)

func _highlight_comment(code):
    var comment_pos = code.find("#")
    if comment_pos != -1:
        syntax_highlighter.add_color_region("#","",comment_color, true)

func _highlight_print_statement(code):
    syntax_highlighter.add_color_region('"','"',print_color, false)

# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
    #any process code here
    pass

Understanding the Script

The script uses two primary functions, _highlight_comment(code) and _highlight_print_statement(code), to color the text differently for comments and print statements in the GDScript code.

1. Defining Colors: The comment_color is defined as a blue-grey color and print_color as a green color. You can modify these colors according to your preferences.
2. Highlighting Comments: The _highlight_comment(code) function searches for the "#" symbol in the provided code. If found, it calls syntax_highlighter.add_color_region to colorize the region between "#" and the end of the line. The true flag ensures it's a line-based coloring.
3. Highlighting Print Statements: The _highlight_print_statement(code) function colorizes the region between two quotation marks, indicating a string. These often represent print statements in GDScript. The false flag indicates it's not line-based but rather depends on the start and end symbols.

The highlight(code) function is the primary function that invokes these two coloring functions to colorize comments and print statements.

Wrapping Up

In this tutorial, we’ve learned how to implement syntax highlighting in Godot Engine by attaching a simple script to a TextEdit node. You can now expand upon this and introduce more colorization rules based on your needs.

Happy coding!