Author Topic: CSS Syntax Highlighting  (Read 3240 times)

jkwuc89

  • Senior Community Member
  • Posts: 199
  • Hero Points: 6
CSS Syntax Highlighting
« on: September 23, 2014, 11:27:20 am »
After opening a .css file inside SlickEdit 2014, I noticed that there is almost no syntax highlighting done. In an old thread on the SlickEdit forum, someone suggested importing a .e file from SlickEdit 17 to improve things. Can we get better CSS syntax highlighting added back into SlickEdit 2014? And how can I change the CSS color coding preferences to get SlickEdit to format hex values prefixed by # as numbers?

jkwuc89

  • Senior Community Member
  • Posts: 199
  • Hero Points: 6
Re: CSS Syntax Highlighting
« Reply #1 on: September 23, 2014, 11:52:06 am »
Attached is a CSS property list file I created to add CS keywords to CSS > Color Coding. To import this, go to Web Authoring Languages -> CSS -> Color Coding, select Tokens, select CS Keywords and click on Get...

patrick

  • SlickEdit Team Member
  • Senior Community Member
  • *
  • Posts: 1423
  • Hero Points: 130
Re: CSS Syntax Highlighting
« Reply #2 on: September 24, 2014, 01:57:05 pm »
Taking a look at this, unless I'm missing something, I don't think that support was supposed to go away.

patrick

  • SlickEdit Team Member
  • Senior Community Member
  • *
  • Posts: 1423
  • Hero Points: 130
Re: CSS Syntax Highlighting
« Reply #3 on: September 24, 2014, 03:45:32 pm »
Fixed for the next drop.  Thanks for the report.

jkwuc89

  • Senior Community Member
  • Posts: 199
  • Hero Points: 6
Re: CSS Syntax Highlighting
« Reply #4 on: September 30, 2014, 05:08:26 pm »
In beta 6, I don't think CSS syntax highlighting is working correctly. The attached screen shot shows what I am seeing. Notice that I am not seeing any keyword highlighting. The only highlighting I am seeing is for numbers and punctuation symbols.

Clark

  • Moderator
  • Senior Community Member
  • *
  • Posts: 5553
  • Hero Points: 449
Re: CSS Syntax Highlighting
« Reply #5 on: September 30, 2014, 06:16:16 pm »
Try a clean config (vs -sc \cleanconfig) . If you modified, your CSS color coding, the fix won't work. You may need to manually copy some style settings from vslick.vlx to your user.vlx.

jkwuc89

  • Senior Community Member
  • Posts: 199
  • Hero Points: 6
Re: CSS Syntax Highlighting
« Reply #6 on: September 30, 2014, 06:18:50 pm »
When I run vs -sc \cleanconfig, what exactly will it clean? I don't want to lose all of my other settings. Should I export and then, selectively import my current settings before doing this?

Clark

  • Moderator
  • Senior Community Member
  • *
  • Posts: 5553
  • Hero Points: 449
