1.0.7 • Published 9 months ago
babel-plugin-custom-console-style v1.0.7
custom console.log style
English | 中文
Introduction
babel-plugin-custom-console-style
is a babel plugin that changes the output style of console.log
Installation
npm i babel-plugin-custom-console-style -D
Config
babel.config.js
module.exports = {
plugins: [
"custom-console-style"
]
};
//or pass in the custom style
module.exports = {
plugins: [
[
"custom-console-style",
{
themeStyle: {
yellow:{
background: "#ffff33",
color: "#000",
border: "1px solid red"
}
}
}
]
]
};
.babelrc
{
"plugins": [
"custom-console-style"
]
}
//or pass in the custom style
{
"plugins": [
[
"custom-console-style",
{
"themeStyle": {
"yellow":{
"background": "#ffff33",
"color": "#000",
"border": "1px solid red"
}
}
}
]
]
}
Use examples
By adding the comment //test|red
after the console.log(), test
is the precursor to applying the custom style, and red
means using the red theme, splitting by |
, passing the settings to the plugin
console.log("Hello World")//Rain|red
console.log("Hello World")//Rain|blue
console.log("Hello World")//Rain|green
console.log("Hello World")//Rain|pink
View in the console
Theme
Default theme
const defaultStyle = {
background: "#4caf50",
color: "white",
padding: "5px",
"border-radius": "5px"
}
const customThemeStyle = {
red: {
background: "#f44336"
},
green: {
background: "#4caf50"
},
blue: {
background: "#2196f3"
},
pink: {
background: "#ff69b4"
}
}
Custom themes
Pass in the following configuration
{
themeStyle:{
yellow:{
background: "#ffff33",
color: "#000",
border: "1px solid red"
},
black:{
background: "#000",
color: "green"
}
}
}
Use a custom configuration
console.log("Hello World")//Rain|yellow
console.log("Hello World")//Rain|black
View in the console
In the end
If you want to add your own theme color, please contact me