Editing Syntax highlighting

{{Short description|Tool of editors for programming, scripting, and markup}}
{{For|syntax highlighting on Wikipedia and other MediaWiki wikis|Wikipedia:Syntax highlighting|selfref=yes}}

[[File:HTML source code example.svg|frame|right|[[HTML]] syntax highlighting]]
'''Syntax highlighting''' is a feature of [[text editor]]s that is used for [[programming language|programming]], [[scripting language|scripting]], or [[markup language|markup]] languages, such as [[HTML]]. The feature displays text, especially [[source code]], in different [[Text color|colours]] and [[font]]s according to the category of terms.<ref>{{cite book |title=The Java developer's guide to Eclipse |date=2005 |publisher=Addison-Wesley |location=Boston |isbn=978-0-321-30502-2 |edition=2nd |author1=Jim D'Anjou |author2=Sherry Shavor |author3=Scott Fairbrother |author4=Dan Kehn |author5=John Kellerman |author6= Pat McCarthy}}</ref> This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and [[syntax error]]s are visually distinct. This feature is also employed in many programming related contexts (such as programming manuals), either in the form of colourful books or online websites to make understanding code snippets easier for readers. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.

Syntax highlighting is a form of [[secondary notation]], since the highlights are not part of the text meaning, but serve to reinforce it. Some editors also integrate syntax highlighting with other features, such as [[spell checking]] or [[code folding]], as aids to editing which are external to the language.

