Skip to content

Markup based text formatting for terminal in JavaScript environments.

License

Notifications You must be signed in to change notification settings

ncpa0/termx-markup

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

75 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

termx-markup

GitHub GitHub Workflow Status npm Libraries.io dependency status for latest release GitHub last commit

Usage

Print markup

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

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

const markup = html`
  <span bold color="red">
    Hello
    <pre color="blue"> in my </pre>
    world!
  </span>
`;

Output.println(markup);

Output:

Hello in my World!

Only formatting

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

const markup = html`
  <span color="red">
    Hello
    <pre color="blue"> in my </pre>
    world!
  </span>
`;

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!

Define custom colors

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`
  <line color="burgundy">Burgundy</line>
  <line color="mauve">Mauve</line>
  <line color="teal">Teal</line>
`;

Output.print(markup);

Output:

Burgundy, Mauve, Teal

Printing lists

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

Output.print(html`
  <line>Drinks:</line>
  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>
      <line>Milk</line>
      <ul type="circle">
        <li>Skim</li>
        <li>Whole</li>
      </ul>
    </li>
  </ul>
`);

Output:

Drinks: Coffee Tea Milk Skim Whole

Supported tags

  • <span> - regular text, trims white-space characters and removes end-line characters
  • <line> - same as span, but prints a new line character at the end
  • <pre> - preformatted text, all white-space characters will be preserved
  • <br /> - prints a new line character
  • <s /> - prints a space character
  • <ol> - ordered list, each child element is required to ba a <li> tag
  • <ul> - unordered list, each child element is required to ba a <li> tag, accepts additional attribute type (string) which can be of value circle, square or bullet (default is bullet)
  • <pad> - adds left padding to it's content, accepts attribute size (number) which determines the number of spaces to print
  • <frame> - adds a border around it's content, accepts attributes padding, padding-left, padding-right, padding-top, padding-bottom, padding-horizontal and padding-vertical (number) which determines the number of spaces to print between the border and the content

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:

  • <span>
  • <pre>
  • <br>
  • <s>
  • <li>

Block elements:

  • <line>
  • <frame>
  • <pad>
  • <ul>
  • <ol>

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