How do I customize the appearance of console.log messages stored in a string variable?

Looking to enhance the appearance of my console log output in a JavaScript script by utilizing different styling options.

Here's a sample scenario:

s=`Title 1 \n This is some text that follows the first title`;
s=`${s} \n Title 2 \n This is some other text that follows`;
console.log(s);

Desired output:

Title 1

This is some text that follows the first title

Title 2

This is some other text that follows

Struggling to achieve this with available formatting options, such as

console.log(`%c ${s}`, 'font-weight:bold');

since it bolds everything inside.

Any tips or suggestions?

Appreciate the help!

Answer №1

To apply unique styles to various sections of the log, it is necessary to utilize multiple occurrences of %c and include additional style arguments.

console.log(`%cTitle 1 \n %cThis is some text that follows the first title`, 'font-weight:bold', 'font-weight: normal');

To my knowledge, this method remains the sole means to achieve this desired effect.

Answer №2

Simply log in on several occasions:

 console.log(`%c Heading 1`, 'font-weight:bold');
 console.log("content");

Answer №3

After spending some time on performance logging, I stumbled upon an interesting discovery related to this question.

var totalTime = 0.634563;
console.log("Enhanced Widget Modal Performance Report: Operation Time = %c" + totalTime.toFixed(2) + " seconds.", " font-weight: bold; color: #000099");    

The key is to ensure that %c comes before the variable in the string concatenation process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to retrieve the same post from one controller and access it in another?

Hello, I am currently exploring the world of Full Stack web development and have stumbled upon a challenge. My tech stack includes mongodb, mongoose, node, and express. Within my project, I have implemented two controllers - one for user signup and anothe ...

Tips for implementing react portal functionality in react 15

Working on my current project with react 15, I am looking to display an overlay on the screen when a dropdown is opened. While React 16 allows us to utilize React portal to render children into a DOM node outside of the parent component's hierarchy, h ...

Utilizing the MEAN stack to establish a connection with a simulated data collection

Currently, I am diving into the world of M.E.A.N stack development. As part of my learning process, I have successfully set up a test page where Angular.js beautifully displays and re-orders data based on search criteria. To challenge myself further, I dec ...

Discover the ultimate solution to disable JSHint error in the amazing Webstorm

I am encountering an error with my test files. The error message states: I see an expression instead of an assignment or function call. This error is being generated by the Chai library asserts. Is there a way to disable this warning in Webstorm? It high ...

GraphQL/Relay Schema "Field cannot be queried..."

I'm encountering an issue when trying to query specific fields in graphql/relay. My goal is to retrieve the "courseName" field for Courses from the schema provided below. For instance, if I query the User with: { user(id:1){firstname,lastname}} T ...

Effective ways to check for the time discrepancy between dates in moment.js

My server is set to use UTC date format and I am running my node server in UTC as well. I am looking to determine if the current time in Indian timezone (which is +5.30) is greater than 8AM, and if so, send an email notification. How can I achieve this u ...

What steps should I take to ensure my .js.erb files are compatible with Rails 7?

I have been following a Rails Tutorial on Building a Link Shortener with Rails 6 and Ruby 2.xx to create an app. However, I am using Rails 7.0.4 and Ruby 3.0.0. I encountered an issue with my create.js.erb file not functioning properly. After some research ...

Angular 2: Dynamically Adjusting View Components Based on URL Path

Apologies for the unconventional title. I struggled to come up with a better one. My goal is to develop an application with a simple 3-part structure (header / content / footer). The header should change based on the active route, where each header is a s ...

What is the process of obtaining User properties through a URL and utilizing them as variables in JavaScript?

I need to retrieve the city properties: 918 using req.params.userMosque from the URL '/shalat/:userMosque'. I want to assign it to the variable city for customizing my API url request. However, it seems like it's not working as expected. I h ...

Turn off link preview feature on Android messages

As a developer, I am looking for a way to disable or hide link previews on Android devices when someone receives a text message with a link to our website. I still want the URL address to be visible, but I prefer to keep the link previews on IOS devices. I ...

Create a notification box that appears after a successful axios request

One of the functions I have is to store an expense in my application. storeExpense(context, params){ axios.post('api/expenses', params) .then( response => { context.dispatch('getExpenses') }) .catch( error =&g ...

Having difficulty with pagination within a callback function

I have been attempting to paginate in a call to a callback function, but I am encountering an error on the second call. Here is what my function does: let content = '' let size = 100 let from = 1 function result(size, from, callback) { ap ...

Enhancing the appearance of specific text in React/Next.js using custom styling

I have a table and I am currently working on implementing a search functionality that searches for an element and highlights the search terms as they are entered into the search bar. The search function is functional, but I am having trouble with the highl ...

Unable to reach the array file

Having trouble accessing the elements of the file array const p_page = postP.new_pages; const p_page_o = postP.new_pages_order; const p_page_o_len = p_page_o.length; if (p_page_o_len > 0) { for (let i = 0; i < p_page_o_len; i++) { c ...

Developing a realtime search feature using AJAX and CodeIgniter

Attempting to implement a live search feature in CodeIgniter for the first time. As a newcomer to web development, still in the learning process. Came across a tutorial on how to achieve this here. Struggling with adapting the code from the tutorial to fi ...

Let's unravel this JavaScript enigma: the code snippet window.confirm = divConfirm(strMessage) awaits

Imagine a scenario where you have an old website with a lot of existing JS code. If a user wants to update all the alert messages to modern, stylish Div-based alerts commonly used in jQuery, YUI, Prototype, etc., there are primarily three types of JS dialo ...

Message from Discord: Unable to access the property 'MessageEmbed' because it is undefined

Attempting to create a simple welcome message embed. Here is my main.js file without the login token: const Discord = require('discord.js'); const client = new Discord.Client(); const MessageEmbed = new Discord.MessageEmbed(); const prefix = &ap ...

Is there a way to ensure that a statement will not execute until the completion of a preceding function?

I am encountering an issue where the window.open function is being called too quickly, causing my other function not to finish and post in time within my onclick event. I attempted to address this by setting a timeout on the trackData() function, but it o ...

creating grunt shortcuts with specified option values

Is it possible to create custom aliases in Grunt, similar to npm or bash? According to the Grunt documentation, you can define a sequence of tasks (even if it's just one). Instead of calling it "aliasing", I believe it should be referred to as "chaini ...

Learn how to redirect pages or app folders to a subdomain using Next.js

I have been extensively searching the internet for information on this topic, but I haven't come across any relevant articles. For example, in the root of my project, there's a folder called pages with the following file structure: | 404.js ...