==Practical benefits==
[[File:Syntax-highlighting-javascript.gif|thumb|right|312px|Highlighting the effect of missing delimiter (after ''watch='false'') in JavaScript]]
Syntax highlighting is one strategy to improve the readability and context of the text; especially for code that spans several pages. The reader can easily ignore large sections of comments or code, depending on what they are looking for.
Syntax highlighting also helps programmers find errors in their program. For example, most editors highlight [[string literal]]s in a different colour. Consequently, spotting a missing [[String literal#Bracketed delimiters|delimiter]] is much easier because of the contrasting colour of the text. [[Brace matching]] is another important feature with many popular editors. This makes it simple to see if a brace has been left out or locate the match of the brace the cursor is on by highlighting the pair in a different colour.

A study published in the conference [[Psychology of programming|PPIG]] evaluated the effects of syntax highlighting on the comprehension of short programs, finding that the presence of syntax highlighting significantly reduces the time taken for a programmer to internalise the semantics of a program.<ref name=":0">{{Cite journal |last=Sarkar |first=Advait |date=2015 |title=The impact of syntax colouring on program comprehension |url=https://ppig.org/papers/2015-ppig-26th-sarkar1/ |url-status=live |journal=Proceedings of the 26th Annual Conference of the Psychology of Programming Interest Group |pages=49–58 |archive-url=https://web.archive.org/web/20150924080735/http://www.ppig.org/library/paper/impact-syntax-colouring-program-comprehension |archive-date=24 September 2015 |access-date=27 September 2023}}</ref> Additionally, data gathered from an eye-tracker during the study suggested that syntax highlighting enables programmers to pay less attention to standard syntactic components such as keywords.

==Support in text editors==
[[File:Gedit 3.32 screenshot.png|thumb|[[gedit]] supports syntax highlighting|311x311px]]
Some text editors can also export the coloured markup in a format that is suitable for printing or for importing into word-processing and other kinds of text-formatting software; for instance as a HTML, colourized LaTeX, [[PostScript]] or [[Rich Text Format|RTF]] version of its syntax highlighting. There are several syntax highlighting [[Library (computing)|libraries]] or "engines" that can be used in other applications, but are not complete programs in themselves, for example the Generic Syntax Highlighter (GeSHi) extension for [[PHP]].

For editors that support more than one language, the user can usually specify the language of the text, such as [[C (programming language)|C]], [[LaTeX]], [[HTML]], or the text editor can automatically recognize it based on the file extension or by scanning contents of the file. This automatic language detection presents potential problems.<ref name="PLangRec">{{cite journal|url=https://www.sciencedirect.com/science/article/pii/S0167739X24006046|title=PLangRec: Deep-learning model to predict the programming language from a single line of code|author1=Oscar Rodriguez-Prieto|author2=Alejandro Pato|author3=Francisco Ortin|journal=Future Generation Computer Systems, Volume 166, May 2025, 107640|publisher=Elsevier|date=2025|volume=166 |doi=10.1016/j.future.2024.107640 |doi-access=free}}</ref> For example, a user may want to edit a document containing:
* more than one language (for example when editing an [[HTML]] file that contains embedded [[JavaScript]] code),
* a language that is not recognized (for example when editing source code for an obscure or relatively new programming language),
* a language that differs from the file type (for example when editing source code in an extension-less file in an editor that uses file extensions to detect the language).

In these cases, it is not clear what language to use, and a document may not be highlighted or be highlighted incorrectly.  Some tools, like Guesslang and PLangRec, are designed to detect the programming language from the source code.<ref name="PLangRec"/>

==Syntax elements==
Most editors with syntax highlighting allow different colours and text styles to be given to dozens of different lexical sub-elements of syntax. These include keywords, comments, control-flow statements, variables, and other elements. Programmers often heavily customize their settings in an attempt to show as much useful information as possible without making the code difficult to read.

{{anchor|Syntax decoration}}Called ''syntax decoration'', some editors also display certain syntactical elements in more visually pleasing ways, for example by replacing a pointer operator like <code>-></code> in source code by an actual arrow symbol (→), or changing [[text decoration]] clues like /italics/, *boldface*, or _underline_ in source code comments by an actual ''italics'', '''boldface''', or <u>underlined</u> presentation.

===Examples===
Below is a comparison of a [[snippet (programming)|snippet]] of [[C (programming language)|C]] code:

{| class="wikitable" width="100%"
|-
! Standard rendering
! Syntax highlighting
|-
|
<syntaxhighlight lang="text">
/* Hello World */
#include <stdlib.h>
#include <stdio.h>

int main()
{
    printf("Hello World\n");
    return 0;
}
</syntaxhighlight>
|
<syntaxhighlight lang="c">
/* Hello World */
#include <stdlib.h>
#include <stdio.h>

int main()
{
    printf("Hello World\n");
    return 0;
}
</syntaxhighlight>

|}

Below is another snippet of syntax highlighted [[C++]] code:
<syntaxhighlight lang="cpp">
// Create "window_count" Window objects:
const auto window_count = int{10};
auto windows = std::array<std::shared_ptr<Window>, max_window_count>{};
for (auto i = int{0}; i < window_count; ++i) {
    windows[i] = std::make_shared<Window>();
}
</syntaxhighlight>

In the C++ example, the editor has recognized the [[keyword (computer programming)|keyword]]s <code>const</code>, <code>auto</code>, <code>int</code>, and <code>for</code>.  The  [[comment (computer programming)|comment]] at the beginning is also highlighted in a specific manner to distinguish it from working code.

==History and limitations==
The ideas of syntax highlighting overlap significantly with those of [[Structure editor|syntax-directed editors]]. One of the first such editors for code was Wilfred Hansen's 1969 code editor, Emily.<ref name=hansen>{{cite conference   | first = Wilfred J.   | last = Hansen  | title = User engineering principles for interactive systems  | book-title = Proceedings of the Fall Joint Computer Conference FJCC 39   | pages = 5623–532  | publisher = AFIPS  | year = 1971}}</ref><ref>{{cite web|last=Hansen|first=Wilfred|title=Emily - An Editor for Structured Text|url=https://www.cs.cmu.edu/~wjh/Emily.html|access-date=17 June 2013}}</ref> It provided advanced language-independent [[autocomplete|code completion]] facilities, and unlike modern editors with syntax highlighting, actually made it impossible to create syntactically incorrect programs.

In 1982, Anita H. Klock and Jan B. Chodak filed a patent for the first known syntax highlighting system,<ref>{{Citation|title=Syntax error correction method and apparatus|date=1982-10-29|url=https://patents.google.com/patent/US4617643A/en|access-date=2018-04-12}}</ref> which was used in the Intellivision's [[Entertainment Computer System]] (ECS) peripheral, released in 1983.<ref>{{Cite book|url=https://archive.org/details/Intellivision_Computer_Module_Owners_Guide_1983_Mattel_US|title=Mattel Intellivision: Intellivision Computer Module Owner's Guide (1983)(Mattel)(US)|date=1983}}</ref> It would highlight different elements of BASIC programs and was implemented in an attempt to make it easier for beginners, especially children, to start writing code.<ref>{{Cite web|url=http://www.intellivisionlives.com/bluesky/hardware/ecs_tech.html|title=Intellivision Classic Video Game System / Entertainment Computer System|website=www.intellivisionlives.com|access-date=2018-04-12|archive-date=2018-07-17|archive-url=https://web.archive.org/web/20180717123313/http://www.intellivisionlives.com/bluesky/hardware/ecs_tech.html|url-status=usurped}}</ref> Later, the Live Parsing Editor ([[LEXX (text editor)|LEXX]]) written for the [[VM (operating system)|VM]] operating system for the computerization of the ''[[Oxford English Dictionary]]'' in 1985 was one of the first to use colour syntax highlighting. Its ''live parsing'' capability allowed user-supplied parsers to be added to the editor, for text, programs, data file, etc.<ref>{{cite web|url=http://www.research.ibm.com/journal/rd/311/ibmrd3101G.pdf|title=LEXX&nbsp;– A programmable structured editor|author= Cowlishaw, M. F.|author-link=Mike Cowlishaw|work=IBM Journal of Research and Development, Vol 31, No. 1, IBM Reprint order number G322-0151|publisher=IBM|date=1987}}</ref> On [[microcomputers]], ''MacPascal 1.0'' (October 10, 1985) recognized Pascal syntax as it was typed and used font changes (e.g., bold for keywords) to highlight syntax on the monochrome [[compact Macintosh]] and automatically indented code to match its structure.<ref name=macpascal>{{cite mailing list | url = https://lists.apple.com/archives/mpw-dev/2011/Oct/msg00000.html | archive-url = https://web.archive.org/web/20170821213822/https://lists.apple.com/archives/mpw-dev/2011/Oct/msg00000.html | url-status = dead | archive-date = 2017-08-21 | title = A Trio of Historical Recollections | mailing-list = mpw-dev | date = 2011-10-10 | access-date=12 September 2019 | last = Allen |first = Dan |author-link=Bruce Perens }}</ref>

Some text editors and code formatting tools perform syntax highlighting using [[pattern matching]] [[heuristics]] (e.g. [[Regular expressions]]) rather than implementing a [[parser]] for each possible language.<ref>{{cite web|url=http://www.kedit.com/wwkld.html|title=KEDIT Language Definition Files|publisher=Mansfield Software Group, Inc.|work=[[XEDIT#PC and Unix adaptations|Kedit]]| year=2012| access-date=2016-04-07}}</ref> This can result in a text rendering system displaying somewhat inaccurate syntax highlighting and in some cases performing slowly.  A solution used by text editors to overcome this problem is not always parsing the whole file but rather just the visible area, sometimes scanning backwards in the text up to a limited number of lines for "syncing".

On the other hand, the editor often displays code during its creation, while it is incomplete or incorrect, and the strict parsers (like ones used in compilers) would fail to parse the code most of the time.

Some modern, language-specific [[Integrated development environment|IDE]]s (in contrast to text editors) perform full language parsing which results in very accurate understanding of code. An extension of syntax highlighting was called ''"semantic highlighting"'' in 2009 by David Nolden<ref>{{cite web |url=http://zwabel.wordpress.com/2009/01/08/c-ide-evolution-from-syntax-highlighting-to-semantic-highlighting/ |title=2009 blog post on Semantic Highlighting introduced in KDevelop by David Nolden|date=8 January 2009 }}</ref> for the open-source C++ IDE [[KDevelop]]. For example, semantic highlighting may give local variables unique distinct colours to improve the comprehensibility of code. In 2014 the idea of coloured local variables was further popularized due to a blog post by Evan Brooks,<ref>{{cite web |url=https://medium.com/@evnbr/coding-in-color-3a6db2743a1e |title=2014 blog post on Semantic Highlighting by Evan Brooks|work=Medium |date=17 April 2017 |last1=Brooks |first1=Evan }}</ref> and after that, the idea was transferred to other popular IDEs like [[Visual Studio]],<ref>{{cite web |url=http://visualstudiomagazine.com/articles/2014/08/01/semantic-code-highlighting.aspx |title=Visual Studio Magazine article on semantic highlighting}}</ref> [[Xcode]],<ref>{{cite web |url=https://github.com/kolinkrewinkel/Polychromatic |title=Github page of a plugin which implements semantic highlighting for Xcode|website=[[GitHub]] |date=14 September 2022 }}</ref> and others.

Colour in a user interface is less useful if the user has some degree of [[color blindness|colour blindness]].

==See also==
* [[Comparison of text editors#Programming features|Programming features]] in a [[Comparison of text editors]] 
* [[Indent style]]
* [[Secondary notation]]
* [[Structure editor]]
* [[Parsing]]
* [[Solarized (color scheme)|Solarized (colour scheme)]]

==References==
{{reflist}}

{{DEFAULTSORT:Syntax Highlighting}}
[[Category:Programming language syntax|Highlighting]]
[[Category:User interface techniques]]
[[Category:Text editor features]]
[[Category:Articles with example C code]]