Google

CodeHighlighter 0.4

Monday, September 11, 2006

Mr. Dan Webb, a London-based web developer specialising in web application development, has made a great Code Highlighter javascript, which is a LIGHTWEIGHT (boy, how i loved those word ^^), unobstrusive and fully configurable script for displaying code examples highlighted. Like when you do scripting with text editor such as Ultra Edit, Dreamweaver, FlashDevelop and many others that support highlighting parts or your code. Anyway the size is just around 4K ;)

So, maybe i'll give a summary of how to installed those marvelous script on your website ;)

Okay, here we go :

1. Download Dan's CodeHighlighter 0.4 first ;)
2. Read the tutorials ;) (what the... ?!) :P kiddin' well i'll try to explain it my best :)

Well, after you downloaded the javascripts, you hafta add those into your website by using the <script> ... </script> tag, and of course you hafta host/upload those files !

So it goes on like these (make sure the src field is pointing at your host, well you know laa) :

<script type="text/javascript" src="code_highlighter.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="css.js"></script>
<script type="text/javascript" src="html.js"></script>
<script type="text/javascript" src="ruby.js"></script>

The most important file is the code_highlighter.js the others will serve as a style sets (as Mr. Dan refer to) it has some explanation when you download the files ;)

---------------------------------------------------------------------------

Anyway, for example we wanted to highlights the javascript codes, then the rules for what words that should be higlighted will be on the javascript.js file.

If you open up the javascript.js file you will see some piece of unreadable code (for some human :P), anyway for any of you who are familiar with RegExp you would find it beautiful ;) (i don't though :P)

Anyway if you wanted to add some words which you wanted to highlight, then simply add the word in these line:

keywords : {
exp : /\b(arguments|break|case|continue|default|delete|do|else|false|for|function|if|in|instanceof|new|null|return|switch|this|true|typeof|var|void|while|with)\b/
},

global : {
exp : /\b(toString|valueOf|window|element|prototype|constructor|document|escape|unescape|parseInt|parseFloat|setTimeout|clearTimeout|setInterval|clearInterval|NaN|isNaN|Infinity)\b/
}

just add it before the )\b/ on the end of the exp : line, of well, hope you understand it lah :P

---------------------------------------------------------------------------

And now for the main show, in your part of code that you wanted to add the highlights, simply add an appropriate class to each <code> element that contains code, as for the class, they were 'javascript', 'ruby', 'css' or 'html'.

so it goes like these :
<code class="javascript">
//paste your code here
//paste your code here
//paste your code here
//paste your code here
//paste your code here
</code>

and your code will be highlighted beautifully ;)

WAIT !! It doesn't produce the beautiful color ! How do i change the colors ? Nice questions ! Since there's no guide or explanation when you download the javascript :P So here we go again, a 'howto' on changing the colors

Okay first, take a look at the javascript.js file, you will then see some list such as comment, brackets, string, keywords, exp, and global. Now those are the words that you will hafta define the CSS styles !

so you write the CSS styles for those words like these :
code.javascript span.comment { color: YOUR COLOR HERE; }
code.javascript span.brackets { color: YOUR COLOR HERE; }
code.javascript span.string { color: YOUR COLOR HERE; }
code.javascript span.keywords { color: YOUR COLOR HERE; }
code.javascript span.exp { color: YOUR COLOR HERE; }
code.javascript span.global { color: YOUR COLOR HERE; }

as for the other class code, you simply change the word javascript to css or html, and find the words on css.js or html.js file, and then repeat the steps above ;)

that's it ! it should be working nice and beautiful ;) well, hope you understand it :P if you still haven't get it to work you can always drop me an email ;)

have fun ^^

5 comments:

Boss Stewie said...

i am confused

Anonymous said...

Hi there. Thanks for tagging. Neat javascript skills you have over here. Let me guess - you are a professional in javascript and html and etc? Because I see the commenting bar appearing as I click add comment and surely it is very professional and nice =)

Have a nice day!

teddY

Efendi said...

Hello guyz, nice to meet you ;)

@Boss Stewie: eh ?! So, which part that made you confused ?! I'll be glad to help out ;)

@teddY: hehe.. i'm a programmer (yes) a flash programmer to be exact ;) and bout the javascript thing, it's just some side experiments :P but i don't make those javascript, i've just implement it ;)
thanks for the complement anyway ;) the layout is designed by me ;) with a little help from a friend of mine


Be sure to drop by again guyz ;)

lunaticgal said...

halo, i think last time i told u b4 that im gonna learn this up, until today, still 0% improvement on my html knowledge...sigh.

Efendi said...

yooo luneee ^^ long time no see ;)
hehehe... yeah, thought you've learn it a little bit :P guess college life is busy eh ;)
anyway you can ask me if you're in trouble ;) hope i can answer it ;)

About Me

My Photo
Efendi
An ordinary, a bit 'geeky' guy, who enjoy blogging about all unique things across the internet world. Blogs about the blogosphere, scripts, fun, games, interesting stuffs, etc. Currently staying and working in Singapore.
View my complete profile