1

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:

  • inside a javascript file
  • starts with: "styler`"
  • ends with: `

enter image description here

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.