{"id":105527,"date":"2025-04-11T08:50:29","date_gmt":"2025-04-11T04:20:29","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/heres-how-nuejs-applies-colors-to-the-console-output-in-the-cli-5gdi\/"},"modified":"2025-04-11T08:50:29","modified_gmt":"2025-04-11T04:20:29","slug":"heres-how-nuejs-applies-colors-to-the-console-output-in-the-cli-5gdi","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/heres-how-nuejs-applies-colors-to-the-console-output-in-the-cli-5gdi\/","title":{"rendered":"\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 Nue.js \u0631\u0646\u06af \u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062e\u0631\u0648\u062c\u06cc \u06a9\u0646\u0633\u0648\u0644 \u062f\u0631 CLI \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f."},"content":{"rendered":"
\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0642\u0627\u0644\u0647 \u060c \u0645\u0627 \u0628\u0631\u0631\u0633\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 Nue.js \u0631\u0646\u06af \u0647\u0627 \u0631\u0627 \u062f\u0631 \u0633\u06cc\u0627\u0647\u0647\u0647\u0627\u06cc \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 \u06a9\u0646\u0633\u0648\u0644 \u062f\u0631 CLI \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f. <\/p>\n

<\/p>\n

\u0645\u0646 \u0627\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 CLI.JS \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0645.<\/p>\n

\n
async function printVersion() {\n  log(`Nue ${version} ${colors.green('\u2022')} ${getEngine()}`)\n}\n<\/code><\/pre>\n
\n
\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0639\u0645\u0644\u06a9\u0631\u062f \u0648\u0631\u0648\u062f \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0627\u0632 \u0628\u0633\u062a\u0647 \u0647\u0627\/nuekit\/src\/upil.js \u0648\u0627\u0631\u062f \u0645\u06cc \u0634\u0648\u062f<\/p>\n
\n
export function log(msg, extra=\"\") {\n  console.log(colors.green('\u2713'), msg, extra)\n}\n<\/code><\/pre>\n
\n
\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\u0631\u0646\u06af \u0647\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0686\u06cc\u0633\u062a\u061f \u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0646\u06af \u062f\u0631 \u0647\u0645\u0627\u0646 \u067e\u0631\u0648\u0646\u062f\u0647 \u062a\u0639\u0631\u06cc\u0641 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u06a9\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0627\u0631\u062f:<\/p>\n
\n
\/\/ \u0631\u0646\u06af \u0647\u0627\u06cc \u06a9\u0646\u0633\u0648\u0644 \u0635\u0627\u062f\u0631 \u06a9\u0646\u0646\u062f\u0647 \u0631\u0646\u06af\u0647\u0627\u06cc const \u0631\u0646\u06af = \u0639\u0645\u0644\u06a9\u0631\u062f () {\u06a9\u062f\u0647\u0627\u06cc const = {\u0642\u0631\u0645\u0632: 31 \u060c \u0633\u0628\u0632: 32 \u060c \u0632\u0631\u062f: 33 \u060c \u0622\u0628\u06cc: 34 \u060c \u0645\u06af\u0646\u062a\u0627: 35 \u060c \u0633\u06cc\u0627\u0646: 36 \u060c \u062e\u0627\u06a9\u0633\u062a\u0631\u06cc: 90} const fns = {} const nocolor = process.env.no_color || ![key] = msg => nocolor\u061f msg: `\\ u001b[${codes[key]} m $ {msg} \\ u001b[39m`\n  }\n  return fns\n}()\n<\/code><\/pre>\n
\n
\n    Enter fullscreen mode<\/title>\n    \n<\/svg><\/p>\n
    Exit fullscreen mode<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
I find this function really interesting because in the wild, OSS projects use Picocolors or chalk to apply colors to the console output in the CLI.<\/p>\n
There\u2019s codes and noColor is set to true if there is an env, NO_COLOR, or when the platform is \u2018win32\u2019 and TERM is set (not sure what this TERM is).<\/p>\n
The trick is in the below code:<\/p>\n
\n
for (const key in codes) {\n    fns[key] = msg => nocolor\u061f msg: `\\ u001b[${codes[key]} m $ {msg} \\ u001b[39m`\n  }\n<\/code><\/pre>\n
\n
\n    Enter fullscreen mode<\/title>\n    \n<\/svg><\/p>\n
    Exit fullscreen mode<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
Here a \\u001b[${codes[key]} m $ {msg} \\ u001b[39m[39m<\/code> \u0627\u0633\u062a \u0631\u0634\u062a\u0647 \u0627\u0644\u06af\u0648\u06cc<\/strong> \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u062f\u0631 JavaScript \u06cc\u0627 Typescript<\/strong> \u0628\u0631\u0627\u06cc \u0642\u0627\u0644\u0628 \u0628\u0646\u062f\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u062e\u0631\u0648\u062c\u06cc \u06a9\u0646\u0633\u0648\u0644 \u0628\u0627 \u0631\u0646\u06af<\/strong> \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u06a9\u062f\u0647\u0627\u06cc \u0641\u0631\u0627\u0631 ANSI<\/strong>\u0628\u0634\u0631 \u062c\u0627\u0644\u0628<\/p>\n
\n
\n
\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n