Color Coding

FIELDS OF STUDY

Programming Methodologies; Software Development

ABSTRACT

Many text editors display different elements of a computer programming or markup language in different colors. The goal of color coding is to make it easier for programmers to write, read, and understand source code. Syntax highlighting color-codes parts of the syntax of a programming language, such as keywords. Semantic highlighting color-codes other aspects, such as variables, based on the code content.

PRINCIPAL TERMS

COLORING CODE FOR CLARITY

Computer code is, first and foremost, a set of commands intended for a computer. In practice, however, the process of writing software requires programmers to spend time reading their code and their colleagues’ code. Reading and understanding code can be daunting and time-consuming.

In order to facilitate the process of reading code, text editors and integrated development environments (IDEs) began incorporating visual aids in the late 1980s. Among these aids is syntax highlighting, a technique that assigns various colors (and sometimes fonts and styles) to important elements of the code's syntax. For example, numbers could be represented in green and keywords in blue.

The goal of color coding is to reduce the amount of time it takes programmers to understand the purpose of a segment of code. When a program's source code is displayed in one color, programmers must read each line carefully for full comprehension. Color coding aims to allow programmers to skim like-colored words and patterns and to help identify errors.

Studies examining the effects of color coding on comprehension have had mixed findings. A 2006 Finnish experiment found no benefit to color coding when programmers searched code by sight. Such searches are crucial to comprehension and debugging. By contrast, two small Cambridge University experiments from 2015 found that colored code significantly reduced code-writing time among novice programmers but less so among experienced ones. Interestingly, the Finnish subjects favored colored code even when its effectiveness was not shown to be significant.

APPROACHES TO COLOR CODING

For a text editor or IDE to use color coding, it must know which language a given segment of code was written in and must understand the syntax rules for that language. Some editors support only a single programming language. Such editors assume that all code they encounter is in the language they support. More versatile editors examine file extensions and the content of source code files to determine which language is being used.




Color Coding

Using colored font in code does not change the function of the code itself, but it does make the code easier to read. This block of code has separate colors for commands, variables, functions, strings, and comments; a coder can use sight to quickly find particular elements.




Color Coding

Some editors rely entirely upon built-in knowledge about the syntax of certain languages for color coding. More versatile editors allow for the installation of language extensions or plug-ins. This makes it possible to use highlighting with languages about which the editor had no prior knowledge.

Some text editors allow programmers to customize the details of their color coding. This may include choices about which elements to color and which colors to use.

COMMONLY COLORED ELEMENTS

Standard approaches to syntax highlighting assign colors to a range of syntactical elements, often including the following:

SAMPLE PROBLEM

Consider the following code segment, written in the Java programming language. Even those who are unfamiliar with Java can appreciate how the coloring might make it easier to read the code.

Identify which colors in the segment correspond to the language elements listed below. For each element, list as many colors as apply.

Class names
Comments
Language keywords
Variable names
Literal values
Method names

Answer:

Dark blue
Dark green
Purple
Orange, grey, and black
Red
Bright green

A powerful extension of syntax highlighting, called “semantic highlighting,” attempts to make further coloring decisions based on the meaning of the code. Semantic highlighting may expand color coding to the names of variables (sometimes using a different color for each), classes, and methods.

COLOR CODING IN THE REAL WORLD

Each new language attempts to fix inefficiencies of prior languages, and with each IDE update comes new features aimed at further streamlining the task of programming. At each step, programmers spend less time puzzling over tools such as visual aids and more time imagining elegant solutions to difficult problems.

—Joel Christophel and Daniel Showalter, PhD

Beelders, Tanya R., and Jean-Pierre L. Du Plessis. “Syntax Highlighting as an Influencing Factor When Reading and Comprehending Source Code.” Journal of Eye Movement Research, vol. 9, no. 1, 2016, pp. 2207–19.

Deitel, Paul J., et al. Preface. Android: How to Program, Global Edition. 2nd ed., Pearson, 2015, pp. 19–30.

Dimitri, Giovanna Maria. “The Impact of Syntax Highlighting in Sonic Pi.” Psychology of Programming Interest Group, 2015, www.ppig.org/sites/default/files/2015-PPIG-26th-Dimitri.pdf . Accessed 22 Feb. 2017.

Everitt, Paul. “Make Sense of Your Variables at a Glance with Semantic Highlighting.” PyCharm Blog, JetBrains, 19 Jan. 2017, blog.jetbrains.com/pycharm/2017/01/make-sense-of-your-variables-at-a-glance-with-semantic-highlighting/ . Accessed 17 Feb. 2017.

Hakala, Tuomas, et al. “An Experiment on the Effects of Program Code Highlighting on Visual Search for Local Patterns.” 18th Workshop of the Psychology of Programming Interest Group, U of Sussex, Sept. 2006, www.ppig.org/papers/18th-hakala.pdf . Accessed 7 Mar. 2017.

Kingsley-Hughes, Adrian, and Kathie Kingsley-Hughes. Beginning Programming. Wiley Publishing, 2005.

Sarkar, Advait. “The Impact of Syntax Colouring on Program Comprehension.” Psychology of Programming Interest Group, 2015, www.ppig.org/sites/default/files/2015-PPIG-26th-Sarkar.pdf . Accessed 17 Feb. 2017.