Sublime Forum

Code coloring for html tags like TABLE and INPUT

#10

Anyone know the answer to the last question about scoping HTML tags in Sublime Text 3?

Thanks!

0 Likes

#11

Anyone?

0 Likes

#12

For OS X they’re in Application/Sublime \Text/Contents/MacOS/Packages/*.sublime-package

From there you need to rename to *.zip and them you can open them up.

0 Likes

#13

Thanks for that. I’m using Windows, but the instructions were the same. Named the file HTML.sublime-package file with .zip and then extracted it and low and behold there is the HTML.tmLanguage file.

I added my definitions the same as I did in Sublime Text 2, saved it, but nothing happened, the syntax coloring is’t working. I put an underscore in front of the HTML.sublime-package file and tried again, this time getting an error when I tried to open an HTML file:

Error loading syntax file “Packages/HTML/HTML.tmLanguage”: Unable to open Packages/HTML.tmLanguage

Not sure what to do here. Do I need to recompile my changes back into the HTML.sublime-package file? Or? What am I missing here?

0 Likes

#14

I tried adding the modified HTML.tmLanguage file back to the HTML.sublime-package.zip file and then removed the .zip and it loads fine now, but my colors aren’t being applied :frowning:

The scope for the tags using ScopeHunter looks the same in Sublime 3 as it does in 2 so I’m completely lost as to why it’s not working.

So much agro for something that should be so simple.

0 Likes

#15

Anyone know how to get this working? I’m trying to uniquely colour IMG, FORM and TABLE tags in Sublime Text 3 but the same technique I used successfully in Sublime 2 isn’t working.

As always, any help would be greatly appreciated!

0 Likes

#16

ST3 still beta , i dont like beta , in my work XD
so ~ sorry , i can not help you

but …

in ST3
Sublime Text 3/Packages/HTML.sublime-package
you can open it , use the zip app like 7-zip

then you can see the “HTML.tmLanguage”

but i am not sure , we can change this XD
so good luck

XD

0 Likes

#17

Yeah, I did that as I described above, but no love. It just doesn’t work. Is it a bug? A beta issue? Kind of strange. I really would like to use 3 for the added features, but I’m quite happy with, and have got used to, my syntax colouring in 2, so I’m conflicted. I just really wish I could get this working.

0 Likes

#18

If you create a file with the same name, and the same package in the Packages directory, it’ll override the sublime-package file. I wrote github.com/skuroda/PackageResourceViewer to assist with the tasks. Simply use the plugin to open the file, make your changes, and save. It’ll place the file in the proper location to override the existing file.

0 Likes

#19

I really need to check back here more often. Thanks for the info skuroda. I’ll give it a try.

0 Likes

#20

Still not working for me. This is the code I have in my HTML.tmLanguage file to define the scope for adding custom colours to img, form and table tags…

<dict>
			<key>begin</key>
			<string>(&lt;/?)((?i:table|thead|tbody|tfoot|tr|th|td)\b)</string>
			<key>beginCaptures</key>
			<dict>
				<key>1</key>
				<dict>
					<key>name</key>
					<string>punctuation.definition.tag.table.begin.html</string>
				</dict>
				<key>2</key>
				<dict>
					<key>name</key>
					<string>entity.name.tag.table.html</string>
				</dict>
			</dict>
			<key>end</key>
			<string>(&gt;)</string>
			<key>endCaptures</key>
			<dict>
				<key>1</key>
				<dict>
					<key>name</key>
					<string>punctuation.definition.tag.table.end.html</string>
				</dict>
			</dict>
			<key>name</key>
			<string>meta.tag.table.html</string>
			<key>patterns</key>
			<array>
				<dict>
					<key>include</key>
					<string>#tag-stuff</string>
				</dict>
			</array>
		</dict>

		<dict>
			<key>begin</key>
			<string>(&lt;/?)((?i:img)\b)</string>
			<key>beginCaptures</key>
			<dict>
				<key>1</key>
				<dict>
					<key>name</key>
					<string>punctuation.definition.tag.img.begin.html</string>
				</dict>
				<key>2</key>
				<dict>
					<key>name</key>
					<string>entity.name.tag.img.html</string>
				</dict>
			</dict>
			<key>end</key>
			<string>(&gt;)</string>
			<key>endCaptures</key>
			<dict>
				<key>1</key>
				<dict>
					<key>name</key>
					<string>punctuation.definition.tag.img.end.html</string>
				</dict>
			</dict>
			<key>name</key>
			<string>meta.tag.img.html</string>
			<key>patterns</key>
			<array>
				<dict>
					<key>include</key>
					<string>#tag-stuff</string>
				</dict>
			</array>
		</dict>

		<dict>
			<key>begin</key>
			<string>(&lt;/?)((?i:form|fieldset|legend|label|input|textarea)\b)</string>
			<key>beginCaptures</key>
			<dict>
				<key>1</key>
				<dict>
					<key>name</key>
					<string>punctuation.definition.tag.form.begin.html</string>
				</dict>
				<key>2</key>
				<dict>
					<key>name</key>
					<string>entity.name.tag.form.html</string>
				</dict>
			</dict>
			<key>end</key>
			<string>(&gt;)</string>
			<key>endCaptures</key>
			<dict>
				<key>1</key>
				<dict>
					<key>name</key>
					<string>punctuation.definition.tag.form.end.html</string>
				</dict>
			</dict>
			<key>name</key>
			<string>meta.tag.form.html</string>
			<key>patterns</key>
			<array>
				<dict>
					<key>include</key>
					<string>#tag-stuff</string>
				</dict>
			</array>
		</dict>

And this is in my theme for defining the colours…

		<dict>
			<key>name</key>
			<string>HTML Tag Table</string>
			<key>scope</key>
			<string>meta.tag.table.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#839400</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag Table</string>
			<key>scope</key>
			<string>meta.tag.table.html entity.name.tag.table.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#839400</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag IMG</string>
			<key>scope</key>
			<string>meta.tag.img.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#B64C77</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag IMG</string>
			<key>scope</key>
			<string>meta.tag.img.html entity.name.tag.img.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#B64C77</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag IMG</string>
			<key>scope</key>
			<string>meta.tag.img.html entity.other.attribute-name.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#B64C77</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag Form</string>
			<key>scope</key>
			<string>meta.tag.form.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#69B2C2</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag Form</string>
			<key>scope</key>
			<string>meta.tag.form.html entity.name.tag.form.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#69B2C2</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag Form</string>
			<key>scope</key>
			<string>meta.tag.form.html entity.other.attribute-name.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#69B2C2</string>
			</dict>
		</dict>

		<dict>
			<key>name</key>
			<string>HTML Tag Form</string>
			<key>scope</key>
			<string>meta.tag.form.html meta.attribute-with-value.id.html entity.other.attribute-name.id.html</string>
			<key>settings</key>
			<dict>
				<key>fontStyle</key>
				<string></string>
				<key>foreground</key>
				<string>#69B2C2</string>
			</dict>
		</dict>

This works fine in ST2, but has no effect in ST3.

0 Likes

#21

Anyone know how to get custom colouring working in ST3? I’ve done the exact same thing as I have done in ST2 but it’s not working.

0 Likes

#22

Syntax definitions and color schemes work exactly the same way as they did in ST2. The only difference is how packages are handled.

Check github.com/skuroda/PackageResourceViewer to extract the files to the right locations. You should be able to use that plugin and just save the file when you are done and it should have the correct name (and folders are automatically created). Remember that you need to do this with both the syntax definition and the color scheme - and a restart won’t hurt. You can test if the syntax definition works by inspecting the scope of the tag in question. If it’s working as expected, chances are you did something wrong with the color scheme.

0 Likes

#23

colorcoder does color each html tag in a different color

0 Likes

#24

[quote=“FichteFoll”]Syntax definitions and color schemes work exactly the same way as they did in ST2. The only difference is how packages are handled.

Check github.com/skuroda/PackageResourceViewer to extract the files to the right locations. You should be able to use that plugin and just save the file when you are done and it should have the correct name (and folders are automatically created). Remember that you need to do this with both the syntax definition and the color scheme - and a restart won’t hurt. You can test if the syntax definition works by inspecting the scope of the tag in question. If it’s working as expected, chances are you did something wrong with the color scheme.[/quote]

As I said in my previous post, I’ve done exactly this. I used PackageResourceViewer to open the HTML package and to edit HTML.tmLanguage, add the code that I previously posted, which works perfectly in ST2, saved it, restarted, nothing happens. I’m using the exact same color scheme for both ST2 and ST3 which has these new colors defined.

ST-2

http://www.resdivina.com/img/st2-colors.png

ST-3

http://www.resdivina.com/img/st3-colors.png

I want to specifically change just a couple of HTML tags in my scheme. I do not want to apply a rainbow of colors and wholesale changes to my theme (including backgrounds, line numbers, tab indicators, etc.) so it no longer looks even remotely the same.

0 Likes

#25

Anyone?

0 Likes

#26

.sublime-package files are effectively just ZIP files with a different extension. If you open a file contained within a ZIP and just hit “save” it’ll probably be saved somewhere else. Just a thought; did you open up the sublime-package file again to make sure the changes you made have been updated in the ZIP file?

Another option is to save the modified HTML.tmLanguage file in your User folder. Sublime will pick up files in there - tmLanguage, python scripts and configs - and use them in preference to files stored elsewhere. For example, I use a modified Soda Dark.tmTheme file that’s just saved in my User folder. AFAIK, tm*** files are unchanged between ST2 and ST3, so anything you do in ST2 tmLanguage files should work equally in ST3.

A third suggestion by way of investigation, is to take a copy of your working ST2 HTML.tmLanguage file and drop it in your User folder for ST3 in its entirety.

0 Likes

#27

I’m not sure if this helps or not. The primary difference between ST2 and ST3 is ST2 is written in Python2 and ST3 is written in Python3. Some of the packages don’t work in ST3 because of the upgrade. This may be why your ST2 code doesn’t work in ST3. Just a guess on my part.

viewtopic.php?f=3&t=14020&p=53396&hilit=package+control+not+working#p53396

0 Likes

#28

Thanks for the feedback folks. When I’ve got a bit more spare time I’ll take another crack at it.

Cheers.

0 Likes

#29

You resolved it? I have the same problem …

0 Likes