@@ -93,6 +93,153 @@ console.debug("Debug info:", { x: 10, y: 20 });
9393console .debug (" Function called with args:" , arguments );
9494```
9595
96+ ## CSS Styling Support
97+
98+ Andromeda's console supports CSS-like styling for enhanced visual output. You can use special formatting directives to style your console messages.
99+
100+ ### ` console.log(message, ...styles) `
101+
102+ When the first argument contains ` %c ` placeholders, subsequent arguments are treated as CSS-like style strings.
103+
104+ ** Supported CSS Properties:**
105+
106+ - ` color ` - Text color (named colors, hex, rgb)
107+ - ` background-color ` - Background color
108+ - ` font-weight ` - Font weight (normal, bold)
109+ - ` font-style ` - Font style (normal, italic)
110+ - ` text-decoration ` - Text decoration (none, underline)
111+
112+ ** Example:**
113+
114+ ``` typescript
115+ // Basic colored text
116+ console .log (" %cHello World!" , " color: red" );
117+
118+ // Multiple styles
119+ console .log (" %cSuccess!" , " color: green; font-weight: bold" );
120+
121+ // Background colors
122+ console .log (" %cWarning" , " background-color: yellow; color: black" );
123+
124+ // Multiple styled sections
125+ console .log (
126+ " %cError: %cOperation failed" ,
127+ " color: red; font-weight: bold" ,
128+ " color: gray"
129+ );
130+ ```
131+
132+ ### Advanced Styling Examples
133+
134+ ``` typescript
135+ // Header styling
136+ console .log (
137+ " %c🚀 Application Started" ,
138+ " color: blue; font-weight: bold; background-color: lightblue"
139+ );
140+
141+ // Success message
142+ console .log (
143+ " %c✅ Success: %cData saved successfully" ,
144+ " color: green; font-weight: bold" ,
145+ " color: gray"
146+ );
147+
148+ // Error styling
149+ console .log (
150+ " %c❌ Error: %cConnection failed" ,
151+ " color: red; font-weight: bold" ,
152+ " color: darkred"
153+ );
154+
155+ // Debug with styling
156+ console .log (
157+ " %c[DEBUG] %cUser action: %c%s" ,
158+ " color: purple; font-weight: bold" ,
159+ " color: blue" ,
160+ " color: black; font-style: italic" ,
161+ " button_clicked"
162+ );
163+ ```
164+
165+ ### Color Examples
166+
167+ ``` typescript
168+ // Named colors
169+ console .log (" %cRed text" , " color: red" );
170+ console .log (" %cBlue text" , " color: blue" );
171+ console .log (" %cGreen text" , " color: green" );
172+
173+ // Hex colors
174+ console .log (" %cCustom color" , " color: #ff6b6b" );
175+ console .log (" %cAnother color" , " color: #4ecdc4" );
176+
177+ // RGB colors
178+ console .log (" %cRGB color" , " color: rgb(255, 107, 107)" );
179+ console .log (" %cRGBA color" , " color: rgba(78, 205, 196, 0.8)" );
180+ ```
181+
182+ ### Practical Styling Patterns
183+
184+ ``` typescript
185+ // Log levels with styling
186+ function styledLog(level : string , message : string , ... args : any []) {
187+ const styles = {
188+ info: " color: blue; font-weight: bold" ,
189+ warn: " color: orange; font-weight: bold" ,
190+ error: " color: red; font-weight: bold" ,
191+ success: " color: green; font-weight: bold"
192+ };
193+
194+ console .log (` %c[${level .toUpperCase ()}] %c${message } ` ,
195+ styles [level ] || " color: gray" ,
196+ " color: black" ,
197+ ... args
198+ );
199+ }
200+
201+ // Usage
202+ styledLog (" info" , " Server starting on port 3000" );
203+ styledLog (" warn" , " Deprecated API usage detected" );
204+ styledLog (" error" , " Database connection failed" );
205+ styledLog (" success" , " User authenticated successfully" );
206+ ```
207+
208+ ### Component-based Styling
209+
210+ ``` typescript
211+ class Logger {
212+ private static readonly STYLES = {
213+ timestamp: " color: gray; font-size: 0.8em" ,
214+ level: {
215+ info: " color: blue; font-weight: bold" ,
216+ warn: " color: orange; font-weight: bold" ,
217+ error: " color: red; font-weight: bold" ,
218+ debug: " color: purple; font-weight: bold"
219+ },
220+ message: " color: black"
221+ };
222+
223+ static log(level : keyof typeof Logger .STYLES .level , message : string ) {
224+ const timestamp = new Date ().toISOString ();
225+ console .log (
226+ " %c[%s] %c%s %c%s" ,
227+ Logger .STYLES .timestamp ,
228+ timestamp ,
229+ Logger .STYLES .level [level ],
230+ level .toUpperCase (),
231+ Logger .STYLES .message ,
232+ message
233+ );
234+ }
235+ }
236+
237+ // Usage
238+ Logger .log (" info" , " Application initialized" );
239+ Logger .log (" warn" , " Configuration file not found, using defaults" );
240+ Logger .log (" error" , " Failed to connect to database" );
241+ ```
242+
96243## Output Formatting
97244
98245The console automatically converts objects to string representations for
0 commit comments