20.2 C
New York
Sunday, September 25, 2022

What Is Syntax Highlighting? – MUO – MakeUseOf

You might’ve heard this term, especially in the feature sets of modern code editors. But what does it do and why?
Each day opens with an effort to ease the tasks in every profession. For programmers, syntax highlighting is one of many features offered by modern code editors to aid productivity.
What exactly is syntax highlighting? And can it help you write better code?
Syntax highlighting—or syntax coloring—is a technique that text editors use to distinguish parts of source code using color. It typically highlights keywords, string literals, and other syntactic elements. Syntax highlighting can also draw attention to syntax errors.
When writing code, there's usually no immediate visual feedback. But syntax highlighting can tell if you're at least writing valid code.
The exact origin of syntax highlighting in coding isn't that clear. But it could be as old as four decades, starting with Anita H. Klock and Jan B. Chodak's 1982 patented syntax highlighting editor.
So, syntax highlighting assigns colors to different elements of code and markup. These elements include keywords, functions, tags, data types, objects, and comments, among many others.
It doesn't affect the code itself, just how an editor displays it. But we can't ignore the influence of color on the mind and brain. The feeling of writing colorful, meaningful code can be satisfying and might improve productivity.
Code editors approach syntax highlighting in different ways. VS Code, for instance, uses text tokenization and theme assignment to highlight text. Editors can support syntax highlighting across a range of languages, and some may be more colorful than others!
So, syntax highlighting sorts code elements in text editors. But is this in any way helpful to programmers?
Highlighted source code is easier to scan when you can distinguish parts of it by color. For instance, identifying comments within a code block is easier with syntax highlighting.
Unhighlighted code is somewhat hard to read, as the code base appears ugly and complex.
Just look at highlighted code alongside code that isn't. The former is more readable, and it's much easier to pick out specific parts:
Syntax highlighting can ease debugging since it focuses on the different meanings of code you're adding or modifying. It doesn't usually flag up incorrect syntax, but syntax that it doesn't recognize may appear as plain white or black, signaling a problem.
Your ability to differentiate between syntax colors may also depend on your code editor's theme. For instance, it might be hard to distinguish an unhighlighted black syntax from a highlighted deep blue on a white background.
Syntax highlighting can still overlook elements of code your editor cannot understand. For example, it may be unable to identify method names of custom classes.
Thus, syntax highlighting adds little value to syntax debugging, which is the role of a language-specific linter.
Some studies suggest that syntax highlighting doesn't significantly affect code comprehension. But colored code can still be more aesthetically pleasing, according to the eye of the beholder. You won't remember a syntax by its color, but syntax coloring can still make programming more approachable.
We've discussed some bright sides of syntax highlighting. But while it's a helpful feature, there can be some downsides.
If this is the case for a new programmer, it becomes harder to iron out underlying bugs since they tend to focus more on syntax errors. This reduces creativity and problem-solving skills.
Besides, syntax errors are the least of your problems when writing code. There are worse bugs that tend toward code logic and approach that need your attention.
It's rare for a code linter to mark imported third-party packages as bugs in editors like VS Code and Atom. And sometimes, the highlighter might fail to apply color to imported symbols. This might happen if your code editor fails to read the module from its source or if the installed linter doesn't recognize the package.
It can be deceptive since you might think you've written invalid code, even when it's correct. You might end up troubleshooting errors that aren't there after all.
Many modern code editors and IDEs, including VS Code, Atom, Sublime Text, Komodo Edit, and many more, support code highlighting. The feature is active by default in most of them. However, you might have to tweak specific settings for each to turn it off.
Syntax highlighting is also prevalent in code snippets and online HTML editors. For instance, you can style code snippets for display on your website using highlight.js. This JavaScript syntax highlighting library supports many programming languages.
Syntax highlighting is only a feature in modern code editors and IDEs. As you've seen, it only enhances code aesthetics and readability. It shouldn't influence your logical reasoning and problem-solving skills or distract you. Rather than bother yourself about the tools in your code editor, focus on understanding every bit of any programming language you use.
Idowu took writing as a profession in 2019 to communicate his programming and overall tech skills. At MUO, he covers coding explainers on several programming languages, cyber security topics, productivity, and other tech verticals. Idowu holds an MSc in Environmental Microbiology. But he sought out values outside his field to learn how to program and write technical explainers, enhancing his skill set. And he hasn’t looked back since then.
Join our newsletter for tech tips, reviews, free ebooks, and exclusive deals!


Related Articles


Please enter your comment!
Please enter your name here

Latest Articles