I'm going off this, this, and this.
I have a html file:
<html>
<myelm>
this is my cool elm
</myelm>
<span>FOOOO</span>
</html>
and I want the background color of the entire myelm element, including the inner text, to be red. How do I do that?
This turns the element names red. That's something. But not what I want:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "entity.name.tag",
"settings": {
"foreground": "#ff0000"
}
}
]
}
Related
I am trying to make an extension and need to colorize syntax for custom language. I was able to create extension using yo code and edit .tmLanguage.json file to match wanted syntaxes.
As for example in repository
"comment": {
"patterns": [
{
"name": "comment.line.semicolon",
"match": ";.*$"
}
]
},
However i have not been able to set custom color. Only way was to edit settings.json file using "editor.tokenColorCustomizations" and providing textMateRules.
Example:
For the pattern:
{
"name": "positioning.FMAX",
"match": "\\bFMAX\\b"
},
textMateRules
{
"name": "color.positioning.FMAX",
"scope": "positioning.FMAX",
"settings": {
"foreground": "#ff0000",
"fontStyle": "bold"
}
},
But this is not working when i hit F5 to test plugin. Because settings.json is not part of the extension.
I see in scope inspector.
textmate scopes positioning.FMAX
but foreground is
foreground No theme selector
comment.line.semicolon is working and coloring ;comments green
This doesn't work
{
"name": "positioning.FMAX",
"match": "\\bFMAX\\b",
"settings": {
"foreground": "#ff0000"
}
}
I just want simple way to color syntax like in setting.json. I have tried for more than week now. Any help much appreciated.
look at vscode-extension-samples repo:
https://github.com/microsoft/vscode-extension-samples/tree/main/theme-sample
You can describe your colors in json or tmTheme file and set it in package.json in contributes.themes. When debbugging started make sure that your custom theme selected as current for VSCode
I'm trying to make vscode theme by modifying existing color theme.
and having trouble with applying token color changes to existing theme.
I saw official guide of vscode(https://code.visualstudio.com/docs/getstarted/themes) and tried like below.
but lint says 'Property entity.name.function.member is not allowed.' and not applied to current workbench.
"workbench.colorCustomizations": {
"activityBar.background": "#2a2b30",
"[Darktooth]": {
"entity.name.function.member": "#347890"
}
},
I know there is a way to change editor with specifying all tokens, but I think using existing theme would save time.
Also I would like to apply color to some workbenches(workspace) not the entire editor.
"editor.tokenColorCustomizations": {
"comments": "#595436",
"strings": "#D5ECE2",
"functions": "#1ee9a5",
"textMateRules": [
{
"scope": "storage.modifier.ts",
"settings": {
"foreground": "#FFFFFF"
}
},
{
"scope":["entity.name.function.member", "meta.object-literal.key.js"],
"settings": {
"foreground": "#A1E2AA",
}
},
],
},
I am trying to modify the Vega.js choropleth example to use a gradient legend, and then to make that legend wider. I have succeeded in changing the type to "gradient", but when I try to make the legend wider, the text labels remain stuck and do not widen with the color bar.
Here's a link to the full code: https://jsbin.com/tamenucohu/edit?html,output
Here is the legend-specific part:
"legends": [
{
"fill": "color",
"orient": "bottom-right",
"title": "Unemployment",
"format": "0.1%",
"type": "gradient",
"encode": {
"gradient": {
"update": {
"width": {"value": 300}
}
}
}
}
Here's a screenshot when I set the width to 300, note that the "0.0%" and "15.0%" text labels are not properly spaced: wider color bar with narrower labels
I work at a company that combines xml/html files with python, javascript, and css. I've started working on a syntax highlighter that will include all of these languages (and by 'working on' i mean took xml syntax highlighting, added a few rules and 'include'd the other langues straight in). It works great, but i wanted to make the areas where the language changes a bit more noticeable.
Note: I'm using AAApackageDev to work on all of these in JSON.
currently, i have the below instruction:
...
"endCaptures": {
"0": {"name": "my.style"}
},
"begin": "(<style)(.*?>)(<!\\[CDATA\\[)",
"end": "(]]></style>)",
"beginCaptures": {
"0": {"name": "my.style"}
},
...
to find this code:
<style name="after"><![CDATA[
<style type="text/css">
div.awesome {
background-color: red;
}
</style>
]]></style>
and style as so:
...
{
"scope": "my.style",
"name": "my style",
"settings": {
"background": "#FF000"
}
},
...
It should make the entire first and last line white with a red background, but it doesn't seem to be affected by it at all.
My question out of all of this: Is there any way to have the console show the syntax definition where my cursor is? If i could do this, debugging would be a breeze.
I am a complete novice at d3.js or java in general. I am using the indented tree example from http://bl.ocks.org/1093025. It took me two hours to get this to work on my local computer, so that should give you an idea of my skill level.
I opened the flare.json file and started messing with it and was able to manipulate it successfully. It looks like this
{
"name": "Test D3",
"children": [
{
"name": "News",
"children": [
{
"name": "CNN",
"size": 1000
},
{
"name": "BBC",
"size": 3812
}
]
},
{
"name": "Blogs",
"children": [
{
"name": "Engaget",
"size": 3938
}
]
},
{
"name": "Search",
"children": [
{
"name": "Google",
"size": 3938
},
{
"name": "Bing",
"size": 3938
}
]
}
]
}
What I want to do now, is to try to add hyperlinks. For example, I want to be able to click on "CNN" and go to CNN.com. Is there a modification I can make to flare.json that will do that?
It is quite easy, just add some more "key" : "value" pairs. Example:
"children": [
{
"name": "Google",
"size": 3938,
"url": "https://www.google.com"
},
{
"name": "Bing",
"size": 3938,
"url": "http://www.bing.com"
}
]
Of course, in your d3 code you then need to append <svg:a> tags and set their xlink:href attribute.
Here is some html and d3-code that might be of help to you. First you need to import the xlink namespace in your html file:
<html xmlns:xlink="http://www.w3.org/1999/xlink">
...
</html>
Then in the d3 drawing code where you append nodes for each data element you wrap the element you want to be clickable links with an svg:a tag:
nodeEnter.append("svg:a")
.attr("xlink:href", function(d){return d.url;}) // <-- reading the new "url" property
.append("svg:rect")
.attr("y", -barHeight / 2)
.attr("height", barHeight)
.attr("width", barWidth)
.style("fill", color)
.on("click", click); // <- remove this if you like
You might want to remove the click handler (which is present in the original example) by deleting the .on("click", click) as it might interfere with the default behavior of SVG links.
Clicking on your rects should now lead you to the appropriate url.
SVG links might not be fully implemented in all browsers.
Alternatively you could modify the click handler to read the URL from d.url and use that one to manually redirect the browser to that URL via JavaScript: window.location = d.url;. Then you do not need the svg:a tag and the xlink code. Though adding a real link (not a scripted one) has the benefit that the user/browser can decide what to do (e.g., open in new tab/page). It also helps if some of your users have JavaScript disabled.