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.

Answer 1

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