Emulate codePen twilight theme

问题:

I'm trying to make sublime text to look like codepen.io twilight theme. I was able to copy it besides for some categories. I don't know what the name of the scope is. Here's an image with the different words I want to change.

(The text from the image is JavaScript.)

I want to change the purple underlined words to purple, and yellow to yellow. What are the keywords (scope names) for the words?

回答1:

The yellow underlined items in your example are class names (a special case of variable name in JavaScript (and most languages).

I don't believe a syntax scope exists in JS for class names. It seems they are scoped as simple variables. Assuming I am right you are going to need to define your own syntax scope, perhaps calling it 'className' or similar. The defining characteristic seems to be a leading Uppercase followed by a lowercase.

Then you'll need to reference that new name in the color scheme and make it yellow (#FFF000) http://htmlcolorcodes.com/.

The same goes for the purple where you might have a member or a property or anything accessible through dot notation (based on your example). Again I think you are going to need to add your own syntax definition to the syntactic definition file for the languages you want to use it in. The regex seems to be any alphanumerics following a dot (.) ending at the next dot found. The name might be 'dotValue' or similar. Then you'll need to add that new syntax to the color theme to make 'dotValue's purple (#9700FF).

Before you start doing any of the playing about required to get where you want to be by trial and error make very sure you have backups of the syntax and color themes in a known good state so you are able to get back to a safe state at any point you might go off the rails.

回答2:

You can find the scope name for any part of a document in Sublime Text 3 by placing the cursor immediately to the left of it and then using Tools menu -> Developer -> Show Scope Name, which will pop up a little window showing the scope, along with a button to copy it to the clipboard. This functionality is also available through Ctrl+Alt+Shift+P.