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 ^^
Michal Wallace from javascriptgamer.com have written a great tutorial on how to make a game, using only javascript ;)
