Highlighting code is an important part of writing and reading code. Proper syntax highlighting makes code easier to read and understand. It also makes it easier to spot errors and bugs. There are a few different ways to highlight code depending on what language you are working in and what tools you are using.
Why Use Syntax Highlighting
There are several key benefits to using syntax highlighting:
- Readability – Color coding elements makes code easier to visually parse.
- Understanding – Highlighting shows the semantic meaning and role of each code element.
- Error Detection – Many IDEs use highlighting to indicate potential bugs and issues.
- Focus – Draws attention to important constructs like keywords and literals.
- Consistency – Establishes consistent styling conventions across codebases.
- Accessibility – High contrast colors can aid those with vision impairments.
Without syntax highlighting, code appears as a dense wall of plain text. This makes it harder to distinguish keywords, strings, comments, and other constructs at a glance. Syntax highlighting color codes these elements so their purpose is immediately clear.
Let’s look at a simple example:
<?php $name = "John"; echo "Hello $name!"; ?>
The PHP keywords are green, the variables are blue, and the string values are red. This color coding allows you to immediately recognize the role of each element.
Syntax highlighting is so vital for code readability that it is built into every major code editor and IDE. The next sections will cover how to configure syntax highlighting.
Highlighting in Text Editors
Most advanced text editors like Sublime Text, Visual Studio Code, Atom, and Brackets have built-in syntax highlighting for many languages. The highlighting colors and style are usually customizable as well.
For example, in Sublime you can choose syntax highlighting modes in the bottom right:
The color scheme can also be changed via the menu Preferences > Color Scheme.
Some configuration may be required for syntax highlighting to work properly for all file extensions in your project. For example, you may need to set the syntax for .vue files to Vue in VS Code.
Most editors use TextMate or hooks into compilers like Babel for their syntax highlighting. There are also extensive syntax packages available for download.
Highlighting in IDEs
Dedicated IDEs like PyCharm, IntelliJ, Xcode, Android Studio, and Visual Studio have very robust syntax highlighting built-in for their respective languages.
For example, here is some Java code in IntelliJ:
These IDEs allow configuring the color scheme, tweaking the colors for each syntax element, and choosing themes like Darcula for a dark appearance.
IDEs can provide more advanced highlighting features like:
- Semantic highlighting – Distinct colors for classes, methods, parameters, etc.
- Error highlighting – Bright underlines for bugs and warnings.
- Bracket matching – Colorizes paired brackets for easy matching.
So IDE syntax highlighting tends to be more customizable and advanced versus text editors.
Web Language Highlighting
On the web, syntax highlighting is done via HTML, CSS, and JavaScript instead of a native editor. Some popular ways to highlight code on the web include:
- Prism – Lightweight customizable highlighter.
- Highlight.js – Automatically detects languages.
- Google Prettify – Used by Google products.
Here is an example using Prism to syntax highlight HTML:
These libraries include themes and support automatic language detection. They are commonly used for highlighting code examples on documentation sites and blogs.
Dynamic Highlighting
Some editors like Jupyter Notebook allow dynamic syntax highlighting that changes as code is edited. This is done through live rendering rather than simple text coloring.
For example:
This allows highlighting code even before it is syntactically complete like showing errors for missing brackets.
Dynamic syntax highlighting provides an interactive element and immersive experience when coding and prototyping. Popular implementations include:
- Jupyter Notebook – For Python and other kernels.
- Observable – JavaScript notebook environment.
- LightTable – For Clojure, Python, and other languages.
These “live” IDEs update highlighting as you type without needing to save the file. This helps catch syntax issues immediately.
Babel Highlighting
Babel is a popular transpiler for new JavaScript syntax. The highlighting rules are defined through Babel plugins.
For example, to highlight React’s JSX syntax:
npm install --save-dev babel-plugin-syntax-jsx
This will teach the editor to handle JSX syntax even though it is not valid vanilla JavaScript.
Other Babel plugins are available for proposed ESNext features like async/await, class properties, decorators, etc. This allows using the new syntax with proper highlighting even before browsers fully support the new features.
Custom Highlighting
Most text editors allow some level of custom syntax highlighting using a regex-based grammar.
For example, Sublime Text uses the .sublime-syntax format:
%YAML 1.2
---
# Language highlighting for custom DSL
name: MyLanguage
scope: source.mylang
variables:
id: '\w+'
contexts:
main:
- match: \{%
scope: punctuation.section.embedded.begin.mylang
- match: \{%\s*(for)
captures:
1: keyword.control.for.mylang
- match: '{{cref'
scope: variable.other.reference.mylang
- match: \}\}
scope: punctuation.section.embedded.end.mylang
This allows creating highlighting for proprietary in-house languages and domain-specific languages.
Custom highlighting can also be added through language server protocol plugins, compiler directives, or building on top of an existing highlighter. This takes more development effort but allows deeply custom syntax colors.
Conclusion
Here are some key takeaways:
- Syntax highlighting improves code readability and comprehension.
- Text editors provide basic highlighting with customizable colors.
- IDEs have more advanced highlighting features and intelligence.
- Web syntax highlighters use HTML, CSS, JavaScript.
- Live highlighters like Jupyter update as you type.
- Babel plugins can add support for new syntax.
- Fully custom highlighting is possible through grammar definitions.
Proper syntax highlighting helps make code more accessible and understandable to both the author and readers. The visual cues aid in parsing and comprehending code. Syntax highlighters are built into every major code editor to provide these benefits. While they were once crude and limited, modern highlighters are configurable, intuitive, and combine visual styling with semantic insight. Syntax highlighting has become an indispensable tool for any software developer.
