termx-markup

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:

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:

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:

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:

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, possible frame attributes:
  • padding="<number>"
  • padding-left="<number>"
  • padding-right="<number>"
  • padding-top="<number>"
  • padding-bottom="<number>"
  • padding-horizontal="<number>"
  • padding-vertical="<number>"
  • height="<number>"
  • max-height="<number>"
  • width="<number>"
  • max-width="<number>"
  • 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:

• <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