Termx-markup NPM

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:

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.