Horje
How to Add Colors to JavaScript Console Outputs ?

To Add Colors to JavaScript Console Outputs, we have multiple approaches In this article, we will learn to Add colors to Javascript console outputs.

Below are the approaches used to add Colors to JavaScript Console Outputs:

Approach 1: Using %C

The %c placeholder is a special syntax that enables the application of CSS styling to specified sections of the console output. It allows programmers to format console messages according to CSS principles,

Syntax:

console.log("%c GeeksforGeeks", "color:green;");

Example: In this example, we are using the above-explained approach.

Javascript

let outputColor = "color:green; font-size:20px;"
console.log("%c GeeksforGeeks", outputColor);
console.log("%c A computer Science Portal", outputColor);

Output:

con-1.png

Approach 2: Using ANSI escape code

The output color of the console can be modified via JavaScript using ANSI escape codes. Console messages can have their appearance changed to improve readability and visual distinctiveness by inserting escape sequences, such as ‘\x1b[36m%s\x1b[0m’ for Green color.

Syntax:

console.log('\x1b[36m%s\x1b[0m', 'GeeksforGeeks');

Example: In this example, we are using the above-explained approach to change our output color in the console.

Javascript

console.log('\x1b[36m%s\x1b[0m', 'GeeksforGeeks');
console.log('\x1b[36m%s\x1b[0m', 'A computer science portal')

Output:

console-2.png




Reffered: https://www.geeksforgeeks.org


JavaScript

Related
How to Change the Color of HTML Element in JavaScript ? How to Change the Color of HTML Element in JavaScript ?
How to Create Functional Components using Vue Loader ? How to Create Functional Components using Vue Loader ?
Real-time chat application in JavaScript Real-time chat application in JavaScript
Tips and Tricks on JavaScript DOM Methods Tips and Tricks on JavaScript DOM Methods
Accordion using JavaScript Accordion using JavaScript

Type:
Geek
Category:
Coding
Sub Category:
Tutorial
Uploaded by:
Admin
Views:
11