Code Syntax Highlighting

This has nothing to do with Arduino per sé except that it provides an attractive means of presenting Arduino code elements on a website such as this one.

At some point several years ago, I noticed the elegant presentation of Arduino code on the cactus.io website (unfortunately, this site no longer appears to be openly accessible). I originally incorporated the idea into the present website by laboriously styling individual elements of code segments, but this ultimately became somewhat impractical.

By this time though, I had noticed that the broader application of syntax highlighting was not uncommon and that indeed several options for automating this process on an ad hoc basis were available. I tried a few of these, from the very sophisticated to the trivial, but ultimately this relatively simple implementation by Indrek Luuk turned out to be the easiest for me to work with.

This on-line implementation was cut down to the essential elements then modified for in-line use. Additional code was added to handle numeric values and a couple of other situations that weren't covered by the original implementation, including the optional display of line numbers. As with the original implementation, the relevant styling is then handled via CSS.

The presentation of the code panels on this page then prompted a further extension to handle basic HTML syntax highlighting, with the emphasis here on the word basic—the HTML side of things has only been developed to the extent required to render the code segments I have needed to present.

The archive file that can be downloaded via the following link includes the necessary JavaScript and CSS files, SyntaxHighlighter.js and Highlight.css.

SyntaxHighlighter.zip

[7 KB]

These files need to be placed in appropriate directories and referenced in the Head section of the relevant HTML file:

		
			<head>
	<script type="text/javascript" src="scripts/SyntaxHighlighter.js"></script>
	<script>
		// Run any required Syntax Highlighters when the page loads
		document.addEventListener('DOMContentLoaded', processAllArduinoCode);
		document.addEventListener('DOMContentLoaded', processAllHtmlCode);
	</script>
	<link rel="stylesheet" href="styles/Highlight.css"/>
</head>
		

 	

The HTML constructions I have used to present highlighted code depend on whether or not a heading is to be included, with or without a download option, and whether or not line numbers are required.

Code with Heading, Download option and Line Numbers

The following is the HTML structure for Arduino IDE code highlighting:

		
			<div class="highlight-code-table">
  <div class="highlight-code-heading">
    <div class="highlight-code-title">Sketch Name</div>
    <div class="highlight-code-dlf">[<a title="Sketch Name" href="[path-to]/SketchName.ino" download>Download</a>]</div>
  </div>
  <div class="highlight-code-table-container">
    <pre class="highlight line-numbers"><code class="language-Arduino" data-line-numbers>
            
	/* insert code to be highlighted here */
	
    </code></pre>
  </div>
</div>
		

 	

so that the HTML code:

		
			<div class="highlight-code-table">
  <div class="highlight-code-heading">
    <div class="highlight-code-title">Sketch Name</div>
    <div class="highlight-code-dlf">[<a title="Sketch Name" href="[path-to]/SketchName.ino" download>Download</a>]</div>
  </div>
  <div class="highlight-code-table-container">
		<table class="highlight-code-sketch"><tr><td>
			<pre class="highlight line-numbers"><code class="language-Arduino" data-line-numbers>// This is an Arduino sketch example.

#include &lt;library.h>

#define someValue true
#define someOtherValue 9600

int counter = 0;
String stringVariable;

void setup() {

  pinMode(Vext, OUTPUT);
  digitalWrite(Vext, LOW);

  Serial.begin(115200);

  Serial.println("[setup] Setup complete...");
}

void loop() {
  if ( someValue ) {
    writeHelloWorld();
  }
  delay(1000);
}

void writeHelloWorld() {
  Serial.print("[loop] Sending '[");
  Serial.print(++counter);
  Serial.println("] Hello World!'...");
}</code></pre>
		</td></tr></table>
  </div>
</div>
		

 	

would be rendered as:

Sketch Name

[Download]

		
			// This is an Arduino sketch example.

#include <library.h>

#define someValue true
#define someOtherValue 9600

int counter = 0;
String stringVariable;

void setup() {

  pinMode(Vext, OUTPUT);
  digitalWrite(Vext, LOW);

  Serial.begin(115200);

  Serial.println("[setup] Setup complete...");
}

void loop() {
  if ( someValue ) {
    writeHelloWorld();
  }
  delay(1000);
}

void writeHelloWorld() {
  Serial.print("[loop] Sending '[");
  Serial.print(++counter);
  Serial.println("] Hello World!'...");
}
		

	

Note that code can be inserted as written, without modification, with one exception—as is the case in the above example, any occurrence of an opening angle bracket <, as in

#include <library.h>

must be replaced by <

#include &lt;library.h>

to avoid being incorrectly interpreted as the beginning of an HTML tag.

For HTML code highlighting, simply specify the language-HTML class in the code tag:

    <pre class="highlight"><code class="language-HTML">

Code without Heading, Download option or Line Numbers

If no download option is required, just leave out the highlight-code-dlf div, or if no heading at all is required leave out the whole highlight-code-heading div, as illustrated in the following panel:

		
			<div class="highlight-code-table">
  <div class="highlight-code-table-container">
    <table class="highlight-code-sketch"><tr><td>
      <pre class="highlight"><code class="language-Arduino">
            
					/* insert code to be highlighted here */
	
			</code></pre>
    </td></tr></table>
  </div>
</div>
		

 	

Again, for HTML code highlighting, specify the language-HTML class in the code tag as illustrated in the previous example. In this case, the code will be rendered like that in any of the HTML panels—none of which have headings, download options or line numbers—on this page.

To simply present plain text in a panel similar to those illustrated on this page for the presentation of code, output from the Arduino IDE Serial Monitor, for example, which has no highlighting, use the raw class in the code tag.

		
29:21.812 -> Scanning Wire...
29:21.812 -> I2C device found at address 0x50  !
29:21.812 -> I2C device found at address 0x51  !
29:21.812 -> I2C device found at address 0x52  !
29:21.812 -> I2C device found at address 0x53  !
29:21.847 -> done
		

 	

As illustrated, this doesn't highlight anything at the moment, as would be the case if no class were specified at all, but it provides a tag that may be used in the future.

Browser Support

This script includes features that are only supported in more recent versions of popular browsers. I believe that the problem lies with the use of the look ahead and look behind features that have only recently become part of JavaScript regular expressions.

The script executes as intended under Safari 16 (macOS Ventura) and later versions, and also under Google Chrome 116.0.5845.187 and later versions.

The script's syntax highlighting features do not appear to be supported under Safari 15 (Sep, '21), which was the version initially released with macOS Monterey, nor presumably any version of Safari earlier than this.

03-09-2026