Improved CSS syntax highlighter.

2007-01-25
2013-05-02
  • Hi Guys,

    The css.jsf packaged with 3.5 was a bit deficient and buggy. Below you can find an enhanced version of the css.jsf that highlights the more complex CSS that has become quite common. It will break down subcomponents of declarations. It also fixes comments within styles and withing they value assignments.

    Cheers,
    Rob.

    ------------------------------

    #
    # JOE syntax highlight file for CSS
    # by Eric Lin
    #
    # Enhanced by Robert Cummings (robert@interjinn.com)
    #

    -

    # Define colors

    =Idle
    =Comment     green
    =Class         yellow
    =Id         red
    =Meta       bold green
    =Tag        cyan
    =Keyword    magenta
    =Between   
    =HTML

    :begin Idle
        *    begin    noeat call=.css()

    #
    # For <style> in html
    #

    .subr css

    :reset HTML
        *          reset
        "<"    maybe_done
        "/"        slash
        "#"   id_block_between recolor=-1
        "."   class_block_between recolor=-1
        "a-zA-Z"  tag_block recolor=-1

    :maybe_done HTML
        *    reset noeat
        "/"    reset noeat return recolor=-2

    :slash Idle
        *        reset        noeat
        "*"        comment        recolor=-2

    :comment Comment
        *        comment
        "*"        maybe_end_comment

    :maybe_end_comment Comment
        *        comment
        "/"        reset
        "*"        maybe_end_comment

    :id_block_reset Idle
      *   id_block
      "a-zA-Z"  tag_block recolor=-1
      "." class_block recolor=-1
      "#" id_block  recolor=-1
      "{" style_block recolor=-1

    :id_block_between Between
      *   id_block recolor=-1

    :id_block Id
      *   id_block
      "#" id_block_between recolor=-1
      "." class_block_between recolor=-1
      ":" meta_block_between recolor=-1
      " " id_block_reset
      "{" style_block recolor=-1
      "," tag_block_between recolor=-1

    :class_block_between Between
      *   class_block  recolor=-1

    :class_block  Class
      *   class_block
      "#" id_block_between recolor=-1
      "." class_block_between recolor=-1
      ":" meta_block_between recolor=-1
      " " tag_block
      "{" style_block recolor=-1
      "," tag_block_between recolor=-1

    :meta_block_between Between
      *   meta_block  recolor=-1

    :meta_block  Meta
      *   meta_block
      "#" id_block_between recolor=-1
      "." class_block_between recolor=-1
      ":" meta_block_between recolor=-1
      " " tag_block
      "{" style_block recolor=-1
      "," tag_block_between recolor=-1

    :tag_block_between Between
      *   tag_block  recolor=-1

    :tag_block  Tag
      *   tag_block
      "#" id_block_between recolor=-1
      "." class_block_between recolor=-1
      ":" meta_block_between recolor=-1
      "{" style_block recolor=-1
      "," tag_block_between recolor=-1

    :tag_sep  Idle
      * tag_block recolor=-1

    :style_block  Idle
      * style_block
      "}" reset
      "/" maybe_style_comment
      "a-zA-Z-"  style_word  recolor=-1

    :style_word Keyword
      * style_word
      ":" style_value  recolor=-1

    :style_value Idle
      * style_value
      ";" style_block
      "}" reset
      "/" maybe_style_value_comment

    :maybe_style_comment  Idle
      * style_block recolor=-1
      "*" style_comment recolor=-2

    :style_comment  Comment
      *   style_comment
      "*" maybe_end_style_comment

    :maybe_end_style_comment  Comment
      *   style_comment
      "/" style_block
      "*" maybe_end_style_comment

    :maybe_style_value_comment  Idle
      * style_value recolor=-1
      "*" style_value_comment recolor=-2

    :style_value_comment  Comment
      *   style_value_comment
      "*" maybe_end_style_value_comment

    :maybe_end_style_value_comment  Comment
      *   style_value_comment
      "/" style_value
      "*" maybe_end_style_value_comment

    .end

     
    • I recommend you post this in the Patches section.  There you can attach the file, which will preserve the spacing, unlike this forum.  Also, Marius Feraru (altblue) already posted an enhanced CSS syntax file there.  I recommend you merge the changes that each of you made and submit the resulting file.  In the description, say that you incorporated Marius Feraru's changes if you included them all.  He described his changes as hacks, so you might want to verify and clean up his work (assuming you know what you are doing any better than he does).

      Charles J. Tabony