Sublime Forum

Inline CoffeeScript (in HTML file)

#1

I do some lightweight coffeescript testing by including it in a script block and compiling at run time. Obviously not good for any kind of production environment, but great for testing small snippets of code on my desktop.

I’m trying to figure out how I can use the coffeescript bundle (or another method) to enable proper highlighting while looking at it inline. It’s contained in a script block like this:

<script type="text/coffeescript">...</script>

How does ST2 handle the Javascript highlighting? Is it just looking for a set of <script … /> tags or does it also look at the type attribute?

Since CoffeeScript and Javascript look similar, most of the highlighting works well enough - but comments, for example, don’t work. Ultimately, this isn’t a big deal since I’m not working on any large projects like this, but it would be nice to have. Any ideas?

Thanks!

0 Likes

Coffeescript embedded within html
HTML package does not recognize CoffeeScript
Revert/convert back to ST2 from ST3: Questions
#2

Sorry about the thread necromancy, but I’m interested in this too. Is this possible with ST2?

0 Likes

#3

I’m no doubt out of my depth here, but it seems like it should be possible. If you look at the HTML.tmLanguage file in the HTML bundle, you can see where it includes source.js at I think line 374. I think it’s assuming that anything inside tags is javascript. You should be able to clone & tweak those regexes to discriminate between js & coffeescript & do the appropriate include.

Not sure it’s generally desirable to do that for the “real” HTML language definition, since coffeescript doesn’t come standard & so not everybody will have it. I don’t know if it’s technically possible for the coffeescript bundle to do something to elaborate the HTML language definition–if it is, that’d probably be the best way to go. Maybe ask the coffeescript bundle author (github.com/Xavura)?

HTH,

-Roy

0 Likes

#4

Thanks for the advice, Roy.

Looking at HTML.tmLanguage, there is explicit support for embedded code from other languages, like Python, PHP, etc. Near as I can tell, there’s no way for a separate file to augment highlighting rules for HTML files, akin to vim’s after/syntax/ tree.

I was able to make inline CoffeeScript work by hacking HTML.tmLanguage (quoted below because .diff, .patch, and .txt files are not allowed here). It’d be nice if this could be included ST2. (I’ll try to draw Jon’s attention to this via userecho.)

--- HTML.tmLanguage.orig	2012-10-01 19:35:56.655201040 -0400
+++ HTML.tmLanguage	2012-10-01 19:29:12.575221356 -0400
@@ -283,6 +283,68 @@
 		</dict>
 		<dict>
 			<key>begin</key>
+			<string>(?:^\s+)?(&lt;)((?i:script))\b(?=^&gt;]*type *=^&gt;]*text/coffeescript)\b(?!^&gt;]*/&gt;)</string>
+			<key>beginCaptures</key>
+			<dict>
+				<key>1</key>
+				<dict>
+					<key>name</key>
+					<string>punctuation.definition.tag.html</string>
+				</dict>
+				<key>2</key>
+				<dict>
+					<key>name</key>
+					<string>entity.name.tag.script.html</string>
+				</dict>
+			</dict>
+			<key>end</key>
+			<string>(?&lt;=&lt;/(script|SCRIPT))(&gt;)(?:\s*\n)?</string>
+			<key>endCaptures</key>
+			<dict>
+				<key>2</key>
+				<dict>
+					<key>name</key>
+					<string>punctuation.definition.tag.html</string>
+				</dict>
+			</dict>
+			<key>name</key>
+			<string>source.coffee.embedded.html</string>
+			<key>patterns</key>
+			<array>
+				<dict>
+					<key>include</key>
+					<string>#tag-stuff</string>
+				</dict>
+				<dict>
+					<key>begin</key>
+					<string>(?&lt;!&lt;/(?:script|SCRIPT))(&gt;)</string>
+					<key>captures</key>
+					<dict>
+						<key>1</key>
+						<dict>
+							<key>name</key>
+							<string>punctuation.definition.tag.html</string>
+						</dict>
+						<key>2</key>
+						<dict>
+							<key>name</key>
+							<string>entity.name.tag.script.html</string>
+						</dict>
+					</dict>
+					<key>end</key>
+					<string>(&lt;/)((?i:script))</string>
+					<key>patterns</key>
+					<array>
+						<dict>
+							<key>include</key>
+							<string>source.coffee</string>
+						</dict>
+					</array>
+				</dict>
+			</array>
+		</dict>
+		<dict>
+			<key>begin</key>
 			<string>(?:^\s+)?(&lt;)((?i:script))\b(?!^&gt;]*/&gt;)</string>
 			<key>beginCaptures</key>
 			<dict>
0 Likes

#5

Thanks for sharing. The patch works well for me.

0 Likes

#6

Is this still accurate in ST3? I’m using inline CoffeeScript in some of my html files.

I’m told TextMate plugins also work with ST … is that right? If so I can also use the TM CS plugin if need be.

Thanks, sorta noob to ST

– Owen

0 Likes