Okay, so I'm using Sublime Text 2 with Emmet. But "Tab" expansion of HTML snippets doesn't work inside a script because of the scope.
Example:
In HTML, I can type "h1" and then hit tab, and it will generate <h1></h1>
When using Ember.js, and more specifically Handlebars, it doesn't work.
<script type="text/x-handlebars">
h1
</script>
Pressing tab after that "h1" doesn't expand it because it's inside a script; Emmet turns this off. I can press Ctrl+E, which is the "expand anywhere" hotkey, and that works just fine. However, that is uncomfortable and prone to missing and hitting things like Ctrl+S or Ctrl+D which have undesired effects.
So, how can I change this?
I tweeted at the developer, and got a reply, https://twitter.com/chikuyonok/status/398708331969540096
But couldn't understand what to do.
In my opinion, he meant that you needed to change the scope for expand_abbreviation_by_tab. Please open Default (Windows/Linux/OSX).sublime-keymap, search expand_abbreviation_by_tab, add source.js in operand list. It makes it take affect in JavaScript file.
"command": "expand_abbreviation_by_tab",
"context": [
{
"operand": "source.js, source.css, source.sass, source.less, source.scss, source.stylus, text.xml, text.html - source, text.haml, text.scala.html, source string",
"operator": "equal",
"match_all": true,
"key": "selector"
},
I'll add further clarification here since this took me a while to find out:
Copy all of the two keys: ["tab"] objects from the Emmet default keybindings
Paste them into your User keybindings
Add source.handlebars as an additional operand to each of the two contexts.
This also works with Ember Syntax Highlighting when the handlebars files are being interpreted as Glimmer files.
Related
How do I change the highlight color of the Doxygen tokens like #param or #return so it matches the same visual as JSdoc comments?
What I currently have in my .cpp/.hpp files:
What I would like to see (this is inside a .js file):
For example, is there a way to tell VSCode, all #params strings should be blue?
I managed to get JSDoc like comment blocks highlighting using the Better C++ syntax package. For more customization checkout this issue thread.
EDIT: After we determined that your jsdoc comment syntax was not being separately parsed, you found the Better C++ Syntax package which does so. And gives you more control over the contents of a jsdoc comments's internals. Now this textmate scope will give you the blue colored #'s parameters you desired.
Try this in your settings.json
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "storage.type.class.doxygen.cpp",
"settings": {
"foreground": "#00f"
}
}
]
}
You can get the scope by using the Developer: Inspect TM Scopes command from the command palette. This allows you to click on a word in your editor, like #param and see its textmate scope. Which then goes into the tokenColorCustomizations rule.
There are typically 3 or 4 scopes listed which you can use in a space-separated list if you want more distinction. Such as if you wanted this rule to apply only to js docs:
"scope": " source.cpp storage.type.class.doxygen.cpp
Besides the foreground color you can also set its fontStyle here as well. Options are: italic, bold and underline - which can be used in combination with each other too.
As you noticed, with that Beter C++ Syntax package, you need to use #brief instead of #desc in your cpp jsdoc-like comments.
How do I change the syntax highlighting in VSCode so that it adheres to a particular style guide? For example, I want to adhere to the Google C++ style guide where member variables are written as some_member_variable_. When I use this convention, VSCode does not color that name differently from standard text. But I have some code that uses the mSomeMemberVariable convention, and that does get colored differently than other text. Is there a way to configure this better?
TL;DR >There is no easy way to apply Google style syntax highlighting unless you find an existing cpp Textmate grammar file for it (I could not find one). However the following is how you would implement it yourself.
Looking at the CPP syntax file (cpp.tmLanguage.json), we see that there is no scope pattern capturing the Google-style member variables. You can add one:
{ // this is the existing scope that matches mSomeMemberVariable
"match": "\\b(f|m)[A-Z]\\w*\\b",
"name": "variable.other.readwrite.member.cpp"
},
{ // you can add this scope to match some_member_variable_
"match": "\\b([a-z][a-z\\d]*_)+\\b",
"name": "variable.other.readwrite.member.google.cpp"
}
Now you can make sure it is styled by making sure its scope (or any of the outer scopes like variable.other.readwrite.member), has a theme rule in your theme's .json file.
The following is a more detailed explanation. From here we see:
There are two components to syntax highlighting:
Breaking text into a list of tokens and scopes using a grammar
Then using a theme to map these scopes to specific colors and styles
First we need to figure out which "scope" is styling the member variable:
Command palette > ctrl+shift+p > Developer: Inspect TM Scopes
Click on the member variable name (mSomeMemberVariable)
The most specific scope is the top-most entry. As of this posting it is called variable.other.readwrite.member.cpp
The .cpp part of the name tells us that the scope is defined in the C++ grammar (syntax). As of now the file used for the cpp syntax can be found under [applications_folder]/code/resources/app/extensions/cpp/syntaxes/cpp.tmLanguage.json (see the file in the github repo).
Searching for the scope name in the syntax definition file, we find the following pattern:
{
"match": "\\b(f|m)[A-Z]\\w*\\b",
"name": "variable.other.readwrite.member.cpp"
}
And to see what style is applied to the above scope, we look at the active theme's *.json file. For example, if you are using the Dark+ (default dark) theme, you can find the theme json file at extensions/theme-defaults/themes/dark_plus.json. In this file we find the following text mate theme rule:
{
"name": "Variable and parameter name",
"scope": [
"variable",
"meta.definition.variable.name",
"support.variable",
"entity.name.variable"
],
"settings": {
"foreground": "#9CDCFE"
}
}
From this rule we see that the highlighting is applied by the variable scope. (note that all outer scope styles are applied to inner ones unless you specifically specify the inner scope style to override it)
Now one option for you would be to add your own scope to the existing file. Another would be to edit the existing scope to also match the Google style member variable regex pattern. Yet another option would be to define your own grammar based on the CPP extension style file and create your very own Google CPP VSCode Extension. For example, taking the first approach you can edit cpp.tmLanguage.json as follows:
{
"match": "\\b([a-z][a-z\\d]*_)+\\b",
"name": "variable.other.readwrite.member.google.cpp"
}
P.S. After editing the json files restart VSCode for the changes to take effect.
From having done a bit of googling on this it seems that it is or at least was possible to do this with Sublime Text. I have seen multiple references to a preserve case button in the find and replace pane which looks like 2 rounded squares superimposed on each other.
However, I can't find this at all in my version of Sublime Text 3 (on Mavericks)...
Also I checked preferences to see if this option was somehow turned off but the only reference I could find to it was:
{ "keys": ["super+alt+a"], "command": "toggle_preserve_case", "context":
[
{ "key": "setting.is_widget", "operator": "equal", "operand": true }
]
},
in the default key map file...
Here is a screenshot of my find and replace pane:
In the latest Sublime 3 build (3059) there is a dedicated icon in the replace dialog to preserve the case. When toggling it and using the input shown in the screenshot, the following input string will be converted to the following output:
Input: "Xhis is my xest."
Output: "This is my test."
It's not exactly an answer to your almost 1.5 years old question, but maybe you (or somebody else) find(s) the following useful:
I wrote a ST package which includes a feature to preserve the case while editing multiple selections. It even preserves cases with separators like snake_case, dash-case, dot.case etc.
It is called MultiEditUtils. Here you can see the described feature.
Looks like it might have been a glitch in ST3 that was causing confusion.
I noticed that the shortcut key combo for replace has never worked for some reason and also that selecting replace from the find menu opened the find in file pane as opposed to the regular find and replace pane (where the preserve case button is). I only realised this after installing the soda theme for ST3 which showed the preserve case button in a screenshot.
Strangely, when I reverted to the default theme, the find > replace menu now works as it should and I found that the keyboard shortcut was being causght by another program which was why it didn't work...
I dont want it to run on tv.sme.sk. Why it still keeps coming up there
"content_scripts": [
{
"matches": ["http://*.sme.sk/*"],
"exclude_matches": ["http://tv.sme.sk/*"],
"js": ["script.js"],
"css": ["style.css"]
}]
I've checked it on a minimal example and it looks like you found a bug in Chrome. Funny part is that only CSS is injected to tv.sme.sk, javascript injection works as expected and follows the exclude_matches setting. I've played with include_globs and exclude_globs options but no luck.
Your best option is to inject CSS using insertCSS method.
EDIT
Yepp, this is a known bug.
With default template, trac ticket is available for viewing only, I must click modify to expand properties tab to modify, change state of a ticket.
Now I want to expand that tab automatically? How can I change it quickly without changing the template itself?
Is it possible to change it with trac.ini file?
I cannot find where's location of default template to change, so I cannot change myself.
Thanks!
I think the best way to enable the behavior you're looking for is to add a custom JS file (which can be injected much like a custom CSS, read TracInterfaceCustomization).
In that file do this:
$(document).ready(function() {
window.setTimeout(function() {
$("#modify").parent().removeClass('collapsed')
}, 0);
});
This code is untested but it should give you the idea. Basically we need to wait until the DOM is ready ($(document).ready) but as there are multiple JS functions called during that event, the setTimeOut sets a slight delay to make sure that the collapse command went through before.
HTH from a professional Trac developer :-)
I'm using trac 0.12 and had the same issue.
...without changing the template itself
I couldn't find a option to configure it but I did notice if you click the "modify" quick link at the top right of the ticket then the "Modify Ticket" foldable area is automatically uncollapsed for you.
I know you didn't ask for it, but just in case, you want a horrible template hack...
Open the template file in editor, e.g. for me in CentOS 5.5:
sudo emacs /usr/lib/python2.4/site-packages/Trac-0.12-py2.4.egg/trac/ticket/templates/ticket.html
Comment out the jQuery line that triggers the modify section to collapse on page ready:
//$("#modify").parent().toggleClass("collapsed");
I found the edit didn't take effect straight away - perhaps the template is cached or something? It worked after a few minutes of shift-refreshing and restarting apache.
Lets hope someone else answers with a better solution...
This is basically Schwarz's answer but in a simpler form
To get ticket contols expanded on load do following. Put following code
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:py="http://genshi.edgewall.org/"
py:strip="">
<!--! Add site-specific style sheet -->
<head py:match="head" py:attrs="select('#*')">
${select('*|comment()|text()')}
<script type="text/JavaScript">
<!--
// EXPAND TICKET CONROLS ON LOAD.
jQuery(document).ready(function() {
window.setTimeout(function() {
$("#modify").parent().removeClass('collapsed')
}, 1);
});
//-->
</script>
</head>
<body py:match="body" py:attrs="select('#*')">
${select('*|text()')}
</body>
</html>
in /path/to/your/trac/project/templates directory in file site.html.