Inline CoffeeScript (in HTML file)

[SeanWcom]

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:

Code: Select all

<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!

[tack]

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

[rpardee]

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 <script></script> 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 (https://github.com/Xavura)?

HTH,

-Roy

[tack]

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.)

Code: Select all

--- 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>


[ændrük]

Thanks for sharing. The patch works well for me.