How do I theme links in VSCode? - visual-studio-code

I am building a VSCode theme.
Currently im trying to change the behaviour for links, but I can't find the right setting. In my current theme file, there is no statement in tokenColors that seems to change anything. There is also no fontStyle: "underline" or something similar, yet a link like http://www.google.com is underlined.
I looked at it with the built in developer inspector (Developer: Inspect TM Scopes), but it only says:
string.quoted.docstring.multi.python
source.python
Where does the underline setting come from? How do I change the format for links?

There are two types of underlined links:
Link parsed from grammars. These would have a foo.link.language type scope
Links detected by a link detector
For links in the grammar, you can theme the link scope as normal.
You cannot directly theme links that come from the link detector. The "editorLink.activeForeground" ui theme property lets you theme the link when it is active, but you cannot theme a non-active link if it does not have a grammar scope associated with it.
For python specifically, the grammar likely need to be updated to parse the links. This can be done either by modifying the grammar or with an injection grammar

Related

Textmate scopes in custom hover-provider for vscode extension

I've created a custom language extension for my own script language. I've written a tmlanguage file to tokenize my script and do custom highlighting. I created a hover-provider that currently only shows the word that is hovered for testing the provider itself. I want to react on the textmate scopes of the current position in this hover, like the vs code Developer tool "Inspect Editor Token and Scopes" does.
At the end I want to react to one particular scope whose value I want to read and show a corresponding image of this value in the hover.
Fore example a line in my script could look like:
setImage(dic_1/dic_2/testImg)
Now I want to show the image that correlates with the path in the brackets if I hover over it.
I tried to find something in the documentation (https://code.visualstudio.com/api/references/vscode-api#languages) if there is something that would help me but couldn't see anything related.
I tried to ask ChatGPT for help after he suggested "possible internal and not public available methods" it suggested to create a custom hover provider with the help of the library "oniguruma" and tokenize the document again.
However, this feels a bit like an overkill. If vscode has a internal tool that does return the textmate scopes I would guess there is a easy way to access those tokens.
I found this thread (Is there a way to find the textmate scope from within my VSCode extension language functions?) but I don't rally understand why I need to write another parser.
Is there any way to access this textmate scopes in a hover-provider?

How to add space after and before curly braces?

I am doing Flutter development and when I save, the code get formatted. It is nice but some settings are not what I want. For example, I would like to add a space after and before curly brace for my constructor:
Before
Device({this.deviceType});
After
Device({ this.deviceType });
How can I adjust Dart formatting or VS Code to handle that?
Thanks
You can't configure dartfmt, the Dart formatter, to do this as it's intended to make all Dart code look the same regardless of the author. See the FAQ of package:dart_style (the backend of dartfmt) for more information as to why the formatter isn't configurable.
The Dart formatter respects linter style rules as laid out in the "analysis_options.yaml" file. A description of the file can be found here. A complete list of linter rules can be found here.
You can also subscribe to common style guides, such as pedantic, a package with the style guide used internally by Google, or lint, another package that enables all the rules that aren't either contradictory or opinionated.

Can I extend the default URI schemes that vscode detects?

Visual Studio Code has the nice feature to automatically render URIs in source to clickable links, as the following examples demonstrate:
http://web.org
file:///local.txt
https://archive.org
Is it possible to extend the feature to detect custom URI schemes? We use a certain scheme at work that's proprietary. It would be awesome to make our internal links added to our source clickable to open our internal tools.
To be concrete is there some way to make text like the following in my source clickable?
foo://test.resource

GRAV CMS -- Featherlight.js won't work with Cardstack theme

So apparently Cardstack theme for Grav has a conflict with Featherlight.js lightbox plugin. With the default Antimatter theme the plugin works fine, but with Cardstack there seems to be no way to get it working.
I installed the plugin via GPM as usual, then copied the featherlight.yaml file from user/plugins/featherlight/featherlight.yaml into user/config/plugins/featherlight.yaml and set active: true.
I then provided the markdown with ![image](image.jpg?lightbox=1024,800&resize=200,200) but nothing happens when you click the image.
We're able to use UI kit's lightbox (Cardstack is built on UIkit) with HTML. For example:
<a href="/user/pages/02.cards/test/01.test/mountains.jpg" data-uk-lightbox title="Mountains"> works, but we need a solution using Markdown. This is because, we're building a site where users post an image with a Markdown file with their name and other information. Asking users to write a lengthy HTML-link would be too demanding and prone to spelling errors.
I already posted about this on the Grav forum and it got one reply telling to open a issue on the Cardstack theme's github, which I did, but I haven't gotten any replies and the guy who built the theme hasn't been active for almost a month.

How are themes applied in Adobe AEM?

The Client Library (ClientLib) feature in Adobe AEM (formerly Adobe CQ) makes it easy to include client libraries by category and each library can pull in other libraries through dependencies. However the documentation around "Themes" is a little thin.
This link is about all I can find on the subject. Here is an excerpt of the sample code:
<%-- theme only (theme-js + css) --%>
<cq:includeClientLib theme="cq.collab.calendar, cq.security" />
If this tag were to be used how would CQ determine what Client Libs to pull in? Does it look for a theme property of type String[]?
Or does it look for a certain directory structure in the /etc/designs section?
Or does it take the passed in categories and add theme-js to the end like so?
cq.collab.calendar.theme-js
Or is the theme invoked through the URL? In other words, the word "theme", in this case, is a token that is replaced with a selector from a URL applied theme?
Client Libraries reside in a cq:ClientLibraryFolder folder. This folder has a property called category. In the following example, cq.collab.calendar and cq.security are categories:
<cq:includeClientLib theme="cq.collab.calendar, cq.security" />
When this include is called, it is looking for any cq:ClientLibraryFolder with the category cq.collab.calendar or cq.security assigned to it. Using the theme property adds both the css and javascript of clientLibs residing in the themes folder of the parent ClientLibraryFolder. If you were to view your page source, these would be added to their own css and js files. For example, I created the following structure under the geometrixx clientLibary:
geometrixx
clientlibs
themes
myTheme (clientLibray)
css.txt
myCSS.css
js.txt
myJS.js
If, you use the theme property with this clientlib you would get a myTheme.css and myTheme.js file showing in your source/network tab.
The themed flag is a way to shut theme inclusion on and off. The following cq:include will include all the css in the clientLibrary, including stuff in the themes directory.
<cq:includeClientLib css="apps.geometrixx-main" />
However, if I add the themed flag and set it to false, anything under the theme directory is excluded:
<cq:includeClientLib css="apps.geometrixx-main" themed="false" />
So in that case, myTheme.css would not show up. One thing to note, is that the themed flag, only works on "pure css and js includes" Categories and theme properties would not work with this.
The answer to this question goes over this a bit: What exactly does currentDesign.writeCssincludes include?
It has been mentioned that theme is fetched from the request did a little digging an finally found out it tries to fetch it from request parameter named "forceTheme"
private String getDefaultThemeName(SlingHttpServletRequest request)
{
String theme = request.getParameter("forceTheme");
if (theme == null) {
theme = this.defaultUserThemeName;
}
return theme;
}
But needed request.getAttribute because using query parameters will send all requests to pub.
So guess this theme option is of no use at all.
Depends on what you mean by "theme". If you are used to wordpress, drupal, etc, what is called a theme in those systems is called a "design" in CQ5/AEM.
To set a design, you choose a "designpath" in the page properties. This will affect where information about components for each template is stored (all changes made in design mode about what components are allowed where are stored under this path) and is the convention for where CSS, JS, and non-DAM image resources are stored. It takes planning, but you can re-use code and markup in AEM/CQ5 but totally change the look by changing the design.