CODEWITHSUNDEEP
sublimetext2sublimetext
skyisred
skyisred

Reputation: 7105

Sublime text: how to customize syntax highlighting?

I use Smarty to generate html templates. I currently use html highlighting, which is mostly fine, except it doesn't highlight smarty tags, ex {foreach} I tried installing the Smarty package, but that doesn't look very good.

So basically I need to be able to add highlighting of anything within curly brackets to standard HTML coloring. How can this be done?

Upvotes: 12

Views: 39738

Answers (3)

Nate
Nate

Reputation: 629

Background

@MattDMo is right that a .tmTheme file is the principal file which controls the highlighting. It is an XML file with a series of Regular Expressions and tags that denote which RegEx matches which type of syntactic element.

You can search on GitHub and find many people who have already created Sublime Text packages which contain .tmTheme files. Note that you can directly use a package created for TextMate, as Sublime Text uses the same conventions. (This is true at least insofar as .tmTheme and .tmPreferences files go.)

For example, I was able to directly take a syntax highlighting package for the ChucK language, originally made for TextMate, and use it SublimeText2. The .tmTheme worked immediately by copying the file used with TextMate. I just removed additional junk files and then made a few changes to the .tmTheme, as well as added support for the Package Manager.

See that project here: https://github.com/nathanleiby/ChucK.tmbundle.

How to install new syntaxes

Package Control

Ideally, the syntax you already want is included available for download in the Sublime Text Package Control. Search in Package Control and install directly. (If you don't have Package Control yet, you must get it: https://github.com/wbond/package_control_channel/)

Manually

If you download a .tmTheme file or .tmBundle directly, you'll want to copy it to the appropriate packages folder in ST. Note that there is a /Packages folder and a /Packages/User folder. The ST2 documentation suggests copying to the latter, as it is guaranteed to be preserved even if other packages in the main folder are erased / modified during an update.

On OSX, that directory is: ~/Library/Application Support/Sublime Text 2/Packages/User/

(Note: You may prefer to git clone the package into this folder, so that you can easily update it.)

How to Create Your Own

If you want to dig in and customize the syntax highlighting, here are few places to get started.

  • Brush up on your Regular Expressions.
  • Sublime Text documentation for syntax definitions
  • <ctrl> + <shift> + p. Whenever you're looking at a file, select any word and press this key combination, then look in the footer bar. You should see a series of syntax descriptions. For example: I just highlighted a word in the SQL file I'm looking at and the response was: source.sql string.other.quoted.backtick.sql.
  • You'll probably prefer to parse your syntax using JavaScript / JSON, rather than XML. Use PackageDev. You can get this via Package Control. It has commands that allow you to go back and forth between .json (JSON) and .tmTheme (XML) files.
  • A related question on StackOverflow.

Caveat

This may be obvious, but the usefulness of syntax highlighting is related to which Color Scheme you have chosen in Sublime Text. (Sublime Text 2 -> Preferences -> Color Scheme -> ...)

I haven't yet had a chance explore/verify this in detail, but it seems that some color schemes may distinguish between more/less types of of syntax elements.

I highly recommend the "Monokai" color scheme (particularly, the "Monokai Soda" variant) for this reason -- it seems to "bring out the colors".

Upvotes: 26

svassr
svassr

Reputation: 5668

It's pretty simple

  1. With Sublime Text 2 default installation
  2. Open file "Packages\HTML\HTML.tmLanguage", if you search for string <!-- you will notice that (currently) there is two references to "Smarty" commented. Un-comment these.
  3. In your Smarty.tmLanguage file search for the string scopeName. That's a key actually and the associated string should be something like text.html.smarty.
  4. Copy that string into HTML.tmLanguage in place of source.smarty (the string for the key include at the end of the last block you just un-commented)

That's it. Enjoy

Upvotes: 2

MattDMo
MattDMo

Reputation: 102922

You probably need to modify your .tmTheme to add custom highlighting for the scopes defined by setting your syntax to Smarty. There should be a Smarty.tmlanguage file in the Packages/Smarty/Syntaxes directory. It's XML, so it can be a little tough for casual reading, but if you understand regexes and the scopes are named intelligently, you should be able to figure out how to modify your theme.

Upvotes: 2

Related Questions