Skip to content

Extensions

Jakub T. Jankiewicz edited this page Aug 9, 2021 · 10 revisions

Less command

If you want to have less like command, you can use an additional file:

https://unpkg.com/[email protected]/js/less.js

This add a new jQuery plugin that can be invoked on Terminal instance, which is also a jQuery Object.

$('body').terminal({
    less: function(file) {
       $.get(file, (text) => this.less(text));
    }
});

This example shows how to invoke less with any syntax highlighting you have. If you don't want to have formatting but only for less, then you should not use the function syntax but use the function $.terminal.prism:

$('body').terminal({
    less: function(file) {
       var language = {html: 'website': js: 'javascript', css: 'css'};
       var ext = file.match(/\.([^.]+)$/)[1];
       $.get(file, (text) => this.less($.terminal.prism(language[ext], text)));
    }
});

ASCII Table

To render ASCII table like in MySQL command line. You can use file:

<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/ascii_table.js"></script>

and use:

var arr = [[1,2,3,4,5], ["lorem", "ipsum", "dolor", "sit", "amet"]];
term.echo(ascii_table(arr));

arr = [['name', 'command'], ['foo', 'hello'], ['bar', 'world'], ['baz', 'lorem ipsum']];
term.echo(ascii_table(arr, true)); // use header

The output looks like this:

+-------+-------+-------+-----+------+
| 1     | 2     | 3     | 4   | 5    |
| lorem | ipsum | dolor | sit | amet |
+-------+-------+-------+-----+------+
+------+-------------+
| name | command     |
+------+-------------+
| foo  | hello       |
| bar  | world       |
| baz  | lorem ipsum |
+------+-------------+

See CodePen demo

Animation

See Animation

Forms

See Forms

Prism

See Formatting-and-Syntax-Highlighting#syntax-highlighting

XML Formatting

XML formatting is defined in xml_formatting.js file. You can import it using CDN or any other method described in Getting Started Guide.

After you include the file you have access to XML-like syntax to format the text. Available tags:

  • all CSS colors have their tags, for example <rebeccapurple>...</rebeccapurple>.
  • <img src=".." alt=".."/> tag with src and optional alt attribute.
  • <link> with <a> alias
  • <wide> with optional spacing that (it need to be in units e.g. px).
  • <large> with <big> alias with optional size operty that is the same --size css variable.
  • style tags <bold>, <overline>, <strike>, <underline>, <glow> and <italic> (italic and bold have alias <i> and <b>).

To see how it works see this CodePen demo.

TODO

Echo without newline

Pipe

Autocomplete menu

Emoji

On systems that don't support emoji on the system level (like Windows 10).

Dterm

Unix Formatting

Clone this wiki locally