Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,150,671 members, 7,809,540 topics. Date: Friday, 26 April 2024 at 11:03 AM

Programming Your Own Code Syntax Highlighter - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Programming Your Own Code Syntax Highlighter (2287 Views)

I Have A Very Import Question On Python Syntax / Syntax Error: Unexpected End Of File: Php / Javascript Function Declaration Syntax: Var... (2) (3) (4)

(1) (Reply) (Go Down)

Programming Your Own Code Syntax Highlighter by Nobody: 9:10am On Mar 01, 2016

<!doctype html>
<html>
<head>
<title>Code Syntax Highlighter || DanielTheGeek</title>
</head>
<body>
<style type="text/css">
code {
display: block;
border: 1px #000 solid;
padding: 10px;
line-height: 1.5em;
font-family: "Lucida Console", Monaco, monospace;
}
.code-elem{color: #f39c12}
.code-str{color: #f39c12}
.code-comment{
color: #95a5a6;
font-style: italic;
}
.code-id {color: #2980b9;}
.code-equals { color: #e74c3c}
</style>
<script type="text/javascript">
function syntaxHighlighter() {
var co = document.getElementsByTagName("code" ) ;
for(var i=0; i < co.length;i++) {
var data = co[i].innerHTML;
data = data.replace(/"(.*?)"/g, '<span class="code-str">&quot;$1&quot;</span>');
data = data.replace(/&lt;(.*?)&gt;/g, '<span class="code-elem">&lt;$1&gt;</span>');
data = data.replace(/\/\* (.*?) \*\//g, '<span class="code-comment">/* $1 */</span>');
data = data.replace(/id/g, '<span class="code-id">id</span>');
data = data.replace(/var(?!iable)/g, '<span class="code-equals">var</span>');
data = data.replace(/script/g, '<span class="code-equals">script</span>');
co[i].innerHTML = data;
}
}
window.addEventListener("load", syntaxHighlighter) ;
</script>
<h2>Working Code Example</h2>
<code>&lt;script&gt;
/* This is a comment, This tool is cool */
var creator = "DanielTheGeek";
&lt;/script&gt;
&lt;h2 id="h21"&gt;Nairaland tutorial&lt;/h2&gt;
&lt;p&gt;This small crap, can be improved to highlight billions of languages&lt;/p&gt;</code>
</body>
</html>

Yeah, that's pretty much how it's done...forgive me for going into the code first i love diving a lot.

That highlights basic html tags plus javascript comments. Regular Expressions are used to achieve things like this, RegExp can also be used to filter banned words from a site, e.g: if "Daniel" was a banned word on Nairaland it wouldn't show up, or can be programmed to show another word, maybe "DanielTheGeek"

That would be achieved this way:



data = data.replace(/Daniel/g, '<span class="whateverstyle">DanielTheGeek</span>');
//That would replace Daniel with DanielTheGeek throughout the specified domain.


There are many more interesting things that can be done with RegExp, like auto correcting words and auto-capitalization of words.

We have what we call flags in RegExp programming logic
the [size=22pt]g[/size] which stands for global will target the specified letters anywhere it is used.



data = data.replace(/Daniel/[size=22pt]g[/size], '<span class="whateverstyle">DanielTheGeek</span>');
//Using the global flag


the [size=22pt]i[/size] flag will ignore the casing of letters


data = data.replace(/DaNieL/[size=22pt]i[/size], '<span class="whateverstyle">DanielTheGeek</span>');
//That would still replace Daniel with DanielTheGeek throughout the specified domain but ignore the casing, so.
//This can also be used with other flags like [size=22pt]g[/size] eg:

data = data.replace(/Daniel/i/g, '<span class="whateverstyle">DanielTheGeek</span>');
//using the [size=22pt]g[/size] flag and [size=22pt]i[/size] flag.



We have another flag the [size=22pt]m[/size] flag, do your research and tell me what it does.


Even though it is cool and creative making your own code syntax highlighter from scratch, supporting a vast array of programming languages and config files will be too much work, except that's your specialisation. So i recommend using ready made libraries for these tedious tasks, they were made to reduce the work time and load, most users won't even know you're using a framework/plugin...they'd just be like, waooh! cool!.

Go ahead and grab cool libraries like highlight.js, which supports almost all the languages you know of, if not all.
https://highlightjs.org/download/
Goodluck.

[size=22pt]Modified[/size]
[size=22pt]Maybe we should recommend highlight.js for Seun, do you all agree?[/size]

1 Like

Re: Programming Your Own Code Syntax Highlighter by danidee10(m): 9:28am On Mar 01, 2016
I swear nairaland needs a better swear-word filter users easily beat the system by just adding more letters to the word

2 Likes

Re: Programming Your Own Code Syntax Highlighter by asalimpo(m): 10:31am On Mar 01, 2016
Cool. So syntax highlighting is frontend stuff?

Seun, needs to declass the word na.ked as foul. 'unclad' is simply too clumsy to use.

1 Like

Re: Programming Your Own Code Syntax Highlighter by Nobody: 10:37am On Mar 01, 2016
asalimpo:
Cool. So syntax highlighting is frontend stuff?

Seun, needs to declass the word na.ked as foul. 'unclad' is simply too clumsy to use.

It can be used anyhow, frontend alone for static websites but dynamic sites like Naira land only had to implement few more things.

The click event can be used with buttons in comment boxes.

But basically you don't need any interaction with the server before highlighting syntax.

(1) (Reply)

What's The Difference Between A Webserver And An Application Server? / Java REPL / A Ponzi Website Needed Urgently

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 19
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.