Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create and use a Syntax Highlighter with JavaScript?
A syntax highlighter in JavaScript allows you to apply styling to specific code elements like keywords, strings, or HTML tags. This tutorial shows how to create a basic highlighter using regular expressions and DOM manipulation.
Example: HTML Link Highlighter
This example highlights HTML anchor tags by applying custom CSS styles:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.colorLinks {
color: rgb(131, 44, 212);
text-decoration: none;
font-size: 20px;
font-weight: bold;
}
.setColor {
margin: 20px;
padding: 10px;
border: none;
font-size: 18px;
background-color: rgb(226, 43, 89);
color: white;
}
</style>
</head>
<body>
<h1>Syntax Highlighting Example</h1>
<div class="CodeDiv">
<a href="https://www.google.com">Go to google.com</a>
<a href="https://www.facebook.com">Go to facebook.com</a>
</div>
<button class="setColor" onclick="highlightLinks()">Highlight Links</button>
<h2>Click the button to apply syntax highlighting</h2>
<script>
var anchorRg = /[^<]*(<a href="([^"]+)">([^<]+)<\/a>)/g;
function highlightLinks() {
var text = document.querySelector(".CodeDiv").innerHTML;
text = text.replace(anchorRg, function() {
function check(arguments) {
let tempArr = [];
tempArr.push(Array.prototype.slice.call(arguments, 2, 4));
return `<a class="colorLinks" href=${tempArr[0][0]}>${tempArr[0][1]}</a><br>`;
}
return check(arguments);
});
document.querySelector(".CodeDiv").innerHTML = text;
}
</script>
</body>
</html>
How It Works
The highlighter uses these key components:
-
Regular Expression:
/[^<]*(<a href="([^"]+)">([^<]+)<\/a>)/gmatches HTML anchor tags - String Replace: Replaces matched patterns with styled versions
-
CSS Classes: Applies highlighting through the
.colorLinksclass - DOM Manipulation: Updates innerHTML to display highlighted content
Key Points
| Component | Purpose | Usage |
|---|---|---|
| Regular Expression | Pattern matching | Identifies code elements to highlight |
| String.replace() | Text transformation | Replaces matches with styled HTML |
| CSS Classes | Visual styling | Defines highlight appearance |
Output
Before highlighting, the links appear as regular HTML anchor tags. After clicking the "Highlight Links" button, the links are styled with purple color, bold weight, and larger font size.
Advanced Syntax Highlighting
For production use, consider these enhancements:
function highlightCode(code, language) {
const patterns = {
javascript: {
keywords: /\b(function|var|let|const|if|else|for|while)\b/g,
strings: /"[^"]*"|'[^']*'/g,
comments: /\/\/.*$/gm
}
};
let highlighted = code;
if (patterns[language]) {
highlighted = highlighted.replace(patterns[language].keywords,
'<span class="keyword">$&</span>');
highlighted = highlighted.replace(patterns[language].strings,
'<span class="string">$&</span>');
}
return highlighted;
}
Conclusion
JavaScript syntax highlighters use regular expressions to identify code patterns and apply CSS styling. While this example shows basic HTML tag highlighting, the same principles apply to highlighting keywords, strings, and comments in any programming language.
353 Views
