SyntaxHighlighter mod for xhtml, css and blogger support.

Update :

New version of the mod is available under the name 'gembox'. It supports xhtml, doesn't require manually including brush files, and can be run within the header. You can get it from :

http://onursafak.com/projects/gembox/

More description about the usage will be available soon.

The post below is kept for historical purpose

---

Anybody remember the revolution of the 16 color computer displays?

SyntaxHighlighter by Alex Gorbatchev is a well written client side syntax highlighter which uses javascript to colorize output from different languages on web pages, using customizable brush files for language definitions. I've found it's a good alternative for my needs and switched to it. Now it's used by Byte Hell for colorized outputs.

Before this I made a little modification on the code for some features which are asked by current users of this nice tool.

For people already know about SyntaxHighlighter :

With the modification HighlightAll function gets the same parameters. It now checks for the 'class' attributes of the tags to highlight. This way it supports xhtml and blogger.com, keeps the name attributes available, and allows space seperated multiple styles in the class attribute, giving us the chance to attach custom styles to containers.

With the new syntax, the tags should be formed as below :

<pre class="hl:sql">......</pre>

Like before, options can be added to the class tag like: 'hl:sql:collapse', where 'hl' is the name which is passed to the 'HighlightAll' command, and 'sql' is the language alias.

The xhtml mod can be found at :

http://www.onursafak.com/tools/shx/shCore.js

You can download the package from it's homepage and just replace this file.

Have a colorful day.

read more >

Hide email links from spam bots - works with blogger.

Most of us are aware of spam bots, which scan the web and other media for email addresses to send unsolicited emails. So we avoid putting direct email addresses on the web.

Thinking about hiding, a few options come to mind. We can ;

• Type it like 'darkwingduck -at- superhero.com', giving the reader an idea about the real address 'darkwingduck@superhero.com'
• Use an image for the '@' character in html.
• Use a contact form instead of giving an email address.
• Use a script to build the address on the fly, which won't appear in the source files.

I've choosen the last option for my blog pages. I usually use a single command javascript to build the address, like ;

<script language='javascript'>
  document.write('foo' + '@' + 'bar.org');
</script>

This prints the address to the page on the fly. However this doesn't work in blogger somehow. So I've written a little script which will build the address after the page is completely loaded. This will work on nearly any web page including the blogger.

It can be placed anywhere on the page, so we don't have to mess with the template html, and simply put it on the layout using an html widget.

Before saving it, we need to change the 'user' and the 'domain.com' fields in the script to match our address. Then we can write our email address anywhere on the page, including html tags like 'mailto:' links, using the syntax :

!myemail!

This will get replaced by the script to match our email address. Here is an example :

Please write me at

<a href="mailto:!myemail!">!myemail!</a>

The script supports multiple email addresses and has an option for better performance. To make it perform better, you may wrap the area including emails with a span tag. Like :

<span id='myemailwrapper'>
    Please write me at
    <a href="mailto:!myemail!">!myemail!</a>
</span>

Note that if you only want to use your address in a link and not show it on the page, then you can just use :

<a href="#" onClick="SendMail('john','mywebsite.com');">
 Write me!
</a>

Here is the script :

function SendMail(User,Domain) {
 parent.location="mailto:" + User + "@" + Domain;
}

function RevealEmails() {
 DoReplace('user','domain.com','myemail');
}

function DoReplace(MailBox, MailDom, FieldName) {
 const TrySpan = true;
 var RootItem;
 if (TrySpan) RootItem = document.getElementById(FieldName + "wrapper");
 if (!RootItem) RootItem = document.body;
 RootItem.innerHTML = RootItem.innerHTML.replace(eval("/!" + FieldName + "!/gi"),MailBox + "@" + MailDom);
}

if (window.addEventListener) window.addEventListener("load", RevealEmails, false);
else if (window.attachEvent) window.attachEvent("onload", RevealEmails);
else {
 if (window.onload != null) {
  var oldOnload = window.onload;
  window.onload = function ( e ) {
   oldOnload( e );
   RevealEmails();
  }
 }
 else window.onload = RevealEmails;
}

read more >

Ouch

I would NEVER do that. I like my face.

read more >

How to hide the Site Meter button?

Most web authors use hit counters / site statistics services to watch their site traffic. Most of the free services add a button or a banner to the pages they have been attached on. You may be using such a service and need to remove the image because of design considerations.

For Site Meter (www.sitemeter.com) you can wrap the given html code as follows :

<div style=“visibility:hidden;”>
-your sitemeter code-
</div>

And just bookmark the entrance page to easily jump there.

Anyway I recommend you give them some credits in your design to better support them, or perhaps keep it as is if it's not really needed.

read more >