Advanced Syntax Highlighting


#1

All of the syntax themes I’ve seen so far have used the standard attributes for differentiating code elements:

  • Background color
  • Foreground color
  • Occasionally
    • Italic
    • Underline
    • Bold

But we have web technologies at our disposal! We have some of the strongest UI definition DSLs ever made built right into Atom. We can use:

  • Opacity
  • Animations
  • Drop shadows
  • Blur effects
  • SVG filters
  • Other CSS craziness

So I was thinking of what things might be interesting to try out (even if it would make someone with any sort of design experience cringe or worse). What about:

  • Using opacity to draw attention away from or to sections of code
    • “Dim” comments, except for the comment block that your cursor is in, is selected or mouse pointer is over
  • Use drop-shadow to indicate syntax sub-types and their relationship to each other
    • String literals are green, but interpolated sections are yellow with a green drop-shadow
    • With CSS units, the number could be blue and the unit could be blue with a purple drop-shadow
  • Use animations to grab attention quickly
    • Use a color pulsing effect to highlight illegal code (rather than just the normal red background)

I’m not really design-inclined, so maybe these are bad examples … but I’m pretty certain that there are some good ideas out there to be had.

Thoughts?


General-purpose Color Scheme Editor
Multi Background Colors for Different Scopes
Dreaming of dynamic CoffeeScripted JavaScript
#2

Try it.


#3

I’ve already added the dimming of comments. I’m working on the color pulsing for illegal code. My hope was to get some discussion going and talk of possibilities.


#4

I think you will find this as popular as the old html blink tag. (grin)


#5

Maybe similar to iA Writer’s focus mode: http://www.iawriter.com/images/@2x/feature-ipad-02.jpg The current code block is focused, the rest is dimmed. Could be part of the Zen package: https://atom.io/packages/zen Probably not that practical. :stuck_out_tongue_winking_eye:

Something to keep in mind, text-shadows, animations etc. might have an impact on scroll performance. But just to play around… yeah… why not try some crazy stuff.


#6

Actually, I’ve used this technique before when getting a team to take localizing a website seriously. You’d be surprised how quickly a flashing hot pink MISSING STRING: login.form.name gets fixed :wink: The whole point of highlighting illegal code this way is for people to want to make it go away.


#7

I may have gone too far.

atom-text-editor {
	-webkit-animation: rainbow 5s linear infinite;
}

@-webkit-keyframes rainbow {
	from {
		-webkit-filter: hue-rotate(0deg);
	}
	to {
		-webkit-filter: hue-rotate(360deg);
	}
}

#8

I would have to try it of course, but I suspect that with the way I work I would want to make the blinking go away. I tend to chop everything into bits and pieces and put them back together again. My syntax is broken most of the time.

This is only hypothetical for me. I would definitely try it.


#9

Mine looks like that after about 12 hrs of coding.


#10

Also, LESS gives you an enormous amount of flexibility without the unmanageable bloat you’ll get in an old school style definition.

While animations may not be what you’re looking for in text you’re trying to edit, the options in CSS for highlighting specific code (invalids, lint-errors, etc.) are amazing. You can add icons and even text using before and after pseudo elements. So you could have a warning icon that shows a short explanation on hover, using just CSS. Text can be pulled from an attribute, so there’s lots you can do there. So, there’s more than just colors you can do in CSS.

One thing I wondered about doing is using different fonts for different stuff. Like using a serif for comments. You’ll need matching measurements though, but there are some options there.


#11

Here’s what I’ve kind of settled on for my uses for illegal code:

Notice pulsing, not blinking. I intend it to be attention attracting, not grabbing. (But I’m not a designer by any stretch … so I could very well be wrong on that :laughing:)


#12

Agreed. I think that if Atom can get to the point where it can handle things like individualized character measurements on fonts these kinds of things will push the boundaries even further.

Actually, that’s really interesting. I didn’t think of hover effects. (This is why I created this topic, because I’m nowhere near a CSS expert.) So instead of a “hey look at me” animation, there could be an interesting icon (a red octicon-stop perhaps?) that said why that section is bad. I’ll have to experiment with this too. This could even be packaged separately from themes.

