Thursday November 21, 2024

Home | Contact | Support | Programming.. More than just code .... | RegEx (Regular Expressions)... Powerful, expressive and flexible.. ..

RegEx (Regular Expressions)...

Powerful, expressive and flexible.. ..

Syntax Highlighting: Color Lets You See Things Differently

Imagine watching TV on a black and white TV? You can do it, but I bet you prefer color! The same goes for coding - color synta... — Imagine watching TV on a black and white TV? You can do it, but I bet you prefer color! The same goes for coding - color syntax highlighting is a game changer when it comes to coding.

While there are lots of plugins and packages in lots of different languages, it's really easy to roll your own if you need to (thanks to regex).

You can write a powerful code syntax highlighter in less than 10 lines of code! Yes, really!

The limitations of the simple highlighter are its inability to handle errors - so if there is a missing comma or colon it will cause things to run over (no help or information).

Example

The following gives you a complete working example in Javascript; outputs the highlighted code as both raw and as a preview using some default css style values.

If you test out the following code example, this is what the output should look like. See links at the end for a working test v... — If you test out the following code example, this is what the output should look like. See links at the end for a working test version.

<style>
body { min-height: 400px; }
.codeblock { white-space: pre; font-family:Courier; }
.text     { color: green;  }
.bracket  { color: gray;   }
.variable { color: blue;   }
.operator { color: red;    }
.command  { color: orange; }
</style>

<script>

function simplehighlighter( str ) { 
 
      str=str.replace(/(\bnull\b|\b[0-9]+\b|\btrue\b|\bfalse\b|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g,"<span class=\"text\">$1</span>");
      str=str.replace(/(\(|\)|\[|\]|\{|\})/g,"<span class='bracket'>$&</span>");
      str=str.replace(/\$[a-z]\w*/gi,"<span class='variable'>$&</span>");
      str=str.replace(/( \! | \!\= | \!== | = | == | === | > | >= | < | <= | and | or )/g,"<span class='operator'>$&</span>");
      str=str.replace(/\b(for|function|return|unset|count|global|if|else|else if|intval|int|array)\b/g,"<span class='command'>$1</span>");
      
      return str;
}

// Test the simple highlighter
let a = `
// Simple test code
int i=0; 
for (let b =0; b<10; b++)
{
  if ( b == 0 )
  {
     return;
  }
}
`;

let r = simplehighlighter( a );

// view the raw highlighted code
console.log( r );

// preview output
let div = document.createElement('div');
document.body.appendChild( div );
div.className = 'codeblock';
div.style.width = '100%';
div.innerHTML = r;
</script>

Things to Try

• Add syntax highlighting for comments (both single line and block)
• Try the simple highlighter with different programming languages
• Add additional highlighting expressions
• Try other styling values (e.g., bold, italic, underline, ...)
• Add extra highlighting for

warning

words/syntax/common errors
• Try porting the example code (which is in Javascript) to Python

Resources/Links

• Proof of Concept/Test Code [LINK]
• Other tutorials/demos [LINK]

Advert (Support Website)

Visitor:

Copyright (c) 2002-2024 xbdev.net - All rights reserved.
Designated articles, tutorials and software are the property of their respective owners.