Skip to content

Commit 606a24f

Browse files
authored
feat(ext/console): CSS support (#99)
* feat: console rewrite * chore: clippy * chore: fmt
1 parent cd82f8c commit 606a24f

File tree

4 files changed

+1197
-34
lines changed

4 files changed

+1197
-34
lines changed

examples/console.ts

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,49 @@ if (thoughts) {
1515
} else {
1616
alert("Thank you for not sharing your data.");
1717
}
18+
// Basic color styling
19+
console.log("%cThis text is red", "color: red");
20+
console.log("%cThis text is blue", "color: blue");
21+
console.log("%cThis text is green", "color: green");
22+
23+
// Background colors
24+
console.log("%cWhite text on red background", "color: white; background-color: red");
25+
console.log("%cBlack text on yellow background", "color: black; background-color: yellow");
26+
27+
// Font styling
28+
console.log("%cThis text is bold", "font-weight: bold");
29+
console.log("%cThis text is italic", "font-style: italic");
30+
console.log("%cThis text is underlined", "text-decoration: underline");
31+
32+
// Combined styling
33+
console.log("%cBold red text with blue background", "color: red; background-color: blue; font-weight: bold");
34+
console.log("%cItalic green text", "color: green; font-style: italic");
35+
36+
// Multiple styled segments in one message
37+
console.log("%cRed %cBlue %cGreen", "color: red", "color: blue", "color: green");
38+
39+
// Hex color support
40+
console.log("%cHex color #ff6600", "color: #ff6600");
41+
console.log("%cHex background #003366", "background-color: #003366; color: white");
42+
43+
// RGB color support
44+
console.log("%cRGB color", "color: rgb(255, 102, 0)");
45+
console.log("%cRGB background", "background-color: rgb(0, 51, 102); color: white");
46+
47+
// Mix of styled and unstyled text
48+
console.log("%cStyled%c and %cunstyled%c text", "color: red; font-weight: bold", "", "color: blue", "");
49+
50+
// Complex example with multiple format specifiers
51+
console.log("%cUser: %s, Age: %d, Score: %f", "color: cyan; font-weight: bold", "John", 25, 98.5);
52+
53+
// Error styling similar to browser dev tools
54+
console.log("%c[ERROR]%c Something went wrong!", "color: white; background-color: red; font-weight: bold", "color: red");
55+
56+
// Success styling
57+
console.log("%c✓ Success:%c Operation completed", "color: green; font-weight: bold", "color: green");
58+
59+
// Warning styling
60+
console.log("%c⚠ Warning:%c Check your input", "color: orange; font-weight: bold", "color: orange");
61+
62+
// Debug styling
63+
console.log("%c[DEBUG]%c Variable state:", "color: gray; font-style: italic", "color: gray");

0 commit comments

Comments
 (0)