Creating A Code Box

Help and Feedback Scripting Support
#1

Now, I had this great idea to create a code box inside of Roblox but I also want to make it coloured.

Example:

Screen Shot 2020-07-21 at 4.05.58 pm
Screen Shot 2020-07-21 at 4.05.58 pm874×237 26.6 KB

See how the text is coloured? I was wondering how I would create that.

Another thing is when you go to type something into a text box again is that the text box will clear. I was wondering how I could disable that so I can edit the box without it clearing.

Thanks :smiley:

Edit: I found out how to disable the text clear on focus. Now, I was thinking of using string.match for colouring the text?

#2

You are going to need to write a lexer for that. If you want to underline syntax errors, unused variables, etc. you will need to write a linter.

#3

This would be very complicated to create on your own if your not a strong scripter since roblox does not currentlt support Rich text, but I believe they are planning to, here is a module that implements rich text in roblox: https://www.roblox.com/library/1014847041/Rich-Text-Markup. This system will be very difficult to create since the only game on roblox that has a feature like this is lua learning(https://www.roblox.com/games/1334669864/Lua-Learning), which I believe the guy said took about 2 years to create.

2 Likes
#4

Now with this Module, I should be able to highlight it in Lua Colours?

1 Like
#6

Rich Text Beta was released.

2 Likes
#7

Screenshot_20200721-101439
Screenshot_20200721-101439720×1440 397 KB

Roblox supports rich text

2 Likes
#8

They do not fully support rich text at the moment, I’m not sure what is the relevance of the image you posted.

3 Likes
#9

Do you not see the Beta in the tweet? This will not work live in game, only in studio.

3 Likes
#10

sorry I sent before the wrong image :pensive:

1 Like
#11

if it doesnt work in-game then what’s the point of adding it?!

1 Like
#12

It’s a beta feature so roblox can see all the bugs, if any, before it goes live in games.

2 Likes
#13

It’s in Beta so then people can test it in studio and see if it works etc… and also look for bugs before being released for proper use.

1 Like
#14

Also, that module I linked currently has way more features that roblox’s beta, and this feature most likely won’t be out of beta for a few more months.

1 Like
#15

As @incapaz said, a lexer will be needed, and this is a bit more complicated and will take a while. A lexer takes the whole string and gives you each needed piece of text that you need. Note that in this case, you only need to lex based on each color, so whatever class/tutorial you watch, I recommend you don’t follow it exactly and make changes as needed.

So in your lexer, the following code should give you the following text:

local x = "hello there"

gives you:

local
x =
“hello there”

This is how I did it. After lexing, I would store the results in a table. This was a table of values which stored both the text and the word type (such as string, regular, etc). Then, I would go through the table, make a bunch of textlabels with their own colors and fonts, and put them all together.

Here is what it looks like.

Screen Shot 2020-07-21 at 9.23.38 AM
Screen Shot 2020-07-21 at 9.23.38 AM428×762 51.9 KB

Also, textservice has some useful functions for getting textsize if I remember right.

2 Likes
#16

My brain cannot comprehend :rofl:

I’m not sure if I can do this since I’m not even sure what a lexer is.

#17

It will take some time and you would need to learn it, but I’m sure there are online videos if you really want to get into it.

1 Like
#18

There is a game “Lua Learning” made by boatbomber, this wonderful game has a code box, which supports the text that can be coloured, for instance the errors made in script. You can ask him an advice or a suggestion, he most likely tell you something about it, but he won’t give the whole code box script cause it’s a really hard work. Imagine doing a whole workable Lua code box inside the Roblox, that acts similar or almost matches the real code box in Roblox Studio.

I think the best way to contact with boatbomber is through twitter or discord or maybe through DevForum. @boatbomber

Good luck

#19

Thanks for pinging me, @SurpriseInventor!

As someone said earlier, you need a lexer to break the text down into it’s Lua “components” aka tokens.

Lucky for you, I open sourced one!
https://devforum.roblox.com/t/lexer-for-rbx-lua/183115/10

Using that, you can run the TextBox.Text through the lexer and create colored TextLabels based on the resulting token stream for your syntax highlighting!

5 Likes
#20

Now, I just checked out your script and now that i’ve seen how it works, do I need to match the tokens with a colour using a RichPresence module?

#21

Doesn’t have to be Defaultio’s module, but yeah you’d assign a color per token and draw that using whatever module or method you want

2 Likes