Linkifier: CSS styling of linkified links

[chubin]

Would it possible to specify some CSS style for linkified links?
It would be even better if it would be possible to specify different CSS styles basing the links text/content.
By means of this mechanism, we could embed various HTML objects in the terminal output (or better to interpret it as such). But even plain CSS styles would be really great.

(maybe it is already possible, but after going through the documentation and the code I didn't manage to find out how)

[Tyriar]

Since v3 we use a canvas to render by default which makes it not possible to do this. if you want to embed something on hover this is possible using the current API by listening to the tooltip and leave callbacks:

xterm.js/typings/xterm.d.ts

Lines 227 to 268 in 1395b0f

	/**
	* An object containing options for a link matcher.
	*/
	export interface ILinkMatcherOptions {
	/**
	* The index of the link from the regex.match(text) call. This defaults to 0
	* (for regular expressions without capture groups).
	*/
	matchIndex?: number;
	/**
	* A callback that validates whether to create an individual link, pass
	* whether the link is valid to the callback.
	*/
	validationCallback?: (uri: string, callback: (isValid: boolean) => void) => void;
	/**
	* A callback that fires when the mouse hovers over a link for a moment.
	*/
	tooltipCallback?: (event: MouseEvent, uri: string) => boolean | void;
	/**
	* A callback that fires when the mouse leaves a link. Note that this can
	* happen even when tooltipCallback hasn't fired for the link yet.
	*/
	leaveCallback?: (event: MouseEvent, uri: string) => boolean | void;
	/**
	* The priority of the link matcher, this defines the order in which the link
	* matcher is evaluated relative to others, from highest to lowest. The
	* default value is 0.
	*/
	priority?: number;
	/**
	* A callback that fires when the mousedown and click events occur that
	* determines whether a link will be activated upon click. This enables
	* only activating a link when a certain modifier is held down, if not the
	* mouse event will continue propagation (eg. double click to select word).
	*/
	willLinkActivate?: (event: MouseEvent, uri: string) => boolean;
	}

If you need some other capability let us know some more specifics about the use case.

[chubin]

@Tyriar But it is impossible to display a link in some special way? (without hovering)

Details:

I want to use xterm.js in one of my projects (cheat.sh), where I use manual HTML generation currently.
Please take a look at this:

https://cheat.sh/

Here you see a (wrong) HTML representation of the original representation,
that is available here:

$ curl cheat.sh

xterm.js represents it correctly, but what I miss here is the CSS support for hyperlinks.

Ideally, I would replace this gtihub link with a github button and so on.
And of course all links in the output (for example /:intro etc. to correspondent pages).

[Tyriar]

Do you mean you want to replace this with a github image/button?

When I run in a terminal all that's linkified is https://cht.sh?

[chubin]

Yes, this too, but it is much more than that.

Currently I use xterm.js in experimental mode:

https://cht.sh/:shell/

You will get a shell here, where the user can ask any programming language questions:

For example, try this:

    cht.sh> python create empty file
    ...
    # [ThiefMaster] [so/q/12654772] [cc by-sa 3.0]
    cht.sh>

Of course, you can try any question you want, not only this one

The answer may contain links to some external resources (for example here: links to the stackoverflow answer where this information was found, to the author and to the license).

I want to display this links as links.

Of course, you may ask, how xterm.js should now that that are links, and what are the hrefs of these links? This information is known (though not displayed, but it is available to a JS script running on the page). This information looks like a dictionary:

{
  "[ThiefMaster]": "https://stackoverflow.com/users/298479/thiefmaster",
  ...
}

How should I solve this task?
What would you suggest me?
Should I use xterm.js 2.x for that?
Any other ideas?

[Tyriar]

So there's two ways I see this being solved:

• Solve for xterm.js specifically: Create a link handler for a regex matching the format you use ([x/y/z]) and then handle the link yourself: https://github.com/Microsoft/vscode/blob/4f870afa5871c688b6dff58a955218100f7c4054/src/vs/workbench/parts/terminal/electron-browser/terminalLinkHandler.ts#L112
• Solve for all terminals supporting hyperlink escape: Use the hyperlink escape when it's implemented Support hyperlink ansi escapes #1134, this lets you create a HTML-style link with a label and URL

[chubin]

(by the way, Daniel, maybe you could give me a hint, how could we create a cheat.sh plugin for visual studio, so that people could send the queries directly from, Visual Studio not leaving it? We've already created plugins for Vim, Emacs and currently are working on a sublime plugin.

Is it a good starting point?

https://msdn.microsoft.com/en-us/library/bb166030.aspx?f=255&MSPPError=-2147217396

Please ignore this question if it seems to be irrelevant for you; it is irrelevant indeed; I've just noticed that you are working at the Visual Studio team, that's why I've asked it)

[chubin]

Thank you very much for the answer, I think that both answers are appropriate, but the first one can be implemented just now, as far as I can judge.

And with the second way, even if it will be implemented, it still would not be possible to display links in some fancy way (like a GitHub button or whatever).

[Tyriar]

how could we create a cheat.sh plugin for visual studio

I don't know anything about VS extensiblity unfortunately.

but the first one can be implemented just now, as far as I can judge

Yep, it should work 🙂

And with the second way, even if it will be implemented, it still would not be possible to display links in some fancy way (like a GitHub button or whatever).

We are starting to open up extensibility within xterm.js which you can read about in #1128. Once we progress more I this I can see us opening up APIs for the buffer which could potentially enable things like this.