Re: CSS Syntax Highlighting
« Reply #7 on: September 30, 2014, 06:29:57 pm »
Use the -sc option just for testing. It won't effect your config. It will write some config directory data to the specific directory and migrate nothing because the directory shouldn't exist (that's the whole point). You can delete this test config data once you've tried out a clean config.

jkwuc89

  • Senior Community Member
  • Posts: 199
  • Hero Points: 6
Re: CSS Syntax Highlighting
« Reply #8 on: September 30, 2014, 06:39:58 pm »
Running vs -sc \cleanconfig and then, opening a CSS file now shows CSS syntax highlighting. How do I get this fix into my customized settings which seem to be overriding the CSS syntax highlighting fix?

Clark

  • Moderator
  • Senior Community Member
  • *
  • Posts: 5553
  • Hero Points: 449
Re: CSS Syntax Highlighting
« Reply #9 on: September 30, 2014, 06:59:04 pm »
Here's the correcting .vlx settings for CSS. You can replace your user.vlx [CSS] section with these setting or you will have to manually merge them. There's no automated anything for this fix. Sorry.

[CSS]
idchars=\-a-zA-Z_ 0-9-
case-sensitive=n
styles=dqbackslash nonumbers sqbackslash
keywords= @charset @font-face @import @keyframes @media @namespace @page @viewport
keywords= align-content align-items align-self alignment-adjust alignment-baseline
keywords= all anchor-point animation animation-delay animation-direction
keywords= animation-duration animation-fill-mode animation-iteration-count
keywords= animation-name animation-play-state animation-timing-function azimuth
keywords= backface-visibility background background-attachment background-clip
keywords= background-color background-image background-origin background-position
keywords= background-repeat background-size baseline-shift binding bleed bookmark-label
keywords= bookmark-level bookmark-state border border-bottom border-bottom-color
keywords= border-bottom-left-radius border-bottom-right-radius border-bottom-style
keywords= border-bottom-width border-collapse border-color border-image
keywords= border-image-outset border-image-repeat border-image-slice border-image-source
keywords= border-image-width border-left border-left-color border-left-style border-left-width
keywords= border-radius border-right border-right-color border-right-style border-right-width
keywords= border-spacing border-style border-top border-top-color border-top-left-radius
keywords= border-top-right-radius border-top-style border-top-width border-width bottom
keywords= box-decoration-break box-shadow box-sizing box-snap break-after break-before
keywords= break-inside caption-side chains clear clip clip-path clip-rule color
keywords= color-interpolation-filters column-count column-fill column-gap column-rule
keywords= column-rule-color column-rule-style column-rule-width column-span column-width
keywords= columns contain content counter-increment counter-reset counter-set crop cue
keywords= cue-after cue-before cursor direction display dominant-baseline elevation
keywords= empty-cells filter flex flex-basis flex-direction flex-flow flex-grow
keywords= flex-shrink flex-wrap float float-offset flood-color flood-opacity
keywords= flow-from flow-into font font-family font-feature-settings font-kerning
keywords= font-language-override font-size font-size-adjust font-stretch font-style
keywords= font-synthesis font-variant font-variant-alternates font-variant-caps
keywords= font-variant-east-asian font-variant-ligatures font-variant-numeric
keywords= font-variant-position font-weight grid grid-area grid-auto-columns
keywords= grid-auto-flow grid-auto-rows grid-column grid-column-end
keywords= grid-column-start grid-row grid-row-end grid-row-start grid-template
keywords= grid-template-areas grid-template-columns grid-template-rows
keywords= hanging-punctuation height hyphens icon image-orientation image-resolution
keywords= ime-mode initial-letters inline-box-align justify-content justify-items
keywords= justify-self left letter-spacing lighting-color line-box-contain
keywords= line-break line-grid line-height line-snap line-stacking
keywords= line-stacking-ruby line-stacking-shift line-stacking-strategy list-style
keywords= list-style-image list-style-position list-style-type margin margin-bottom
keywords= margin-left margin-right margin-top marker-offset marker-side marks mask
keywords= mask-box mask-box-outset mask-box-repeat mask-box-slice mask-box-source
keywords= mask-box-width mask-clip mask-image mask-origin mask-position mask-repeat
keywords= mask-size mask-source-type mask-type max-height max-lines max-width
keywords= min-height min-width move-to nav-down nav-index nav-left nav-right nav-up
keywords= object-fit object-position opacity order orphans outline outline-color
keywords= outline-offset outline-style outline-width overflow overflow-wrap
keywords= overflow-x overflow-y padding padding-bottom padding-left padding-right
keywords= padding-top page page-break-after page-break-before page-break-inside
keywords= page-policy pause pause-after pause-before perspective perspective-origin
keywords= pitch pitch-range play-during position presentation-level quotes
keywords= region-fragment resize rest rest-after rest-before richness right rotation
keywords= rotation-point ruby-align ruby-merge ruby-position shape-image-threshold
keywords= shape-outside shape-margin size speak speak-as speak-header speak-numeral
keywords= speak-punctuation speech-rate stress string-set tab-size table-layout
keywords= text-align text-align-last text-combine-upright text-decoration
keywords= text-decoration-color text-decoration-line text-decoration-skip
keywords= text-decoration-style text-emphasis text-emphasis-color
keywords= text-emphasis-position text-emphasis-style text-height text-indent
keywords= text-justify text-orientation text-overflow text-shadow
keywords= text-space-collapse text-transform text-underline-position text-wrap top
keywords= transform transform-origin transform-style transition transition-delay
keywords= transition-duration transition-property transition-timing-function
keywords= unicode-bidi vertical-align visibility voice-balance voice-duration
keywords= voice-family voice-pitch voice-range voice-rate voice-stress voice-volume
keywords= volume white-space widows width word-break word-spacing word-wrap
keywords= wrap-flow wrap-through writing-mode z-index -moz-box-sizing
keywords= -moz-column-count -moz-column-fill -moz-column-gap -moz-column-width
keywords= -moz-column-rule -moz-column-rule-width -moz-column-rule-style
keywords= -moz-column-rule-color -moz-font-feature-settings
keywords= -moz-font-language-override -moz-hyphens -moz-text-align-last
keywords= -moz-text-decoration-color -moz-text-decoration-line
keywords= -moz-text-decoration-style -webkit-animation -webkit-animation-delay
keywords= -webkit-animation-direction -webkit-animation-duration
keywords= -webkit-animation-fill-mode -webkit-animation-iteration-count
keywords= -webkit-animation-name -webkit-animation-play-state
keywords= -webkit-animation-timing-function -webkit-appearance
keywords= -webkit-backface-visibility -webkit-background-clip
keywords= -webkit-background-composite -webkit-background-origin
keywords= -webkit-background-size -webkit-border-bottom-left-radius
keywords= -webkit-border-bottom-right-radius -webkit-border-horizontal-spacing
keywords= -webkit-border-image -webkit-border-radius -webkit-border-top-left-radius
keywords= -webkit-border-top-right-radius -webkit-border-vertical-spacing
keywords= -webkit-box-align -webkit-box-direction -webkit-box-flex
keywords= -webkit-box-flex-group -webkit-box-lines -webkit-box-ordinal-group
keywords= -webkit-box-orient -webkit-box-pack -webkit-box-reflect -webkit-box-shadow
keywords= -webkit-box-sizing -webkit-column-break-after -webkit-column-break-before
keywords= -webkit-column-break-inside -webkit-column-count -webkit-column-gap
keywords= -webkit-column-rule -webkit-column-rule-color -webkit-column-rule-style
keywords= -webkit-column-rule-width -webkit-column-width -webkit-columns
keywords= -webkit-dashboard-region -webkit-line-break -webkit-margin-after
keywords= -webkit-margin-before -webkit-margin-bottom-collapse
keywords= -webkit-margin-collapse -webkit-margin-end -webkit-margin-start -webkit-margin-top-collapse
keywords= -webkit-marquee -webkit-marquee-direction -webkit-marquee-increment
keywords= -webkit-marquee-repetition -webkit-marquee-speed -webkit-marquee-style
keywords= -webkit-mask -webkit-mask-attachment -webkit-mask-box-image
keywords= -webkit-mask-clip -webkit-mask-composite -webkit-mask-image
keywords= -webkit-mask-origin -webkit-mask-position -webkit-mask-position-x
keywords= -webkit-mask-position-y -webkit-mask-repeat -webkit-mask-size
keywords= -webkit-nbsp-mode -webkit-padding-start -webkit-perspective
keywords= -webkit-perspective-origin -webkit-rtl-ordering
keywords= -webkit-tap-highlight-color -webkit-text-fill-color -webkit-text-security
keywords= -webkit-text-size-adjust -webkit-text-stroke -webkit-text-stroke-color
keywords= -webkit-text-stroke-width -webkit-touch-callout -webkit-transform
keywords= -webkit-transform-origin -webkit-transform-origin-x
keywords= -webkit-transform-origin-y -webkit-transform-origin-z
keywords= -webkit-transform-style -webkit-transition -webkit-transition-delay
keywords= -webkit-transition-duration -webkit-transition-property
keywords= -webkit-transition-timing-function -webkit-user-drag -webkit-user-modify
keywords= -webkit-user-select
libkeywords= url rgb rgba hsl hsla
mlcomment=/* */


Clark

  • Moderator
  • Senior Community Member
  • *
  • Posts: 5553
  • Hero Points: 449
Re: CSS Syntax Highlighting
« Reply #10 on: September 30, 2014, 07:00:06 pm »
If there are no settings for CSS in your user.vlx file that you need, you can also delete the [CSS] section.

jkwuc89

  • Senior Community Member
  • Posts: 199
  • Hero Points: 6
Re: CSS Syntax Highlighting
« Reply #11 on: September 30, 2014, 07:13:58 pm »
I merged the [CSS] settings posted earlier into user.vlx (Windows and OSX) and all is now working as expected.  Thank you for the info.