On the VS Code UserVoice page, there was a request to add suggestions and highlighting for HTML entities such as &. Microsoft marked this as complete with a comment stating "This feature was implemented in Visual Studio 2013 for HTML and Razor documents." I assume that means that it was implemented in VS 2013, but not VS Code.
Assuming that's correct, how can I add highlighting for these items within HTML documents? They seem to highlight properly within XML documents. Looking at syntaxes/html.plist, it looks like it should be capturing HTML entities, so I would assume the theme would color them appropriately, but I don't really understand how any of it works on the backend.
My questions are:
Should VS Code be highlighting these items?
If not, can I change the HTML syntax file or theme file to make it do so? If so, how would I do that?
Here's html.plist (which is the default, as it installed):
<key>entities</key>
<dict>
<key>patterns</key>
<array>
<dict>
<key>captures</key>
<dict>
<key>1</key>
<dict>
<key>name</key>
<string>punctuation.definition.entity.html</string>
</dict>
<key>3</key>
<dict>
<key>name</key>
<string>punctuation.definition.entity.html</string>
</dict>
</dict>
<key>match</key>
<string>(&)([a-zA-Z0-9]+|#[0-9]+|#x[0-9a-fA-F]+)(;)</string>
<key>name</key>
<string>constant.character.entity.html</string>
</dict>
<dict>
<key>match</key>
<string>&</string>
<key>name</key>
<string>invalid.illegal.bad-ampersand.html</string>
</dict>
---EDIT---
Here's some screenshots to clarify what I mean (both taken with same theme):
XML.plist looks pretty similar to HTML.plist when it comes to these entities, but I won't add XML.plist to this already lengthy question unless someone doesn't have their own copy and wants me to.
You can do it using extensions
You can add new TextMate theme files (.tmTheme) to your VS Code installation using VS Code's Yeoman extension generator, yo code. The extension generator takes an existing TextMate theme file and packages it for use in VS Code.
ColorSublime has hundreds of existing TextMate themes to choose from. Pick a theme you like and copy the Download link to use in the Yeoman generator. It will be in a format like "http://colorsublime.com/theme/download/(number)". The 'code' generator will prompt you for the URL or file location of the .tmTheme file, the theme name, and other information related to the theme.
Copy the generated theme folder to a new folder under your .vscode/extensions folder and restart VS Code.
Open the Color Theme picker theme with File > Preferences > Color Theme and you can see your theme in the dropdown. Arrow up and down to see a live preview of your theme.
You can create a theme yourself too
You can also author your own TextMate themes from scratch. Consult the TextMate theme and language grammar naming conventions documentation for details.
Besides the TextMate language grammar standard scopes, VS Code also has custom theme settings which you can use to tune your own theme:
rangeHighlight: Background color of range highlighted, like by Quick open and Find features.
selectionHighlight: Background color of regions highlighted while selecting.
inactiveSelection: Background color of selections when not in focus.
wordHighlight: Background color of a symbol during read-access, like reading a variable.
wordHighlightStrong: Background color of a symbol during write-access, like writing to a variable.
findMatchHighlight: Background color of regions matching the search.
currentFindMatchHighlight: Background color of the current region matching the search.
findRangeHighlight: Background color of regions selected for search.
linkForeground: Color of links.
activeLinkForeground: Color of active links.
hoverHighlight: Background color when hovered.
referenceHighlight: Background color of a reference when finding all references.
guide: Color of the guides displayed to indicate nesting levels.
You can find an example VS Code theme here which includes the custom settings.
Authoring a theme is fairly tricky as the grammars all behave a bit differently. Try to follow the TextMate conventions and avoid language specific rules in your theme as grammars can also be replaced by extensions.
This is a feature request for VS Code: https://github.com/Microsoft/vscode/issues/784
Answering your questions:
Yes.
You can submit a Pull Request to the project, thus benefiting everyone else! The code you want to modify is here and here's how you can contribute.
You can change the "Color Theme" to highlight HTML entities in VS Code.
Go to Preferences -> Color Theme and select another theme – for example "Light+ (default light)" oder "Dark+ (default dark)" to make highlighting of HTML entities work.
Related
I am just starting to learn Javascript, and I have a small question about editing files within a Github repository.
I am writing functions within a file in my repository that involve mathematical equations, and I am finding that within the editor itself, it is changing the style of the text based on common HTML shortcuts. In my case, whenever I use the asterisk key, *, to multiply values, the editor file will show all text between two consecutive asterisks in italics. It doesn't change the nature of the code itself at all, so it's just a QOL issue for me personally. It's just strange to see blocks of my code appearing italicized within the editor.
Is there any way to have HTML not try and parse such characters as text style shortcuts within the Github repository file editor?
Use .js file extension for Javascript code.
In README.md file put basic description for your project. Basic guid how to write README.md
We are customizing a Wirecloud installation to provide our own branding, text and header links. We have created a subtheme to the 'defaulttheme' and are overlaying our own template, images and sccs files to accomplish our customization.
We have managed to change the header image, landing page and a few other bits, but are hampered by the following:
The generated HTML provides no clues as to which template it originated from (we think?)
Documentation here: https://wirecloud.readthedocs.io/en/stable/development/platform/themes/
specifies a number of template files, but not all of the template. For example we cannot find the place where the 'Sign in' button is defined.
The wirecloud javascripts seem to insert random bits of html for what should be boilerplate stuff. For example a 'Powered by wirecloud' icon appears at the bottom of the screen. The 'get more components' button appears out of nowhere and we cannot disable it.
Many of the generated elements do not have an id, so it is difficult to disable or identify them in a sccs file. The 'get more components' button for example is not relevant for us, but we cannot remove it (so far).
Does anyone have a completed custom theme we can look at? Or can someone point out which template files / sccs files are used for branding and overall look-and-feel?
True, currently WireCloud doesn't print any comment not any other clue for detecting from what template the html was generated.
Some parts are not generated using templates, for example, the "Sign in" button. I recommend you to create a ticket in the issue tracker for each thing you want to customise and you don't find how to do it, so we will be able to give you a better answer, and to create a template if needed.
Remember that you have to include a "Powered by WireCloud" to comply with the WireCloud license. In the other hand, the "get more components" button can be removed by editing the wirecloud/workspace/wallet/wallet.html template, by removing the following code:
<s:southcontainer>
<t:addmore/>
</s:southcontainer>
Well, this can also be discussed and documented. We usually don't use ids because those elements are better located using some kind of selector.
Anyway, we are working to improve the documentation about themes ASAP.
After updating from Sublime Text 2 to Sublime Text 3, I have experienced some issues with the highlighting of variables mostly in the case of Angular or JQuery elements no longer having a highlight of pink (using Monokai theme; default)
Has anyone experienced this issue or know a way to resolve this?
These variables have, with the normal javascript syntax, the scope variable.other.dollar.js. The scope variable and variable.other have no highlighting in the monokai colorscheme. If you want to add a highlighting on your own, you can just modify the colorscheme. To do this I would recommend the Package Resource Viewer. Just press ctrl+shift+p and select PackageResourceViewer: Open Resource and navigate to the monokai colorscheme. This will open the colorscheme xml file.
If you save it, it will not change the existing one (which is read only in a zip folder), but create it in your Packages folder. This colorscheme will shadow the existing one. Add the following entry at a reasonable position and the variables should be highlighted pink:
<dict>
<key>name</key>
<string>JQuery Variable</string>
<key>scope</key>
<string>variable.other.dollar.js</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FF90FF</string>
</dict>
</dict>
In general you can use the ScopeHunter to retrieve the scope and adapt the colorscheme to fit your requirements.
I'm searching for a way to find out which style resources a control uses.
I.e. I'm currently trying to change the Brushes of the back Button in my app.
Confusingly these brushes are partly located under the ResourceKeys AppBarItemPointerOverForegroundThemeBrush (etc.) instead of BackButtonPointerOverForegroundThemeBrush (which doesn't seem to change anything - side question: what's this resource for?).
I couldn't find the the foreground theme brush resource for the normal ViewState at all.
So I'd love to know if there's some way or some website where I can see which resources a specific control uses. The Microsoft Docs have these informations for some controls but unfortunately they are incomplete and I didn't find anything about the NavigationBackButtonNormalStyle (apart from the information that it should look like an AppBarButton which explains why it uses AppBarItem style resources - however that doesn't explain the existence of BackButton style resources).
1)You can get all styles in Pc C:\Program Files (x86)\Windows Kits\8.0\Include\WinRT\Xaml\Design
2)Install XamlCandy app
3)Style for specific control
-In Designer View http://i.imgur.com/tg8icLv.png
-http://i.imgur.com/VdB28oY.png and Press Ok
-http://i.imgur.com/9wNmQga.png
and you can change Winrt Default Control color by replacing color
<SolidColorBrush x:Key="AppBarItemPointerOverForegroundThemeBrush" Color="Red" />
Can anyone please tell me, whats the color scheme that is being used by Plain Tasks? Any sublime color scheme plugin that you may aware of would be great.
If you go through the files on Github, you'll find that there are several .hidden-tmTheme files. These are formatted just like regular .tmTheme color scheme files, except that they are specific to a certain plugin, and are not visible through the Preferences -> Color Scheme menu. If you'd like to use one of them as a regular color scheme, simply copy the file to your Packages/User directory and rename it to end with .tmTheme instead of .hidden-tmTheme. It will now be available via Preferences -> Color Scheme -> User.