Author: | kubetail-org |
---|---|
Views Total: | 38 views |
Official Page: | Go to website |
Last Update: | May 14, 2024 |
License: | MIT |
Preview:

Description:
Fancy-ANSI is a tiny JavaScript (TypeScript) library that converts text with ANSI terminal codes into browser-safe HTML.
It’s designed to be small, performant, and easy to use, while protecting against XSS attacks. Can be helpful for web developers who need to display ANSI-styled text in their web applications.
Understanding ANSI Markup and SGR Parameters
ANSI escape codes are special sequences of characters used to control text formatting and color in terminals. They begin with an escape character (\x1b
or \033
) followed by a series of parameters.
SGR (Select Graphic Rendition) parameters are a subset of ANSI escape codes that specifically handle text styling and color. For example, \x1b[31m
sets the text color to red, and \x1b[0m
resets the styling to the default. Fancy-ANSI handles these codes and renders them correctly in HTML.
How to use it:
1. Install Fancy-ANSI using your preferred package manager:
# npm npm install fancy-ansi # yarn yarn add fancy-ansi # pnpm pnpm add fancy-ansi
2. Import Fancy-ANSI and use it in your project:
// Vanilla JavaScript import { FancyAnsi } from 'fancy-ansi'; const fancyAnsi = new FancyAnsi(); fancyAnsi.toHtml('\x1b[34mCSS \x1b[33mScript\x1b[0m');
// React import { AnsiHtml } from 'fancy-ansi/react'; export const ExampleComponent = () => { const text = '\x1b[34mCSS \x1b[33mScript\x1b[0m'; return <AnsiHtml text={text} />; };
3. Fancy-ANSI allows customization using CSS variables. For instance, you can change the color of black text in dark mode:
:root { --ansi-black: #000; } .dark { --ansi-black: #FFF; }
4. The library also includes a Tailwind plugin, which enables developers to integrate with Tailwind CSS projects and access various built-in color palettes.
// tailwind.config.js module.exports = { plugins: [ require('fancy-ansi/plugin') ] }
/* index.css */ @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --ansi-black: theme(ansi.colors.vscode.black); --ansi-red: theme(ansi.colors.vscode.red); --ansi-green: theme(ansi.colors.vscode.green); --ansi-yellow: theme(ansi.colors.vscode.yellow); --ansi-blue: theme(ansi.colors.vscode.blue); --ansi-magenta: theme(ansi.colors.vscode.magenta); --ansi-cyan: theme(ansi.colors.vscode.cyan); --ansi-white: theme(ansi.colors.vscode.white); --ansi-bright-black: theme(ansi.colors.vscode.bright-black); --ansi-bright-red: theme(ansi.colors.vscode.bright-red); --ansi-bright-green: theme(ansi.colors.vscode.bright-green); --ansi-bright-yellow: theme(ansi.colors.vscode.bright-yellow); --ansi-bright-blue: theme(ansi.colors.vscode.bright-blue); --ansi-bright-magenta: theme(ansi.colors.vscode.magenta); --ansi-bright-cyan: theme(ansi.colors.vscode.cyan); --ansi-bright-white: theme(ansi.colors.vscode.white); } /* ... */ }
5. API methods.
- FancyAnsi.toHtml(input): Converts an input string containing ANSI codes into browser-safe HTML.
- FancyAnsi.hasAnsi(input): Checks if an input string contains ANSI markup.
- FancyAnsi.stripAnsi(input): Removes ANSI markup from an input string.