đź–Ť Rich Text styling done right
I recreated this NPM Package for Roblox’s rich text
Also this looks way better on Github and includes more information.
Guide
Highlights
- Expressive API
- Highly performant
- No dependencies
- Ability to nest styles
- Auto-detects color support
- Clean and focused
- Actively maintained
- Extremely Lightweight (less than ~270 lines)
- Proper Typing for AutoFill
Install
Roblox Console
Install with console here
Wally
[dependencies]
chalk = "perthys/chalk@1.0.3"
Usage
Blue Text Example
Chalk has a very simple but powerful API
local ReplicatedStorage = game:GetService("ReplicatedStorage");
local Chalk = require(ReplicatedStorage:WaitForChild("Chalk"));
local TextBox = script.Parent;
TextBox.Text = Chalk.blue('Hello world!')
Multi String Example
Chalk comes with an easy to use composable API where you just chain and nest the styles you want.
local ReplicatedStorage = game:GetService("ReplicatedStorage");
local Chalk = require(ReplicatedStorage:WaitForChild("Chalk"));
local TextBox = script.Parent; TextBox.RichText = true;
local function Update(String) TextBox.Text = String; task.wait(1); end
Update(Chalk.blue("Hello") .. 'World' .. Chalk.red("!"))
Update(Chalk.blue.bold("Hello world!"))
Update(Chalk.blue("Hello", "World!", "Foo", "bar", "biz", "baz"))
Update(Chalk.red("Hello", Chalk.underline("world") .. "!"))
Update(Chalk.green("I am a green line " .. Chalk.blue.underline.bold("with a blue substring") .. " that becomes green again!"))
Update(("CPU: %s \nRAM: %s \nDISK: %s"):format(Chalk.red("90%"), Chalk.green("40%"), Chalk.yellow("70%")))
Update(Chalk.color(123, 45, 67).underline("Underlined reddish color"))
Update(Chalk.color("#DEADED").bold("Bold gray!"))
Theme Creation
Easily define your own themes
local ReplicatedStorage = game:GetService("ReplicatedStorage");
local Chalk = require(ReplicatedStorage:WaitForChild("Chalk"));
local TextBox = script.Parent; TextBox.RichText = true;
local error = Chalk.bold.red;
local warning = Chalk.color("#FFA500");
local function Update(String) TextBox.Text = String; task.wait(1); end
Update(error("Error!"))
Update(warning("Warning!"));
Take advantage of string substitution:
local ReplicatedStorage = game:GetService("ReplicatedStorage");
local Chalk = require(ReplicatedStorage:WaitForChild("Chalk"));
local TextBox = script.Parent; TextBox.RichText = true;
local function Update(String) TextBox.Text = String; task.wait(1); end
local Name = "Builderman";
Update(Chalk.green(("Hello %s"):format(Name)))
API
Chalk Syntax and Typing
Example:
chalk[ ArgumentStyle ] -> (...: StyleArgs) -> chalk(...: string)
chalk.size(40)("test");
chalk[ ModifierStyle ] -> chalk(...: string)
chalk.bold("test");
chalk[ ArgumentStyle ] -> (...: StyleArgs) -> chalk[ ArgumentStyle ] -> (...) -> chalk(...: string)
chalk.size(40).color(40,20,30)("test");
chalk[ ArgumentStyle ] -> (...: StyleArgs) -> chalk[ ModifierStyle ] -> chalk(...: string)
chalk.size(40).bold("test");
chalk[ ModifierStyle ] -> chalk[ ModifierStyle ] -> chalk(...: string)
chalk.red.bold("test");
chalk[ ModifierStyle ] -> chalk[ ArgumentStyle ] -> (...: StyleArgs) -> chalk(...: string)
chalk.red.size(40)("test");
Chain styles calls the last Style as a method with a string argument.
Order doesn’t matter, and earlier Styles take priority in case of a conflict.
This simply means that chalk.red.yellow.green is equivalent to chalk.red.
Styles
Modifier Styles
-
Chalk.bold- Make the text bold -
Chalk.italic- Make the text italic -
Chalk.underline- Underline the text -
Chalk.strikethrough- Strike through the text -
Chalk.uppercase- Convert text to uppercase -
Chalk.smallcaps- Convert text to small capitals
Argument Modifier Style
-
Chalk.color(Hex) | Chalk.color(R, G, B) | Chalk.color(Color3.new())- Set the color -
Chalk.size([<Size>])- Set the size of the text (Number) -
Chalk.face([<Face>])- Set the typeface of the text (String) -
Chalk.family([<rbxasset://>])- Set the font family from an asset (String) -
Chalk.weight([<Weight>])- Set the font weight (String) -
Chalk.transparency([<Transparency>])- Set the transparency of the text (Number 0-1) -
Chalk.stroke({Color = [<Color>], Joins = [<Joins>], Thickness = [<Thickness>], Transparency = [<Transparency>]})- Define stroke properties: color (Color3), joins (String), thickness (Number), and transparency (Number)
Chalk.stroke({
Color = [<Color>],
Joins = [<Joins>],
Thickness = [<Thickness>],
Transparency = [<Transparency>]
})
Example Game
Colors
-
Chalk[<BrickColorName>]- Set the color to a BrickColorColors -
Chalk.white- Set the color to white -
Chalk.black- Set the color to black -
Chalk.red- Set the color to red -
Chalk.brown- Set the color to brown -
Chalk.orange- Set the color to orange -
Chalk.yellow- Set the color to yellow -
Chalk.lime- Set the color to lime -
Chalk.green- Set the color to green -
Chalk.blue- Set the color to blue -
Chalk.purple- Set the color to purple -
Chalk.pink- Set the color to pink
Color3, 256 RGB, Hex and BrickColor support
Chalk supports Color3, 256 RGB, Hex and BrickColor.
Examples:
Chalk.color('#DEADED').underline('Hello, world!')Chalk.color(15, 100, 204)Chalk.color(Color3.fromRGB(100, 255, 255))Chalk.nougat
The following color models can be used:
-
rgb- Example:chalk.color(255, 136, 0).bold('Orange!') -
hex- Example:chalk.color('#FF8800').bold('Orange!') -
Color3- Example:chalk.color(Color3.fromRGB(255, 136, 0)).bold("Orange") -
BrickColor- Examplechalk["Earth orange"]
Origin story
I wanted to make the npm package chalk for roblox luau richtext because I really did not want to do styling manually.
Comments
- If Roblox adds support for background text color directly with RichText I will also add support.
- If you have any issues or suggestions best way to contact me would be through discord
Perthys#0.
Maintainers
-
Perth |
Perthys#0
