multiple syntax highlighting in sublimetext 3 with .sublime-syntax file type

Question

I'm using zk framework and I need to do a sublime-syntax file that highlights in XML syntax, but in the zscript snippet uses java syntax highlighting and in style context uses CSS syntax. This is an example of zk code:

<zk>
    <style>
        .myClass{
            width=300px;
        }
    </style>

    <div id="panel1" class="myClass" visible="true" >   
        <hlayout width="100px">
            <image id="icon1" src="/Desktop/image1.png" width="32px"></image>   
            <image id="icon2" src="/Desktop/image1.png" width="50px"></image>   
        </hlayout>
    </div>  

    <zscript><![CDATA[
        try{
            if (panel1.isVisible()) {
                //do something
            }
        }catch(Exception e){
            //catch exception
        }
    ]]></zscript>
</zk>

I saw that some things have been changed recently and the current solutions that are on-line are not very clear, for example at this link I found the following note:

As of Sublime Text Build 3084, a new syntax definition format has been added, with the .sublime-syntax extension.

It is highly encouraged to be used in favor of the legacy format described in this document, unless compatibility with older versions is desired.

Documentation is available here: http://www.sublimetext.com/docs/3/syntax.html

So I need something like a tutorial on how to build a new multiple syntax file with SublimeText3.

I guess you know that already, but just to be sure: Official plugin supports this in Eclipse. Furthermore, a Google search for "sublime multiple syntax highlighting" showed up this question. This might work, as there is the zscript tag you can use as a start and end pattern. — Malte Hartwig
However the official Eclipse Plugin is not very well done to me, and in general I don't appreciate Eclipse — Marco Mazzon

Marco Mazzon Marco Mazzon · Accepted Answer · 2017-12-21T14:09:32

ok I solved my problem by installing PackageDev (Ctrl+Shift+P, select Package Control: Install Package, type and select PackageDev in order to install it), then I've selected: Tools -> Packages -> Package Developement -> New Syntax Definition.

Here I wrote this code:

%YAML 1.2
---
# See http://www.sublimetext.com/docs/3/syntax.html

name: zul
file_extensions:
 - zul
scope: text.zul

contexts:
  main:
    - match: ""
      push: "Packages/XML/XML.sublime-syntax"
      with_prototype:

        - match: '< *zscript *>'
          push: Packages/Java/Java.sublime-syntax
          with_prototype:
            - match: '(?=</ *zscript *>)'
              pop: true

        - match: '< *script *>'
          push: Packages/JavaScript/JavaScript.sublime-syntax
          with_prototype:
            - match: '(?=</ *script *>)'
              pop: true

        - match: '< *style *>'
          push: Packages/CSS/CSS.sublime-syntax
          with_prototype:
            - match: '(?=</ *style *>)'
              pop: true

File_extensions is a list of extensions that uses this syntax,
scope is source for programming languages and text for markup and everything else.
The match is the regular expression passed to the push element.
with_prototype is something like an exception in the syntax highlighting where you can define a snippet with a different syntax for different contexts

This example uses generally the xml syntax, between the tag <zscript> ... </zscript> uses the java syntax highlighting and in the <style> ... </style> context uses the css syntax.

I saved this file in C:\Users\username\AppData\Roaming\Sublime Text 3\Packages\User and then I founded this syntax file in my View -> Syntax -> User -> zul (the name of the file).

multiple syntax highlighting in sublimetext 3 with .sublime-syntax file type

1 Answers