CODEWITHSUNDEEP
sublimetext3
Asaf Katz
Asaf Katz

Reputation: 4688

target CSS syntax highlight inside JS in Sublime Text

Recently, sublime text 3 added a new feature, allowing inline style to be syntax highlighted and to use CSS specific auto-completions:

enter image description here

I believe it some sort of new scoping, targeting quotes

I would like to know if it possible to extend the css syntax to match:

enter image description here

Upvotes: 1

Views: 274

Answers (1)

Sahar Zehavi
Sahar Zehavi

Reputation: 590

EDIT: while you can simply alter the JavaScript definition file, the correct answer will be to extend it. that can be simply done by creating a new language file, and on the final pattern add "include: source.js". your final file should look like that:

    <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
   <key>fileTypes</key>
   <array>
      <string>js</string>
      <string>htc</string>
      <string>jsx</string>
   </array>
   <key>name</key>
   <string>JavaScript Custom</string>
   <key>patterns</key>
   <array>
      <dict>
         <key>begin</key>
         <string>--\[</string>
         <key>end</key>
         <string>\]--</string>
         <key>name</key>
         <string>source.js.custom.css.inline</string>
         <key>patterns</key>
         <array>
            <dict>
               <key>include</key>
               <string>source.css</string>
            </dict>
         </array>
         <key>comment</key>
         <string>My Shiny Technology</string>
      </dict>

      <dict>
         <key>include</key>
         <string>source.js</string>
      </dict>
   </array>

   <key>scopeName</key>
   <string>source.js.custom</string>
   <key>uuid</key>
   <string>93E017CC-6F27-11D9-90EB-000D93589AF6</string>
</dict>
</plist>

Original post: You can indeed. All you need to do is take your javascript language file (you can find one here) and add a new pattern with regex that will define the begining and ending parts of the block you want to cssify.

you need to add your 'patterns' object the following dict:

  <dict>
     <key>begin</key>
     <string>--\[</string>
     <key>end</key>
     <string>\]--</string>
     <key>name</key>
     <string>source.css.inline</string>
     <key>patterns</key>
     <array>
        <dict>
           <key>include</key>
           <string>source.css</string>
        </dict>
     </array>
     <key>comment</key>
     <string>My Shiny Technology</string>
  </dict>

That example you will catch all tag lines in the format the --[ code ]-- as css. edit it to add any other blocks you would like to cssify.

Notice: the include part defines the ruling inside the block, NOT the name property. and you shouldn't forget to switch to your new defined language, and not the OG one.

Upvotes: 1

Related Questions