Sublime 3, Sciter syntaxes

Sciter HTML/CSS/script in Sublime3

Steps to add Sciter support to Sublime3

  1. In Sublime: menu Preferences » Browse Packages. It will open /Packages folder.
  2. Create folder named Sciter right in that folder.
  3. Download all *.tmLanguage files from github.com/svitalij/sciter.tm.syntax
  4. Copy those *.tmLanguage files into that folder.

Done. Now if you will open .tis files in Sublime3 you will see syntax highlighting.

To edit HTML and CSS files with Sciter specific extensions select

View » Syntax » Sciter » Sciter HTML

Gratitude to Vitalij Shitts the Great

Sciter assistant for Visual Studio Code

Early BETA of Sciter Assistant for Microsoft Visual Code by ConrLab.

MS-visual-code-sciter

Microsoft Visual Code, Sciter assistant in actions 

Supports syntax and editing of Sciter HTML and CSS flavours and TIScript.

Code completion in CSS including @mixin/@const constructs and script for this and variables starting from el....

If to update user settings (File->Preferences->User Settings) like this:
code-preferences

then by using Ctrl-K, Ctrl-S sequence you can run it in sciter.exe.

HTML/CSS desktop UI solutions, distribution sizes

As was mentioned, I’ve added scapp.exe to the SDK distribution. The Scapp is a monolithic executable with Sciter engine inside.

The question: Having the scapp what if to create IDE using it? How that IDE will compare with other existing on the market?

To answer on this question I’ve created simple IDE sketch in Sciter (sdk/samples/ideas/ide/) :


ide-windows ide-osx
As you see it is pretty close to, let’s say, Brackets editor from Adobe: brackets-windows

My quick sketch implements just basic functionality: loading file, basic editing and syntax highlighting. All together HTML/CSS/scripts are about 40k (uncompressed). Full implementation will definitely have more of those. Let’s assume that we will be creative enough to produce 1mb of scripts, styles and HTML.

Together with the executable it will give us:

Binary (scapp.exe) HTML/CSS/scripts total
on disk 4.1mb 1mb 5.1mb
compressed
(distribution)
1.8mb 0.29mb 2.09mb

So the whole IDE could be of just 2 megabytes !

Let’s compare it with other behemoths then:

IDE/vendor distribution size installation size ratio to largest
(the less – the better)
Brackets / Adobe 48.1mb 114mb 51%/31%
Visual Studio Code / Microsoft 31.9mb 135mb 34%/37%
Atom / GitHub 93.6mb 366mb 100%/100%
Sciter / Terra Informatica Software 2.1mb 5.1mb 2%/1.4%

So for each of us, users, it takes 50 times more of traffic to download these things that it should be… Is it fair?

Announce: ScIDE

ScIDE is a compact and handy source code editor with syntax highlighting (colorizing).

ScIDE is a system of HTML, CSS and scripting files that are running inside the Sciter. So ScIDE is so-called .scapp – Sciter application.

ScIDE screenshot

You can run ScIDE:

  1. inside Sciter.exe player (part of main SDK distribution) or
  2. as a separate application ScIDE.exe that is available as a separate install-by-unzip ScIDE distribution.
    ScIDE.exe is a simple bootstrap exe of Embeddable Sciter – sciter-x.dll. Its sources are in the SDK.
  3. sciter-x.dll can be embedded in other applications so ScIDE or its parts may appear in other applications too.

ScIDE uses Scintilla editing engine wrapped as so called native behavior module. Sources of the behavior + slightly modified version of Scintilla are here.

ScIDE is lightweight and very fast despite of the fact that it uses scripting. Script is used as a glue sticking UI components together.

So far ScIDE knows about html, php, asp, css, js, tis, h/hpp and c/cpp files. These colorizing schemas are defined in /scapps/sciter.ide/scintilla/schemas/*.tis files and can be extended by script.

Visual style of the whole application is totally CSS driven so can be customized in different ways.