Sublime Forum

Differentiate colour in HTML tags like Dreamweaver?

#1

I have just started using SublimeText coming from using Dreamweaver, one of the most noticable things missing from Sublime is the difference in colouring of different HTML tags.

I have been playing about with the HTML.tmLanguage file and have been able to get standard tags working, and change colours for block, forms, a, and img tags, but I still don’t think I fully understand how the language file works, is there any documentation?

I’m lost on if there is any priority for expressions? Ideally any “strings in quotes” will always be blue, except at the moment other expressions are being applied to strings. I’ve attached a screenshot of how I currently have Sublime set up, and it also shows a few bugs I still have with PHP being used within a tag!

Any help would be appreciated!


0 Likes

#2

Also, here is a snippet of the html language file…

		<dict>
			<key>match</key>
			<string>((&lt;(/){0,1}(form|input|label|select|option|textarea|button))(( ]{1}(^ =]+=)(\"(^\"]*)\"))*)([a-zA-Z0-9=]*) ]*/{0,1}>)</string>
			<key>captures</key>
			<dict>
				<key>1</key>
				<dict>
					<key>name</key>
					<string>z.form.tag</string>
				</dict>
				<key>4</key>
				<dict>
					<key>name</key>
					<string>z.form.tagname</string>
				</dict>
				<key>5</key>
				<dict>
					<key>name</key>
					<string>z.form.attr</string>
				</dict>
				<key>7</key>
				<dict>
					<key>name</key>
					<string>z.form.key</string>
				</dict>
				<key>8</key>
				<dict>
					<key>name</key>
					<string>z.form.value</string>
				</dict>
				<key>9</key>
				<dict>
					<key>name</key>
					<string>z.form.attr</string>
				</dict>
			</dict>
		</dict>
0 Likes

#3

Basically they’re Python regular expressions. So the match stuff is a Python re.match(). With the string part being the regular expression itself.

0 Likes

#4

I am not that familiar using Sublimetext in Dreamweaver but I am interested to learn. Anyway I hope there someone who can direct me on a tutorial or some information on how to use it. I think using it may help me in website developing career.

0 Likes