https://github.com/ncpa0/termx-markup

Markup based text formatting for terminal in JavaScript environments.
https://github.com/ncpa0/termx-markup

ansi cli color console format formatter formatting html javascript markup nodejs string terminal text xml

Last synced: 24 days ago
JSON representation

Markup based text formatting for terminal in JavaScript environments.

• Host: GitHub
• URL: https://github.com/ncpa0/termx-markup
• Owner: ncpa0
• License: mit
• Created: 2023-01-07T21:15:50.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2026-04-24T11:03:53.000Z (2 months ago)
• Last Synced: 2026-04-24T12:34:17.766Z (2 months ago)
• Topics: ansi, cli, color, console, format, formatter, formatting, html, javascript, markup, nodejs, string, terminal, text, xml
• Language: TypeScript
• Homepage:
• Size: 2.67 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# termx-markup

![GitHub](https://img.shields.io/github/license/ncpa0cpl/termx-markup?style=for-the-badge)

![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/ncpa0cpl/termx-markup/test.yml?branch=master&style=for-the-badge)

[![npm](https://img.shields.io/npm/v/termx-markup?style=for-the-badge)](https://www.npmjs.com/package/termx-markup)

![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/termx-markup?style=for-the-badge)

![GitHub last commit](https://img.shields.io/github/last-commit/ncpa0cpl/termx-markup?style=for-the-badge)

## Usage

### Print markup

```tsx

import { Output, html } from "termx-markup";

Output.setDefaultPrintMethod(console.log); // (optional) print using console.log

const markup = html`

  

    Hello

    
 in my 

    world!

  

`;


Output.println(markup);

```

#### Output:

![Hello in my World!](./demo/example1.png)

### Only formatting

```tsx

import { MarkupFormatter, html } from "termx-markup";

const markup = html`

  

    Hello

    
 in my 

    world!

  

`;


const formatted = MarkupFormatter.format(markup);

// formatted = "\u001b[31mHello \u001b[34min my\u001b[0m\u001b[31m world!\u001b[0m"

console.log(formatted);

```

#### Output:

![Hello in my World!](./demo/example2.png)

### Define custom colors

```tsx

import { Output, MarkupFormatter, html } from "termx-markup";

MarkupFormatter.defineColor("burgundy", "rgb(128, 0, 32)");

MarkupFormatter.defineColor("mauve", "#E0B0FF");

MarkupFormatter.defineColor("teal", { r: 0, g: 128, b: 128 });

const markup = html`

  Burgundy

  Mauve

  Teal

`;

Output.print(markup);

```

#### Output:

![Burgundy, Mauve, Teal](./demo/example3.png)

### Printing lists

```tsx

import { Output, html } from "termx-markup";

Output.print(html`

  Drinks:

  


    
Coffee

    
Tea

    


      Milk

      


        
Skim

        
Whole

      

    

  

`);

```


#### Output:

![Drinks: Coffee Tea Milk Skim Whole](./demo/example4.png)

## Supported tags

- `` - regular text, trims white-space characters and removes end-line characters

- `` - same as span, but prints a new line character at the end

- `
` - preformatted text, all white-space characters will be preserved

- `
` - prints a new line character

- `` - prints a space character

- `
` - ordered list, each child element is required to ba a `
` tag

- `
` - unordered list, each child element is required to ba a `
` tag, accepts additional attribute `type` (string) which can be of value `circle`, `square` or `bullet` (default is `bullet`)

- `` - adds left padding to it's content, accepts attribute `size` (number) which determines the number of spaces to print

- `` - adds a border around it's content, possible frame attributes:

  - `padding=""`

  - `padding-left=""`

  - `padding-right=""`

  - `padding-top=""`

  - `padding-bottom=""`

  - `padding-horizontal=""`

  - `padding-vertical=""`

  - `height=""`

  - `max-height=""`

  - `width=""`

  - `max-width=""`

  - `hcenter` (boolean)

  - `hend` (boolean)

  - `vcenter` (boolean)

  - `vend` (boolean)


## Inline and Block elements

There are two display types of elements, `inline` and `block`.

Inline elements are always rendered next to each other within the same line, if there are any white-spaces between the inline elements it will be replaced with a single space.

Block elements, start with a line break character, unless the block element is the first one, and end with a line break, unless the block element is the last one.

#### Inline elements:

- ``

- `
`

- `
`

- ``

- `
`


#### Block elements:

- ``

- ``

- ``

- `
`

- `
`


## Supported attributes

Following attributes are available on all tags:

- `color` - color of the text (css-like rgb or a color name)

- `bg` - background color of the text (css-like rgb or a color name)

- `bold` - bold text (boolean)

- `dim` - dimmed text (boolean)

- `italic` - italic text (boolean)

- `underscore` - underlined text (boolean)

- `blink` - blinking text (boolean)

- `invert` - inverse color text (boolean)

- `strike` - strike-through text (boolean)

- `no-inherit` - prevents inheriting parent styles (boolean)

## Default available colors

- `red`

- `green`

- `yellow`

- `blue`

- `magenta`

- `cyan`

- `white`

- `lightRed`

- `lightGreen`

- `lightYellow`

- `lightBlue`

- `lightMagenta`

- `lightCyan`

- `lightWhite`