I am trying to add different foreground colors using regular expressions for a method, property, and variable reference on Monaco editor using tokenizer.
Example:
Name="Hello"
var.Name()
var.Name
In these examples, Has anyone found a way to colorize "Name" differently based on how it is being used? In the first example, it is referenced as a variable. In the second example, it is referenced as a method of an object, and the third example is a property of an object.
Even though method, property, and variable are the same name, I want to colorize different foreground colors to "Name" using tokenizer on Monaco editor**.
Your suggestion would be greatly appreciated. Thanks in advance.
What you are after is called "semantic highlighting" (in opposition to syntax highlighting) and the monaco-editor component alone cannot do that.
Related
So I am trying to create a form using Vue Formulation. I have a few input fields that are required. Is it even possible to highlight them somehow? I have read Vue Formulation doc, but could not find the answer.
You could simply give the required fields a different styling/CSS class.
If you are really fancy, you could try to read the attributes of the DOM elements (with attr() or refs), but haven't tried that and it is probably not worthwhile.
we are looking at a lot of HTML usually.
Now, <, > and </ around the tags are splattered everywhere. But unless there is a syntax error, those really have no value. And syntax errors are highlighted.
So instead of looking at:
I would prefer to look at, note you can change this in
Settings -> Editor -> Color scheme -> HTML -> HTML Code
the problem is if I change it this way, the vue templates get affected as well and all condition operators become gray too like the <>
mycomponent.vue
notice all and in
is there a different way to do it?
This is a perfect case of using language injections
If you don't have explicit vue.js support already set up (or if it doesn't handle it), you can define language injections to highlight that area as javascript expressions.
https://studgeek.com/2010/08/16/intellijidea-webstorm-knockout-data-bind-attributes/
Shows how a dummy javascript context can be set up for arbitrary xml attributes.
In this (quite dated) image, you can see the Prefix is set to a random window variable object, and the suffix ends the object, this simply wraps the code in the xml attribute with something roughly resembling the correct context for the javascript.
The data-bind xml attribute in this case, would be swapped out for v-if v-else or any other vue attributes that take a binding that looks similar to javascript.
If this fails to work, it sounds like an IntelliJ bug which should be reported.
You can try if rainbow brackets plugin works for you.
It changes the color of brackets and gives each pair of opening and closing bracket a unique colour to make it easier to identify which belongs together.
I am using mark t hughes view picklist custom control from open NTF.
Link to control on openNTF
I have set all the paramenters etc, however when I load the page with the control on, I get my custom error page, and the error below in my error logging database
Error on dialog1button5999 null property/event:
1:
Script interpreter error, line=1, col=35: [ReferenceError]
'compositeData' not found
compositeData.picklistButtonClass + " domfindmebutton5999"
This is trying to set the styleClass of a button in the custom control here:
<xp:this.styleClass><![CDATA[#{javascript:compositeData.picklistButtonClass + " domfindmebutton5999"}]]></xp:this.styleClass>
I am also definately passing this parameter is with the default code:
picklistButtonClass="button2"
I also followed the video Here to the letter, and still get exactly the same issue.
Has anyone come across this before or have any pointers as to where I should be looking to resolve it? Im not sure where to start, as all the instructions and video's explain how to complete the custom properties of the control, but there is never any mention of a need to actually modify any code WITHIN the custom control....
Thanks
(as a side note, I am using bootstrap, should this make any difference)
This is because of the theme definition. Look at the Mark Leusink's blog entry here. http://linqed.eu/2014/08/28/xpages-gotcha-modeconcat-in-your-themes/
If a theme has a "concat" definition, that will be computed at a very early phase. To concat values, it needs to compute the initial value. However, in some cases (e.g. Repeat, Custom control, etc.), the initial value cannot be computed at the page-load section.
For such cases, you can override the theme with a special themeId, as Mark suggested.
I'm trying to run the line of code below in my script, but I get an error saying that more than one object with these properties was found on the page.
Browser("browser").Page("page").WebElement("css:=.normalDayOfMonth").Click
So, I tried adding an index, as shown below:
Browser("browser").Page("page").WebElement("css:=.normalDayOfMonth", "index:=0").Click
But now it's not detecting any object at all. Could anyone help me out with this? Thanks!
Edit: For anyone else who comes across this, it turned out I was using QTP10 and as Motti pointed out below, CSS and Xpath support was only added in QTP11.
The support for using CSS and XPath to identify test objects was added in QTP11, in your comments you say that you're using QTP10 which would explain why you're facing problems...
What's probably happening is that QTP is ignoring css as an unrecognizd property so your description matches all elements and then when you add index:=0 it brings one of the invisible elements (e.g HEAD or HTML) which can't be clicked.
If all you're trying to do is match the className you can use QTP's class identification property ("class:=normalDayOfMonth").
BTW the Highlight function is an undocumented function similar to the object repository's highlight functionality and can be very useful in troubleshooting tests.
I was experimenting with Dojo and Dijit in the past days and I find it quite interesting. I was however trying to find a reference or an API doc that helps me understand all the properties I can assign to widgets and containers.
For example a Tab with a Save Icon will be like this:
<div data-dojo-type="dijit.layout.ContentPane" title="Group Two" data-dojo-props="iconClass: 'dijitEditorIcon dijitEditorIconSave'">
Now, where can I find what to put in the "data-dojo-props" property? Where can I find for example all the list of icons?
My main question would be for example on how to create a vertical menubar, but beyond odd examples scattered here and there, the api reference is not much helpful...
Any help? Am I missing something here?
For this kind of situation, the trick is learning how to convert between the programmatic Javascript style and the declarative HTML style (and sometimes also between the old declarative style, without data).
For the new declarative style, basically the only "real" argument now is data-dojo-props and it consists of an object that will be passed to the widget constructor.
//programatic style
new dijit.myWidget({foo:'a', bar:'b'});
//declarative style
<div data-dojo-type="dijit.myWidget" data-dojo-props="foo:'a', bar:'b'"></div>
You can find what properties an widget accepts by checking the corresponding widget documentation and looking for either declarative or programmatic examples (now that we know how to convert between them). If that is not enough, you can also check the source code - it is usually very well commented and is where api.dojotoolkit.org gets its data from anyway.