How to add color to different parts of a line

[Sshubam]

Hey actually i am using react lazy log for streaming logs from a websocket, however i want stuff like date, log level, message to be of different colours in the line.. how can I achieve that, can you please share any snippet or advice? Thanks.

[melloware]

@Sshubam are you in control of those web socket message? Like you control the log messages?

[Sshubam]

@Sshubam are you in control of those web socket message? Like you control the log messages?

Yes @melloware

[melloware]

OK Lazy log supports ANSI highlighting. See: https://melloware.github.io/react-logviewer/?path=/docs/stories-lazylog--docs

so that log line colored red.

Is just has ANSI tags wrapped around it like...

\x1b[31mCreate file target/dist/css/libs.css failed\x1b[39m

You can find all the ANSI tags here

const foregroundColors: AnisMap = {
    "30": "black",
    "31": "red",
    "32": "green",
    "33": "yellow",
    "34": "blue",
    "35": "magenta",
    "36": "cyan",
    "37": "white",
    "90": "grey",
};
const backgroundColors: AnisMap = {
    "40": "black",
    "41": "red",
    "42": "green",
    "43": "yellow",
    "44": "blue",
    "45": "magenta",
    "46": "cyan",
    "47": "white",
};
const styles: AnisMap = {
    "1": "bold",
    "3": "italic",
    "4": "underline",
};

[Sshubam]

@melloware i have full control over the log format... i just wanted to know how can I provide different volours to different parts of a line.. i read the docs but was unable to get it done

[melloware]

Yes so just wrap those different parsts in ANSI color tags

[melloware]

if you paste an example log line from one of your logs I can show you...

[Sshubam]

OK Lazy log supports ANSI highlighting. See: https://melloware.github.io/react-logviewer/?path=/docs/stories-lazylog--docs

so that log line colored red.

Is just has ANSI tags wrapped around it like...

\x1b[31mCreate file target/dist/css/libs.css failed\x1b[39m

You can find all the ANSI tags here

const foregroundColors: AnisMap = {

    "30": "black",

    "31": "red",

    "32": "green",

    "33": "yellow",

    "34": "blue",

    "35": "magenta",

    "36": "cyan",

    "37": "white",

    "90": "grey",

};

const backgroundColors: AnisMap = {

    "40": "black",

    "41": "red",

    "42": "green",

    "43": "yellow",

    "44": "blue",

    "45": "magenta",

    "46": "cyan",

    "47": "white",

};

const styles: AnisMap = {

    "1": "bold",

    "3": "italic",

    "4": "underline",

};

Oh i get it.. thank you so much.. i will try this out

[Sshubam]

Thanks! It worked.. thanks a lot :D

[melloware]

i as going to say too Python might even have Ansi coloring in their log lib built in?