SyntaxHighlighter in unity

Question

Here is the code

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using TMPro;
using System.Text.RegularExpressions;
public class syntaxHighlter : MonoBehaviour
{
    [SerializeField] private TMP_InputField inputField;
    [SerializeField] private TextMeshProUGUI outputField;
    string highlightedText;

    private void Start()
    {
        inputField.onValueChanged.AddListener(OnInputValueChanged);
    }

    private IEnumerator UpdateOutputField(string text)
    {
        yield return new WaitForSeconds(0.1f); // delay for 0.1 seconds
        outputField.text = text;
    }

    private void OnInputValueChanged(string text)
    {
        highlightedText = text.Replace("for", "<color=blue>for</color>")
            .Replace("int", "<color=green>int</color>")
            .Replace("float", "<color=green>float</color>")
            .Replace("bool", "<color=green>bool</color>")
            .Replace("void", "<color=green>void</color>");
        Debug.Log(highlightedText);
        
        StartCoroutine(UpdateOutputField(highlightedText));
    }
}

I'm trying to make syntaxHighliter in TMP input field, I want for example if I type the word "mov" it immediatly changes color to blue, but here apparently the outputfield.text is not changing when I modify it here. I tried changing directly inputfield but that created an infinite loop, tried modifying input field resulted in an infinite loop

Answer 1

What you are doing would end up in an infinite loop of updates

• a) because changing the text property again will invoke onValueChanged

  -> You rather want to use SetTextWithoutNotify here in order to not again invoke the onValueChanged

• and b) because <color=green>int</color> also contains int and will with the next run result in <color=green><color=green>int</color></color> etc

-> you rather want to replace int only if it hasn't already been replaced before (=> wrapped in <color=green> and </color>).

So this should be fine

private void OnInputValueChanged(string text)
{
    text = text.Replace(" for ", "<color=blue>for</color>")
        .Replace(" int ", "<color=green>int</color>")
        .Replace(" float ", "<color=green>float</color>")
        .Replace(" bool ", "<color=green>bool</color>")
        .Replace(" void ", "<color=green>void</color>");

    Debug.Log(text);
    
    inputField.SetTextWithoutNotify(text);
}

There are also a couple of edge cases of course like e.g. having int as part of a member/variable etc name.

It might be more efficient and easier to rather go for Regex.Replace using e.g.

using System.Text.Regularxpressions;

...

const string pattern = @"(?<!<color=green>|[a-zA-Z0-9])(int|void|float|bool)(?!<\/color>|[a-zA-Z0-9])";
const string replacement = "<color=green>$1</color>";

...

inputField.SetTextWithoutNotify(Regex.Replace(input, pattern, replacement));

see .Net fiddle for demo and see Regex101 for further explanation how this regex works - here in short and simple

• (int|void|float|bool) are the keywords you want to match. This is also the first and only Match Group
• $1 later re-uses whatever was the actual content in this first match group
• (?<!<color=green>|[a-zA-Z0-9]) this weird construct is a Negative Look-Behind. In simple it just means only match keywords if they do not come right after <color=green> or any alpha-numeric character
• (?!<\/color>|[a-zA-Z0-9]) similar to above but a Negative Look-Ahead. In simple again only match keywords that are not followed by either </color> or any alpha-numeric character