Sublime Text 2 creating custom colors for specific file [duplicate] - sublimetext2

Sometimes I use Sublime Text for writing reminders.
I always use the same layout for this task which looks like this :
>Title
>>Subtitle
>>>Comment
> Title
>> ...
Where a > represent a tab character
So I'm wondering if it's possible to create my own syntax highlighting for this kinds of files, with one color for the title, another one for the subtitle and the regular color for the comment.

Syntax highlighting is performed using .tmLanguage syntax definitions. They are formatted in Apple's XML-based PLIST format, although thanks to the excellent Sublime plugin PackageDev they can be written in JSON or in YAML, which I chose for its compactness, and the fact that I get sweet syntax highlighting with it using my theme*.
So, your syntax is very straightforward. You'll have three rules:
Matching lines beginning with a single tab as "Title" lines
Matching lines beginning with two tabs as "Subtitle" lines
Matching lines beginning with three tabs as "Comment" lines.
Everything else will be displayed by Sublime as plain text.
Here it is, in YAML:
# [PackageDev] target_format: plist, ext: tmLanguage
---
name: Reminders
comment: Written for http://stackoverflow.com/q/25689365/1426065 by #MattDMo
scopeName: text.reminders
fileTypes: [todo]
uuid: 6B548E74-5E01-497A-B030-9D31131B7A70
patterns:
- name: text.title.reminders
match: ^\t(?!\t+)(.*)
- name: text.subtitle.reminders
match: ^\t\t(?!\t+)(.*)
- name: text.comment.reminders
match: ^\t\t\t(.*)
Everything is pretty straightforward. The name is what shows up in the bottom right corner of Sublime, it was written by me, its base scope name is text.reminders, opening a file with the .todo extension will automatically apply this syntax, and the UUID is just a unique identifier. As I mentioned above, there are three patterns. One thing to keep in mind: this will only match if the line begins with a literal tab character, not space characters being inserted as a tab! That means you'll need to select
View -> Indentation and make sure Indent Using Spaces is NOT checked. Just for good measure, select View -> Indentation -> Convert Indentation to Tabs as well. These settings can be applied just to "Reminders" views, I'll cover that later.
So we have our YAML, which is useless if you don't have PackageDev. However, translated to a PLIST it works much better:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>comment</key>
<string>Written for http://stackoverflow.com/q/25689365/1426065 by #MattDMo</string>
<key>fileTypes</key>
<array>
<string>todo</string>
</array>
<key>name</key>
<string>Reminders</string>
<key>patterns</key>
<array>
<dict>
<key>match</key>
<string>^\t(?!\t+)(.*)</string>
<key>name</key>
<string>text.title.reminders</string>
</dict>
<dict>
<key>match</key>
<string>^\t\t(?!\t+)(.*)</string>
<key>name</key>
<string>text.subtitle.reminders</string>
</dict>
<dict>
<key>match</key>
<string>^\t\t\t(.*)</string>
<key>name</key>
<string>text.comment.reminders</string>
</dict>
</array>
<key>scopeName</key>
<string>text.reminders</string>
<key>uuid</key>
<string>6B548E74-5E01-497A-B030-9D31131B7A70</string>
</dict>
</plist>
In Sublime, create a new file with XML syntax and copy the above XML into it. Find your Packages directory by selecting Preferences -> Browse Packages... then save this new file as Packages/User/Reminders.tmLanguage (make sure the L in tmLanguage is capitalized). There should now be a "Users -> Reminders" option in the language list in the bottom right of Sublime, or through the View -> Syntax menu option.
However, there's one more thing to do - get coloring. To do this you'll need to modify your .tmTheme color scheme file. Since you're using Sublime Text 2 (I assume), it's pretty easy. Open Preferences -> Settings-User and check the value of "color_scheme". Open the color scheme file by selecting File -> Open..., navigating to the Packages directory you found earlier with Preferences -> Browse Packages..., and opening the file in whatever subdirectory it's in. For example, if your settings file says "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme" you'll navigate to the Packages/Color Scheme - Default directory in the open file dialog and open Monokai.tmTheme. Super easy.
Now that you have your color scheme file open, you can set the syntax to XML if you want, then scroll all the way down to the bottom. You'll want to insert your new colors (I'll get to that in a minute) above the lines that say:
</array>
<key>uuid</key>
<string>06CD1FB2-A00A-4F8C-97B2-60E131912345</string>
</dict>
</plist>
The UUID may not even be there, it might just say:
</array>
</dict>
</plist>
Regardless, whichever is there should always be the last lines in the file, or things will break. At any rate, above these lines, insert the following dicts:
<dict>
<key>name</key>
<string>Reminders - Title</string>
<key>scope</key>
<string>text.reminders text.title.reminders</string>
<key>settings</key>
<dict>
<key>fontStyle</key>
<string>bold italic</string>
<key>foreground</key>
<string>#00FF00</string>
<key>background</key>
<string></string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Reminders - Subtitle</string>
<key>scope</key>
<string>text.reminders text.subtitle.reminders</string>
<key>settings</key>
<dict>
<key>fontStyle</key>
<string></string>
<key>foreground</key>
<string>#FF0080</string>
<key>background</key>
<string></string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Reminders - Comment</string>
<key>scope</key>
<string>text.reminders text.comment.reminders</string>
<key>settings</key>
<dict>
<key>fontStyle</key>
<string></string>
<key>foreground</key>
<string></string>
<key>background</key>
<string></string>
</dict>
</dict>
Feel free to customize the foreground and background colors and the fontStyle attributes ("bold" and "italic" are the only working values) however you like.
One more thing, if you'll remember - setting Sublime to use tabs just in Reminders views. Create a new file using JSON syntax, or if you installed PackageDev, with "Sublime Settings" syntax. Add to it the following:
{
"translate_tabs_to_spaces": false,
"extensions":
[
"todo"
]
}
(Yes, I know "todo" is already in the language definition, I just like to be safe). You can add any other option here that's used in the Preferences -> Settings-Default and ... -> Settings-User files, just make sure the file is valid JSON. Save the file as Packages/User/Reminders.sublime-settings.
And that's it! You may need to restart Sublime for the changes to kick in, but then you're all set. To recap, the steps to making a new syntax definition are as follows:
Get PackageDev, your life will be a lot easier.
Write highlighting regexes in JSON or YAML format using the Oniguruma regex language, testing online with tools like Rubular (using Ruby 1.9.2 option).
Compile to PLIST/XML.
Modify color scheme for new scopes.
Create a .sublime-settings file for syntax-specific settings like tabs.
???
Profit!
* linked in my user profile if you're interested...