Hmmmm … I wonder if I could even modify the attention animation to fade between the actual text and some generic text like “hover for info”.

Thanks for the ideas @braver!


#13

Webstorm just shows a red tilde at the end of the bad code. It grabs a lot of non-annoying attention.


#14

I don’t know what is the difference between “attention attracting” and “attention grabbing”. I’m not a native speaker. Perhaps grabbing is stronger than attracting here.

I think you failed. It took me a good two minutes to yank my attention away from that fascinating pulsing thing and I was able to type this comment. I’m not even able to finish the comment without pausing now and then to stare at the pulsing thing a little more.

On a related note: Sometimes the pulse is not even and it blinks while pulsing. (So you got the worst of both worlds there; congratulations.) There are too few steps, the color transitions are not smooth.


#15

In my opinion, good highlighting gives attention to the things that should be important to the developers. And give less attention to the things that developers should pay less attention to without making it feel like its secret.

Its even better to show directly what the code actually means, like colors.

And then I thought, meh, the chrome devs are doing such things already… so I decided to upload a screenshot of it…

Great source of inspiration :slight_smile:


So, to start some questions:

  • What is important in the code
  • What is less important
  • What would be cool to have (maybe so we spend less time figuring out what something means?)
  • What styles can we use
  • And how to make the best of it from all answers from the questions above

#16

That’s because I didn’t take the time to match up the beginning and the end of the animation with the beginning and end of the GIF movie. The definition of the animation is this:

// Creates pulsing yellow text for warnings
@-webkit-keyframes pulsate {
  from { color: @syntax-background-color; }
  to { color: yellow; }
}

.attention-animation {
  opacity: 1.0;
  -webkit-animation: pulsate 1s infinite alternate;
}

It’s completely smooth in the application.


#17

I think the syntax highlighting practices in current applications is much more this:

than this:

Most syntax highlighting currently seems to be specifically designed to not emphasize certain sections of code over any other. And I think for the most part that is a good thing. I know that two of my three examples were about emphasizing or de-emphasizing blocks of code, but that’s just what I came up with for examples off the top of my head.

One idea I got from the screenshot of the Chrome Dev Tools is the use of strikethrough. That could be useful in some cases, like unreachable code perhaps?


#18

One of the things I really like about what @simurai is doing with the one-*-syntax themes is de-emphasizing things like punctuation and units in css, etc. But really, that’s a design option that’s available in Sublime or any other editor. Easier to achieve with CSS perhaps, but not essentially new.

Where it gets really interesting in my opinion at least, is the inherently powerful interactivity available in CSS. :focus and :hover allow you to do really nice stuff like increasing the contrast of a comments you’re editing, but almost hide it when you’re not.

Transitions really work for interactions, like ease-in on focus, and delay and then ease out on blur. .

One thing you can do is explaining what a color in a syntax theme means. Why is this pink? Hover over it to learn it’s a variable. Why is that blue? It’s a reserved keyword. Etc. You can do that just straight from the stylesheet: the API is already there because we’re using HTML and CSS.

Also what would be interesting, and perhaps easily achievable in a theme package, is modes. Switch to debug mode to highlight (and perhaps then pulsate) errors, unreachable code, invalids, etc. Switch to documentation mode and let comments stand out. A mode to highlight TODO statements. The possibilities are staggering. You can simply switch classes in the root node of the editor to enable or disable sections of a stylesheet. That’s why I, as a UX designer and web front-end developer am so exited about Atom: it’s a super rich interactive framework lots of designers understand and will be able to create stuff with that’s beyond what’s achievable elsewhere and that goes beyond fancy animations and beautiful colors. You no longer have to think of it as a static document that is one way or the other: your code is interactive.


#19

Wow … :open_mouth: :boom: Yeah, this is the kind of thing that I figured someone with a design/UX background would figure out better/faster than I could.


#20

:smile:

Also, quick prove of concept: