[PATCH] General update for CartoCSS syntax highlighting
ClosedPublic

Authored by sommer on Feb 16 2020, 8:39 AM.

Details

Summary

Hi.

Here I propose an updated syntax highlighting for CartoCSS. (I'm also the author of the original, currently used highlighting file.)

Changes:

  • correct casing for CSS color names
  • comment formating is tweaked
  • do not use anymore a hardcoded list for properties. (These are evolving too fast to keep up.)
  • much better highlighting for strings (data field syntax within strings is now highlighted, both in properties and comments)
  • Overall the design fits better the structure of CartoCSS
  • Better design for named instances, classes and so on
Test Plan

I've developed this code about a year ago and since then have been using it on my local machine when working with CartoCSS. Seems to work fine.

Diff Detail

Repository
R216 Syntax Highlighting
Lint
Automatic diff as part of commit; lint not applicable.
Unit
Automatic diff as part of commit; unit tests not applicable.
sommer created this revision.Feb 16 2020, 8:39 AM
Restricted Application added projects: Kate, Frameworks. · View Herald TranscriptFeb 16 2020, 8:39 AM
Restricted Application added subscribers: kde-frameworks-devel, kwrite-devel. · View Herald Transcript
sommer requested review of this revision.Feb 16 2020, 8:39 AM

Hi, nice that you keep working on this and upstream your stuff ;=)
Could you provide some test file for this?

Yep.

Here comes an updated version for test.mss:

/* kate: hl CartoCSS
   This file contains some content coming from
   https://github.com/gravitystorm/openstreetmap-carto
   with CC0 license. This file is just for testing
   katepart highlighting engine.
   */

#world {
  // this syntax
  polygon-opacity: 50%; // the parameter “polygon-opacity” gets the value 0.5 (expressed in %)
  // is equivalent to
  polygon-opacity: 0.5;
}

/*
Variables behave similar to C macros
*/
@lsdjkf: @sdlfkj; // this variable gets defined by the value of another variable
@admin-boundaries: #ac46ac; // this variable gets defined by a color value
@way_pixels: "([way_area]*pow(4,@zoom)/24505740000)"; // A rather complex variable. [way_area] marks a data field. @zoom is a special runtime value (inspite of the @ it has nothing to do with ordinary variables)

/* This is
a multiline comment.
*/

// A single line comment
#admin-low-zoom[zoom < 11],  // A single line comment
#admin-mid-zoom[zoom >= 11][zoom < 13] {
  [admin_level = '2'], // Within filters, data fields like “admin_level” are referended without extra [] brackets.
  [admin_level = '3'] { // These data fields are rendered by default in dark blue, while the data field within expression strings are rendered by default in light blue.
    [zoom >= 4] {
      background/line-color: white; // symbolizer named “background”
      background/line-width: 0.6; // symbolizer named “background”
      line-color: @admin-boundaries; // default symbolizer (without name)
      name: [test]; // simplified reference to the data field “test”
      name: "[test]"; // another reference to the data field “test”, this time within an expression string (by default orange)
      name: "([way_area]*pow(4,@zoom)/24505740000)"; // a rather complex expression string that will do some math
      name: "'Value: '[test]"; // A verbatim string (by default red) as part of an expression string
      name: '"Value: "[test]'; // " and ' are interchangable. The outer is always the expression string and the inner the verbatim string.
    }
  }
  [admin_level = '4'] { // The string '4' is red because at this position it will be interpreted as a verbatim string, not as an expression string.
    [zoom >= 4] {
      line-dasharray: 4,3; // parameter “line-dasharray” gets as value a list of two integers
      line-clip: false;  // parameter “line-clip” gets as value a boolean
    }
  }
  comp-op: darken; // parameter “comp-op” gets as value “darken”.
}

.nature-reserve-boundaries { // .nature-reserve-boudaries references a class, which is similar to a layer like #building-text, so both are rendered the same way
  [way_pixels > 100][zoom >= 7] { // Here zoom is a keyword with results in a special filter. However, all other values are interpreted as data fields.
    [zoom < 10] {
      ::fill { // The :: syntax defined “attachments” (a sort of sub-layer within normal layers). So “fill” is rendered by default in the same style like layer names and class names (but this can be customized).
        opacity: 0.05;
        // various styles to define colors (all except the color function are rendered the same way):
        polygon-fill: white;
        polygon-fill: #ffffff;
        polygon-fill: #fff;
        polygon-fill: rgba(255,255,255,1); // define a color by a speciel function
        polygon-fill: #ffff; // invalid color value
        text-placement: interior; // all unknown values are hightlighted as named values.
      }
    }
  }
}
cullmann accepted this revision.Feb 28 2020, 5:07 PM

Ok, let's land that.

This revision is now accepted and ready to land.Feb 28 2020, 5:07 PM
This revision was automatically updated to reflect the committed changes.