Related

Much needed: well-highlighted JSON log viewer

Using winston for node.js logging, I get json log files. A log file in this vein is simply a sequence of (newline delimited) json objects. This is great for log querying and treating logs as first-class data!
However, both Sublime and gedit (at least the versions of them I'm using on Ubuntu, sublime 2 and gedit 3.6.2), poorly highlight json - they use the same color for keys and values, making any log drilling quite painful and really impossible to go through in any remotely humane manner.
Existing chrome extensions for json highlighting aren't helpful here either - they can't handle a collection of json objects and thus fail displaying these log files unless I manually turn them into an array within a synthetic parent object first (thus turning them into a json object). This is tedious in the case of viewing a log file that is still being written to and in general......
Is there any tool that can both swallow json log files as is, and at the same time highlight keys in a different color than values, so that json logs are also friendly to man, not only to machine?? this is a real pain.
Thanks!
Check out the Neon Color Scheme, available via Package Control and Github for Sublime Text. Keys and values are highlighted in different colors, and there are different key colors for different levels.
Full disclosure: I'm the maintainer for this project, but I really think it'll help you out - it certainly helps me when working with multi-leveled JSON files like the one shown above.
If you like the default Monkai Theme, check out MonokaiJSON+ Theme!
It supports strings, dictionaries, arrays and all of these mixed as well!
https://github.com/ColibriApps/MonokaiJsonPlus
I modified original twilight theme to add rules for prettier json. It's a modified version of #MattDMo 's answer, and has the similar different key colors for different levels. You can get it from here
https://github.com/shaunakv1/twilight-tmTheme-better-json-highlight
Here's how JSON looks:
Mixing Allen Bargui's and MattDMo's answers, you can change the color of the nested keys/values by simply adding more dicts specifying the depth of the code by adding a meta after the source.json word.
Locate the theme file by going to Preferences > Browse Packages and then inside the Color Scheme - Default folder. Edit it by adding these lines:
<dict>
<key>name</key>
<string>Json Keys - 1 deep</string>
<key>scope</key>
<string>source.json meta meta.structure.dictionary.json string.quoted.double.json</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FF0000</string> <!-- your keys color -->
</dict>
</dict>
<dict>
<key>name</key>
<string>JSON Values - 1 deep</string>
<key>scope</key>
<string>source.json meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#00FF00</string> <!-- your custom color -->
</dict>
</dict>
<dict>
<key>name</key>
<string>Json Keys</string>
<key>scope</key>
<string>source.json meta.structure.dictionary.json string.quoted.double.json</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FF0000</string> <!-- your keys color -->
</dict>
</dict>
<dict>
<key>name</key>
<string>JSON Values</string>
<key>scope</key>
<string>source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#00FF00</string> <!-- your custom color -->
</dict>
</dict>
It's important to add the deeper ones BEFORE the rest, as Sublime will select the first matching occurrence. I guessed adding more meta would work for further depths but it actually didn't... But it did the trick for depth 1 at least.
You'll find that https://jsonlog.io/ is a solution that provides great visibility into your application's structured data IO. I'm the developer behind this, but it's a free resource I built to solve this exact issue in my own workflow.
Here's an example of one of the log formats that might help:
JSONLog Pretty Log View
And since it's a live logging-type platform the data displays live as they are sent from your application. It's a great way to get insight into your live/dev application IO.
I developed a command line tool to view json log (see https://github.com/qiangyt/jog). It is just like 'tail -f log-file' but it's for json log.
It's written using GO so it's cross-platform. The binaries are downloadable via https://github.com/qiangyt/jog/releases.
Not document how to configure it very well, but it works properly by default,and I'm happy to get issue report or new feature request
looking at a json file in SublimeText, I realised keys and values have different scopes. so it should be very trivial to customize your color scheme and add different color for keys and values.
keys have scope of source.json meta.structure.dictionary.json string.quoted.double.json
while values have source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json
so if you add this snippet at the bottom of you color scheme rules you should see them in different colors:
<dict>
<key>name</key>
<string>Json Keys</string>
<key>scope</key>
<string>source.json meta.structure.dictionary.json string.quoted.double.json</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#FF0000</string> <!-- your keys color -->
</dict>
</dict>
<dict>
<key>name</key>
<string>JSON Values</string>
<key>scope</key>
<string>source.json meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#00FF00</string> <!-- your custom color -->
</dict>
</dict>
If you want to visualize winston json log at console you can use munia-pretty-json
Your json data (app-log.json)
{"time":"2021-06-09T02:50:22Z","level":"info","message":"Log for pretty JSON","module":"init","hostip":"192.168.0.138","pid":123}
{"time":"2021-06-09T03:27:43Z","level":"warn","message":"Here is warning message","module":"send-message","hostip":"192.168.0.138","pid":123}
Run the command:
munia-pretty-json app-log.json
Here is readable output on console:
You can format the output with the template. The default template is '{time} {level -c} {message}'
Using template:
munia-pretty-json -t '{module -c} - {level} - {message}' app-log.json
Output:

Modifiying Sublime Text Syntax Highlighting for HTML Tags

I've tried numerous colour schemes for Sublime Text 2 and I've found a number that look great for javascript and php, but they also have terrible distinction between text and tags in HTML.
What I'm looking to do is make HTML tags the same colour as the beginning and end tag (<>). Right now the left and right chevrons appear the same colour as plain text, which can be dizzying to read.
Colour scheme Frontier
Realizing it's not the colour scheme but the syntax definitions for HTML, I looked in ~/Library/Application Support/Sublime Text 2/Packages/HTML/HTML.tmLanguage to make the modification.
Problem is, the XML file is littered with > and < and no documentation for the file itself other than the unofficial documentation for syntax definitions. Anyone know how I could merge the beginning and end tag definitions to be the same as the tags themselves?
The other option, of course, it to edit each theme I like and make sure the tags and the chrevrons are coloured the same, but I figured a global edit would make more sense in my case.
Colour scheme Phoenix Dark Blue
For example, Phoenix Dark Blue solves this problem by using the following definition,
<dict>
<key>name</key>
<string>Variable, String Link, Tag Name</string>
<key>scope</key>
<string>variable, support.other.variable, string.other.link, entity.name.tag, entity.other.attribute-name, meta.tag, declaration.tag</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#787878</string>
</dict>
</dict>
In case of further .tmLanguage-related emergencies, take note of the TextMate Manual's Language Grammars section. Their examples are in JSON: a format infinitely more readable than PLIST but not a thing that Sublime Text can properly utilize. ST2 and ST3 users can use PackageDev to edit grammars in YAML.
As you've mentioned, and as confirmed by my regex search &(g|l)t;, there are way too many < or > tag delimiters within the Sublime Text 2 (build 2221) HTML.tmLanguage grammar file. Some HTML tags and wacky regex tag contexts are so special that they warrant a unique denotation, which unfortunately for us includes re-specifying the scope and context of the tag delimiters, < and >, rather than hooking in to some universal inequality symbol scope selector.
Luckily, every instance of < and > is given a scope name of punctuation.definition.tag.???.html, where ??? could be begin, end, or nothing. Likewise, each HTML tag (html in <html>) is named quite a lot like entity.name.tag.html. Fortune be praised, it's time for regular expressions!
In your HTML.tmLanguage file – I'd actually suggest cloning a new one into Packages/User for safety's sake, although you'll have to rename the file and the grammar – perform a regex search for all offending scope names with:
punctuation\.definition\.tag.*(?=</string>)
…and replace every result (this should be as simple as one Ctrl+V) with the same name as the tags themselves, entity.name.tag.html. In my testing I also added another sub-scope past tag in case I needed to find the replacements later, so it looked like this:
entity.name.tag.delimiter.html
I've tested this with ST2's default color schemes, and it should work with other well-written themes. Here it is with Dayle Rees' Frontier:
It even works in Sublime Text 3!
ST2 is no longer supported (or running, as far as I know). Here is a quick ST3 solution.
To customize colors of 'tag' angle brackets, you must create a dict scope for tag activity, with foreground key and color string. Here is the correct syntax.
<dict>
<key>name</key>
<string>tag</string>
<key>scope</key>
<string>entity.name.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#CCCCAA</string> <!-- custom tag color here -->
</dict>
</dict>
This scope is explained here.
More scopes to explore here.

Sublime Text 2/3 class navigation to include class name in methods/fields

I'm using Sublime Text 3 on a large codebase, the entire LLVM + Clang.
One thing I'm seriously missing is the ability to goto a function belonging to a specific class.
To explain, let's say I'm in a file with 10+ classes, all having a method called getSourceRange().
The current goto symbol functionality only indexes the method names, so when I search for this method, I get a bunch of identical results that I have to go through manually until I find the right one. Using the project-wide Goto Symbol is worse as there are even more clashes.
What I'd like is for the indexed symbol name to always include the class name, e.g. VarDecl::getSourceRange instead of just getSourceRange. I can enable this for implementations outside-of-class by removing C++/Symbol Index.tmPreferences which essentially was stripping the CLASS:: from the indexed name. However I don't yet know how to inject the class name into definitions that are inside a class' scope.
The information is all there in the TextMate scopes, so I could technically add a rule for the following scope:
source.c++ meta.class-struct-block.c++ entity.name.function.c
But I don't know how to access the class' name as a string (stored in meta.class-struct-block.c++ » entity.name.type.c++ as saved in C++.tmLanguage), let alone format the function's indexed symbol name to include it.
Anyone know how to do this, if possible? TextMate's page explaining these mechanics doesn't mention this being possible, for what it's worth.
My attempt, stuck at how to insert a syntax name into the symbol(Index)?Transformation:
<?xml version="1.0" encoding="UTF-8"?>
<plist version="1.0">
<dict>
<key>scope</key>
<string>source.c++ meta.class-struct-block.c++ entity.name.function.c</string>
<key>settings</key>
<dict>
<key>symbolIndexTransformation</key>
<string>/^/${entity.name.type.c++}::/;</string>
<key>symbolTransformation</key>
<string>/^/${entity.name.type.c++}::/;</string> <!-- just adds it literally :( -->
</dict>
</dict>
</plist>

Sublime 2 -changing background color based on file type?

Using an existing Sublime 2 color scheme, is there a way to tweak the background color selectively for eg. .js files only?
Many thanks!
You have to modify your .tmTheme color scheme plist. You can find it with menu Preferences/Browse Packages..., Color Scheme - Default directory.
You should add something like this:
<dict>
<key>scope</key>
<string>source.js</string>
<key>settings</key>
<dict>
<key>background</key>
<string>#000000</string>
</dict>
</dict>
as a child of the settings array (of course you have to change #000000 with your color code).
I was actually trying to change the background color for text files and was wondering how Riccardo figured out how to use source.js as the value for the scope.
You need to locate the .tmLanguage file of the file type you are trying to change, which is "Plain text.tmLanguage" for text files. Then look for the scopeName key and use the value for that. This is from my "Plain text.tmLanguage" file:
<key>scopeName</key>
<string>text.plain</string>
So, for example, to change the foreground color for text files to lime:
<dict>
<key>scope</key>
<string>text.plain</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#00FF00</string>
</dict>
</dict>
For me I wanted to add color scheme to .conf (apache) file
opend myFile.conf in Sublime
Tools > Command Pallet > Set Syntax : groovy
I chose "groovy" you can choose which ever one you want.

Sublime text 2 - change tags color

I am using Sublime Text 2 - which i want to make it my default program for work.
I have install the Dreamweaver Theme - but i have some issues:
I dont know how to change the colors for tags (a, img, form, etc).
There are all in the same color, not like in Dreamweaver CS4 (see pic).
How can i change colors for each?
I have this in my theme code:
<dict>
<key>name</key>
<string>html img tag</string>
<key>scope</key>
<string>text.html meta.tag.img - string</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#6d232eff</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>html form tag</string>
<key>scope</key>
<string>text.html meta.tag.form - string</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#ff9700ff</string>
</dict>
</dict>
But when i change the colors in the string tag, not working - is there something missing?
Thx in advance
Try this:
<dict>
<key>name</key>
<string>Tag name</string>
<key>scope</key>
<string>entity.name.tag</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#EA0000</string>
</dict>
</dict>
<dict>
<key>name</key>
<string>Tag start/end</string>
<key>scope</key>
<string>punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#EA0000</string>
</dict>
</dict>
It comes down to the language definition (.tmLanguage) file. By default the HTML language definition cuts off at the general tag level, don't ask me why, but it follows TextMate's Scope Selector pattern. From what I can tell is people write the language file using JSON, and then convert it to a .plist file, and change the extension to a tmLanguage file.
The easiest thing I found was to install Siddley's Enhanced HTML/ColdFusion package, use the enhanced HTML language, and one of the DW color schemes.
After some looking, I found that Siddley clumped some tags together. I may be extending the language definition file. Will post on github if I do.
Follow this step to apply colour scheme of Dreamweaver cs5 in your sublime.
Click here to download Dreamweaver Theme Zip File
How to apply colour scheme like Dreamweaver CS5
1. Download zip file from Dreamweaver Theme File Link
2. Extract folder
3. Open sublime and goto "Preferences">"Browser Packages..">"Paste extract folder here"
4. Restart Sublime
5. Select color scheme from sublime, to select color scheme Goto "Preferences">"Color Scheme">"SublimeDreamweaver-master">"SublimeDreamweaver-master">"Dreamviwer"
6. Restart Again your sublime
7. Now open your file to see effect
8. Thanks
Change Font like dreamviwer after apply color scheme of dreamviwer.
1. Goto "Preferences">"Setting - User"
2. Add this line is your setting json, "font_face":"courier new"
3. Save enjoy
Thanks