over 9 years ago from Evan Brooks, pd at fb
Hi,
As a designer perpetually learning to code, here's an idea I had about how to improve syntax highlighting:
I wrote a brief introduction and made a very rough live demo.
I'd love to hear if anyone has done similar work before, I couldn't find much information on the history of syntax highlighting. I'd very much appreciate any thoughts!
As Matt said It's amazing how someone can find a different solution for something that has been done in a way for ages.
My point of view as a developer, I don't think this is useful for me because normally what I need to look for is for things like where does a function start, where the variables are defined, what is the return value, where a condition starts, etc. That's what normally the editors highlight. If I want to see where a variable is used, I just double click over it and Sublime automatically shows me where it's being used so I don't need to get each variable with a different color, I think this creates a mess of colors because sometimes you use a lot of different variables.
I'm not saying that the most used highlighting implementation is perfect but in my opinion this one is no better.
I appreciate the feedback, Adria! Especially from a developer's perspective.
There's definitely a tradeoff with this idea. For me, I didn't feel like I was looking for the color when I was trying to find where the function started— I was looking for indentation, because usually my function definitions are the only top-level indentation. And variables are defined at the top of functions.
It can definitely look messy once a lot of colors involved. I could limit it to just cool blues/greens/purples so it's less of a rainbow of color, but there'd still be a much larger variety of color.
At first look, this appears to be a beautiful concept. But, like many others have pointed out, it might become messy and cause distraction when it comes to large projects.
The use-cases described in the article already have other solutions in existing IDEs. Like, many editors point out right away when you make typos.
But, this got me thinking. Is the current way of syntax highlighting always perfect? Could something be improved for a niche, say, front-end developers?
Is the current way of syntax highlighting always perfect?
That's exactly what I wanted to get at, thanks for commenting. I think that IDEs have the potential to be a lot better integrated.
As a dev before a designer, I'd prefer the standard way. Don't get me wrong, this is a beautiful exploration that I'm grateful you did, but after looking through the codes color, I'm deterred.
Syntax highlighting provides great structure, no surprises, consistency. It is up to the developer to be able to scan the code at most.
At least? Tons of IDEs/Editors highlight all matching words if you place your caret within the word. There is much more to be done outside of syntax highlighting that would serve better improvements, perhaps.
Sublime is amazing for these kinds of things.
Appreciate the thoughts! yes, there's a whole lot of other stuff that can be done to improve how IDEs work. As a developer, what're your thoughts about something like Light Table?
As someone who was a designer before coder, I like this idea. A lot. If someone could package this into a web app, I'd use it everyday.
For me what you have done is more confusing because when I try to find something first I navigate to the functions which are highlighted with the same color and then in function I'm looking for a specific color+text combination.
I think your method will work in a jquery document ready event for me where everything is more messy, less organized, but I think I'll go with the existing method for long-term.
I have the same color palette for all languages from (flatuicolors.com) but different weights of colors for each language. http://d.pr/i/rM0S (yay to geisha source code)
I made it just for Coda 2 and NetBeans.
Appreciate the feedback, Ahmet!
I found that when I was looking for a function, I was looking more at indentation and spacing than color, but I also don't use as high-contrast a theme.
This is a neat idea. Thank you for putting it out there!
As a developer, I probably wouldn't use this style of syntax highlighting very often. I find syntax highlighting helpful due to the emphasis it places on structural aspects of the code. As others have pointed out.
That said, there are times when I'm working in a discovery mode, so to speak. If I inherit someone else's code, or I'm maintaining or debugging something. This style of syntax highlighting might be useful at those times. This could be easily packaged as a plugin for text editors and IDEs. Then it would be just a keystroke to toggle "discovery mode" syntax highlighting.
Great work. Thank you again.
I love when people solve everyday problems in a simple and innovative way. You, my fellow, is the kind of designer that makes me proud.
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now