I'm trying to extend https://github.com/dzannotti/vscode-babel/blob/master/syntaxes/Babel%20Language.json but all my attempts just result in a complete override, leaving the text blank. I'd rather not be a jerk and just copy the code into my highlighter.
I want to extend the colorizer and just add my patterns ontop of it.
Here's my current attempt:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>fileTypes</key>
<array>
<string>js</string>
</array>
<key>name</key>
<string>Handlebars (Ember.js)</string>
<key>patterns</key>
<array>
<dict>
<key>actions</key>
<string>actions</string>
<key>match</key>
<string>actions</string>
<key>name</key>
<string>keyword</string>
</dict>
<dict>
<key>include</key>
<string>text.javascript.basic</string>
</dict>
</array>
<key>scopeName</key>
<string>source.js.jsx</string>
I was trying to do what's in this thread but it doesn't work
You should probably at least look at the Babel JavaScript syntax definition to see what its base scope is. In this case it's source.js.jsx, not text.javascript.basic. Programming languages generally use the source scope, while text and markup languages (Markdown, HTML, XML, etc.) use text. If you're going to be developing syntax definitions, I highly recommend using the ScopeAlways and/or ScopeHunter plugins for determining the scopes active at the current cursor location.
Related
For Sublime themes, how can I, or can I customize my theme for colors of a single/double quote within a double/single quote, respectively?
So for example, this "quote might be blue where 'this is green'".
Currently using Sublime Text 2 with a slight variation from the Railscast theme.
This is the code snippet from the theme that I suspect I need to modify, somehow?
<dict>
<key>name</key>
<string>String</string>
<key>scope</key>
<string>string</string>
<key>settings</key>
<dict>
<key>fontStyle</key>
<string></string>
<key>foreground</key>
<string>#A6E22E</string>
</dict>
</dict>
Try the following:
<dict>
<key>name</key>
<string>Double-Quoted String</string>
<key>scope</key>
<string>string.quoted.double</string>
<key>settings</key>
<dict>
<key>fontStyle</key>
<string></string>
<key>foreground</key>
<string>#0000FF</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Single-Quoted String</string>
<key>scope</key>
<string>string.quoted.single</string>
<key>settings</key>
<dict>
<key>fontStyle</key>
<string></string>
<key>foreground</key>
<string>#00FF00</string>
</dict>
</dict>
This won't work for every language, as not all language definitions differentiate between single- and double-quoted strings, but for those that do (like HTML and PHP, for example) you should now have double-quoted strings in blue and single-quoted ones in green. Of course, feel free to play around with the colors' hex values.
I have a question while I'm writing HTML code on Sublime Text 3. I just want to set auto indent format of HTML. For example, when I write p tag like under code, the indentation works like that.
<p>
Hello world!
</p>
But I want to write like under code instead of above.
<p>
Hello world!
</p>
And not only p tag also ul, ol and etc.
How can I set auto indent format of HTML on Sublime Text 3?
One option is to type [command] + [shift] + [p] (or the equivalent) and then type 'indentation'. The top result should be 'Indendtation: Reindent Lines'. Press [enter] and it will format the document.
Another option is to install the Emmet plugin (http://emmet.io/), which will provide not only better formatting, but also a myriad of other incredible features. To get the output you're looking for using Sublime Text 3 with the Emmet plugin requires just the following:
p [tab][enter] Hello world!
When you type p [tab] Emmet expands it to:
<p></p>
Pressing [enter] then further expands it to:
<p>
</p>
With the cursor indented and on the line between the tags.
Meaning that typing text results in:
<p>
Hello, world!
</p>
Create a Keybinding
To auto indent on Sublime text 3 with a key bind try going to
Preferences > Key Bindings - users
And adding this code between the square brackets
{"keys": ["alt+shift+f"], "command": "reindent", "args": {"single_line": false}}
it sets shift + alt + f to be your full page auto indent.
Source here
Note: if this doesn't work correctly then you should convert your indentation to tabs. Also comments in your code can push your code to the wrong indentation level and may have to be moved manually.
This is an adaptation of the above answer, but should be more complete.
To be clear, this is to re-introduce previous auto-indent features when HTML files are open in Sublime Text. So when you finish a tag, it automatically indents for the next element.
Windows Users
Go to C:\Program Files\Sublime Text 3\Packages extract HTML.sublime-package as if it is a zip file to a directory.
Open Miscellaneous.tmPreferences and copy this contents into the file
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>name</key>
<string>Miscellaneous</string>
<key>scope</key>
<string>text.html</string>
<key>settings</key>
<dict>
<key>decreaseIndentPattern</key>
<string>(?x)
^\s*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>batchDecreaseIndentPattern</key>
<string>(?x)
^\s*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>increaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>batchIncreaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>bracketIndentNextLinePattern</key>
<string><!DOCTYPE(?!.*>)</string>
</dict>
</dict>
</plist>
Then re-zip the file as HTML.sublime-package and replace the existing HTML.sublime-package with the one you just created.
Close and open Sublime Text 3 and you're done!
This was bugging me too, since this was a standard feature in Sublime Text 2, but somehow automatic indentation no longer worked in Sublime Text 3 for HTML files.
My solution was to find the Miscellaneous.tmPreferences file from Sublime Text 2 (found under %AppData%/Roaming/Sublime Text 2/Packages/HTML) and copy those settings to the same file for ST3.
Now package handling has been made more difficult for ST3, but luckily you can just add the files to your %AppData%/Roaming/Sublime Text 3/Packages folder and they overwrite default settings in the install directory. Just save this file as "%AppData%/Roaming/Sublime Text 3/Packages/HTML/Miscellaneous.tmPreferences" and auto indent works again like it did in ST2.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>name</key>
<string>Miscellaneous</string>
<key>scope</key>
<string>text.html</string>
<key>settings</key>
<dict>
<key>decreaseIndentPattern</key>
<string>(?x)
^\s*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>batchDecreaseIndentPattern</key>
<string>(?x)
^\s*
(</(?!html)
[A-Za-z0-9]+\b[^>]*>
|-->
|<\?(php)?\s+(else(if)?|end(if|for(each)?|while))
|\}
)</string>
<key>increaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>batchIncreaseIndentPattern</key>
<string>(?x)
^\s*
<(?!\?|area|base|br|col|frame|hr|html|img|input|link|meta|param|[^>]*/>)
([A-Za-z0-9]+)(?=\s|>)\b[^>]*>(?!.*</\1>)
|<!--(?!.*-->)
|<\?php.+?\b(if|else(?:if)?|for(?:each)?|while)\b.*:(?!.*end\1)
|\{[^}"']*$
</string>
<key>bracketIndentNextLinePattern</key>
<string><!DOCTYPE(?!.*>)</string>
</dict>
</dict>
</plist>
Is there a way I can highlight just tab characters? I know about "draw_white_space": "all" but I don't want to highlight all whitespace, just tabs.
There doesn't seem to be a plugin or a setting that fits the bill. I'd like to avoid writing a new plugin, but I will if I have to.
Thanks in advance!
I haven't worked on this plugin in a while, but you can try PersistentRegexHighlight. You will just need to define a regex pattern for the tabs and a color to highlight with if you don't like the default.
I have only tested this on SublimeText2. As an alternative to PersistentRegexHighlight, you could use the following minor modifications to the theme and language files. Please feel free to disregard / remove the whitespace definitions -- I included them because someone else may be interested in seeing how to modify Theme / Language files:
Excerpt from whatever language syntax you want -- e.g., LaTeX.tmLanguage
<!-- BEGIN whitespace / tab definitions -->
<dict>
<key>match</key>
<string>\t+</string>
<key>name</key>
<string>lawlist.tab</string>
</dict>
<dict>
<key>match</key>
<string> +</string>
<key>name</key>
<string>lawlist.space</string>
</dict>
<!-- END -->
Excerpt from whatever theme you are using -- e.g., lawlist.tmTheme
<!-- BEGIN whitespace / tab definitions -->
<dict>
<key>scope</key>
<string>lawlist.tab</string>
<key>settings</key>
<dict>
<key>fontStyle</key>
<string></string>
<key>foreground</key>
<string>#FF0000</string>
<key>background</key>
<string>#FFFFFF</string>
</dict>
</dict>
<dict>
<key>scope</key>
<string>lawlist.space</string>
<key>settings</key>
<dict>
<key>fontStyle</key>
<string></string>
<key>foreground</key>
<string>#000000</string>
<key>background</key>
<string>#FFFFFF</string>
</dict>
</dict>
<!-- END whitespace / tab definitions -->
I am looking for a way to change the appearance of the whitespace grey dot to something bigger and darker (without changing the background color) -- similar to UltraEdit (see screenshot).
I've read all the popular threads on the issue, and I've tried all the popular modifications (e.g., plugins, and/or changing the language and theme files), but I haven't found a way to darken the grey dot or make it any bigger.
I've already experimented with everything mentioned in this related thread, including the links set forth therein: Sublime Text 2: how to change white space characters color?
(source: lawlist.com)
.tmTheme
<!-- BEGIN whitespace / tab definitions -->
<dict>
<key>scope</key>
<string>lawlist.tab</string>
<key>settings</key>
<dict>
<key>fontStyle</key>
<string></string>
<key>foreground</key>
<string>#FF0000</string>
<key>background</key>
<string>#FFFFFF</string>
</dict>
</dict>
<dict>
<key>scope</key>
<string>lawlist.space</string>
<key>settings</key>
<dict>
<key>fontStyle</key>
<string></string>
<key>foreground</key>
<string>#000000</string>
<key>background</key>
<string>#FFFFFF</string>
</dict>
</dict>
<!-- END whitespace / tab definitions -->
.tmLanguage
<!-- BEGIN whitespace / tab definitions -->
<dict>
<key>match</key>
<string>\t+</string>
<key>name</key>
<string>lawlist.tab</string>
</dict>
<dict>
<key>match</key>
<string> +</string>
<key>name</key>
<string>lawlist.space</string>
</dict>
<!-- END -->
Someone bumped a post on the ST forum about coloring white space and I thought of this post. You may see it too, but just in case, I'll post here. Basically they modified the tmLanguage file to give a new scope to leading whitespace. They then applied a color to that.
https://github.com/ckovey/sublime-whitespace-coloring
There is no solution to this issue.
I have been using sublime for about half and year and now i want to make some modifies to it. I installed few packages and rest of stuff but i have a kind of problem.
Using theme Monokai ( and also in other tested themes ), i can't give the right color to attributes like "-webkit-box-shadow" and other css3 elements. I mean, i would like to have the right color also for vendor prefixes and new css3 elements.
Add this <dict> entry to your .tmTheme file to have the right colors for all (also unknown) css property names:
<dict>
<key>name</key>
<string>CSS property name</string>
<key>scope</key>
<string>meta.property-name.css</string>
<key>settings</key>
<dict>
<key>fontStyle</key>
<string>italic</string>
<key>foreground</key>
<string>#66D9EF</string>
</dict>
</dict>
I found a plugin that solves my problem https://github.com/i-akhmadullin/Sublime-CSS . Closed !