How can I have a link that executes a command in jQuery Terminal?

I'm trying to have some links to execute commands.

For example:

function showMenu(consoleObj) {
consoleObj.echo("\t[[!;;]about]      learn more about whatever");
...

I'd like the "about" text be clickable and execute the about function, rather than going to an external link.

For reference, I have anyLinks: true, in here:

$('.terminal').terminal({
anyLinks: true,
menu: function() {
    showMenu(this);
},
...

Just so you know, I'm a big time noob. Thank you!

I've tried:

consoleObj.echo("\t[[!;#fff;;#about]about]      learn more about whatever");

and:

consoleObj.echo("\t[[!;#fff;;about]about]      learn more about whatever");

and:

consoleObj.echo("\t[[!;#fff;;!about]about]      learn more about whatever");

Nothing worked (they all took me to an /about page, rather than executing the command).

Solution

You can do this by adding class to the formatting and add on click event that will execute your command. Adding hash to the url will give you nothing, unless you handle hashChange event.

Also Note: the 4th argument in formatting is a class that is added to the element.

const consoleObj = $('body').terminal({
  about() {
    this.echo('this is about');
  },
  hello() {
    this.echo('this is hello');
  }
});

consoleObj.echo("\t[[!;#fff;;command]about]      learn more about whatever");
consoleObj.echo("\t[[!;#fff;;command]hello]      greeting");

consoleObj.on('click', '.command', function() {
  const command = $(this).text();
  consoleObj.exec(command);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css" rel="stylesheet"/>

EDIT: it seems that the hash in links doesn't work (even when done properly) because of target="_blank" that open the links in new tab, and there is no way to overwrite it. This is something that can be fixed in the future.

I've created an issue: Allow to change link target attribute

EDIT2 Just realized that you can remove the target attribute with:

term.echo('[[!;;;;#about;{}]Hello World]');

EDIT3 with version 2.40.0 you can use XML formatting that simplify using the library:

term.echo('<a href="#about">about</a>');

XML formatting now always add all attributes into last argument so you can use any attribute you want.