Skip to content

Instantly share code, notes, and snippets.

@rohitsSpace
Last active September 21, 2023 08:18
Show Gist options
  • Save rohitsSpace/5a46a87c44370965d720c8d54eb6f353 to your computer and use it in GitHub Desktop.
Save rohitsSpace/5a46a87c44370965d720c8d54eb6f353 to your computer and use it in GitHub Desktop.
This versatile method enables you to print messages in vivid colours and customize the text to your liking. With printLineBreak, you can easily log messages, simplifying the debugging purposes. Customize your messages to your exact specifications and choose between displaying long, sorted.
interface TNeedNameChangeProps {
bgColor?: string;
fontStyle?: string;
fontWeight?: string;
[key: string]: any;
}
interface TCustomStyle extends TNeedNameChangeProps {
color?: string;
padding?: string;
margin?: string;
align?: string;
}
const needNameChangeProps: TNeedNameChangeProps = {
bgColor: 'background-color',
fontStyle: 'font-style',
fontWeight: 'font-weight',
};
const defaults = {
align: 'center',
bgColor: '#efbe66',
color: '#3c343f',
fontStyle: 'italic',
fontWeight: '700',
margin: '0 0 .5rem 0',
padding: '.5rem',
};
const getDefaultStyles = (customStyles: TCustomStyle) => {
return Object.entries({ ...defaults, ...customStyles })
.map(([key, value]) => {
const cssPropertyName = needNameChangeProps[key] || key;
return `${cssPropertyName}:${value}`;
})
.join(';\n');
};
const printLineBreak = (
message: string,
full: boolean = false,
customStyles: TCustomStyle = defaults
) => {
const logStyles = getDefaultStyles(customStyles);
const messageStyles = getDefaultStyles({
...customStyles,
color: customStyles.bgColor,
bgColor: customStyles.color,
});
if (full) {
console.log(
`%c=====================================================\n` +
`\t\t\tLine Break ${Date.now()}\t\t\t\t` +
` \n\t\t\t%c${message}%c\t\t\t` +
`\n=====================================================`,
logStyles,
messageStyles,
logStyles
);
} else {
console.log(
`%c\t\t\t%c${message}%c\t\t\t`,
logStyles,
messageStyles,
logStyles
);
}
};
@rohitsSpace
Copy link
Author

rohitsSpace commented Sep 20, 2023

Enhance your developer console experience with the powerful printLineBreak function!

This versatile method enables you to print messages in vivid colours and customize the text to your liking.

With printLineBreak, you can easily log messages, simplifying the debugging purposes. Customize your messages to your exact specifications and choose between displaying long, sorted, or neatly organized content.

Amplify your productivity and elevate your console logs with this method.

Feel free to share your ideas and suggestions to enhance this method. Your contributions are highly appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment