Syntaxhighlighting in textbox?

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:

If anybody can help, thanks in advance.

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

can you give me an example of how I would turn
image
into highlighted text, 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

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:
image

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.

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

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

image

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.

5 Likes

Alright I understand, thank you very much!