Syntaxhighlighting in textbox?

[Veserve]

Hello DevForum,
I am trying to make a custom command bar, I already know how to program it

Based on the title I know why you are here.
I am trying to accomplish something like this:

Changing the colour of specific sections of a string

[image] Made this today - fun stuff, but surely a builtin RTF text UI element would be nice to have. Though for this thing, the most work was actually the Lua syntax highlighter more than the displaying of information itself. For most of the part, I miss the ability to make any font bold, italics, and the possibility of text shadows / text outlines. You can do a bunch of stuff already with TextLabels, just not as easy as i.e. with HTML.

If anybody can help, thanks in advance.

[nicemike40]

You can change the color of text inline Rich Text Markup | Roblox Creator Documentation

[Veserve]

can you give me an example of how I would turn

into highlighted text, I have no idea how to apply rich text…

[heII_ish]

@Veserve

I have no idea how to apply rich text…

You’re probably gonna wanna do some string manipulation / pattern matching to search for keywords like print, local, true, etc.

If you meant that you don’t know how to use the rich text tags, then literally just read the page @nicemike40 linked

[Veserve]

I know how to use rich-text,
how do I perform a string-manipulation, im not that familiar with it, its my first time and I want to perfect this:

[nicemike40]

A slow version that should work as a first attempt would just be to call string.gsub a bunch for any patterns you want to match.

Make a table that maps regex patterns to replacements, where the replacements surround the text with tags.

Give me a sec and I’ll edit with an example.

[Veserve]

ok I think I understand…
Use gsub to replace a keyword with the richText version of a keyword?

[nicemike40]

Yeah. For instance, I made a textbox and a textlabel (with RichText enabled):

And then put a pattern for “local” or “function” followed by a variable name, which adds tags:

local syntaxPatterns = {
	["(local%s+)([a-zA-Z0-9]+)"] = '<font color="rgb(0,0,255)">%1</font><b><i>%2</i></b>',
	["(function%s+)([a-zA-Z0-9]+)"] = '<font color="rgb(255,0,0)">%1</font><u>%2</u>',
}
local function HighlightSyntax(source)
	for pattern, repl in pairs(syntaxPatterns) do
		source = string.gsub(source, pattern, repl)
	end
	
	return source
end

local function Update()
	script.Parent.TextLabel.Text = HighlightSyntax(script.Parent.TextBox.Text)
end

script.Parent.TextBox:GetPropertyChangedSignal("Text"):Connect(Update)

Update()

This results in:

You’ll note things like underscores don’t work in variable names because I just gave example patterns. It will be a bit of work to try and get the patterns really solid. You can try looking at existing regex-based syntax highlighters like the ones Sublime Text uses for lua for inspiration, or just come up with them yourself.

[Veserve]

Alright I understand, thank you very much!