map((lambda idea:blog),me)

Syntaxhighlighter is a powerful Wordpress plugin, based on the the google-hosted highlighter project, and it’s what I’ve chose for posted code snippets. However, there still an issue not yet solved: the generated markup is not XHTML valid. Surely, this could be insignificant for some users, but a plugin for a bloging system whose motto is “Code is Poetry”, shall, in my opinion, never break this rule. This issue seems not to be under consideration by the plugin developers, and that’s why I’ve quickly made this Hack on the plugin code to make it XHTML compliant. The W3C validator is complaining as follows: there is no attribute “name”. So one most possible solution is to used the (highly recommended) “id” attribute, and as the “id” attribute value shall be unique along the DOM, a special pattern of the value could be defined by the server-side, allowing the client side javascript code to find the target element to highlight. In a nutshell :

In syntaxhighlighter.php, change line 297 :

$content = str_replace( $match[0], '<pre name="code" class="'

to

$content = str_replace( $match[0], '<pre id="code__'.rand() . '" class="'

In shCore.js, add the following prototype at the beginning of the script:

String.prototype.startsWith = function(str)
{return (this.match("^"+str)==str)}

and change line 146

if(tags[i].getAttribute('name')==name)

to

if( ((x = tags[i].getAttribute('id'))!=null) && (x.startsWith(name + '__')))

Basically, instead of looking for elements with name = “code”, it will look for elements whith id attribute starting with “code__”. That’s it. It’s working and XHTML compliant above all!

PS : The probability that few consecutive calls to PHP rand() function give 2 equal values is really infinitesimal and this guarantee to never get two id with the same value.

When browsing several Internet sites, we certainly have come across some commonly-formatted web pages. Lots of them are automatically generated by the Web server. Apache web server has a dedicated module to generate directory indexes. theses indexes are often “ugly” simple pages.

Here’s some steps to get around this starchy formattin, and don’t worry, I’m not gonne advice you to edit the module’s source code and recompile it. The hack is based on CSS and DOM manipulation using JavaScript, and some tips when configuring the server. First, we have to enhance the default settings of the directive IndexOptions of the httpd-autoindex.conf file as follows :

Then, within the same file, we set the directive ReadmeName to /README.html (which is the default setting). This way, the README.html file wich is appended by Apache after each directory indexing will be used to host the CSS/JavaScript code used to impropuve the index formatting. This is the CSS dirctives I’ve included in my README.html file :

H1 {font-size:18px;font-family:Arial;font-weight:normal;color:#EEEEEE;text-align:center;background-color:#777777;margin-bottom:30px;}
BODY {margin-top:0px;margin-left:0px;margin-right:0px;background-color:#d8d8d8}
A {color:#3300cc; font-family:Arial; font-size:13px;text-decoration:none;}
A:hover {color:#330000; font-family:Arial; font-size:13px;text-decoration:underline;}
TD {font-family:Arial; font-size:12px;}
SPAN.GT {
color:orange;
font-weight:bold;
position:relative;
top:1px;
}

then, just after the <style> bloc, I’ve added the following JavaScript code :

<script langage="javascript">
if(document.getElementsByTagName)
{
t=document.getElementsByTagName("table").item(0)
t.setAttribute("align","center")
t.setAttribute("cellpadding","2")
t.setAttribute("border","0")
t.setAttribute("style","border-width:0px;border-style:solid;border-color:black;")
}
d=document.createElement("div");
d.setAttribute("style","width:500px;border-style:solid;border-width:1px;border-color:black;margin-top:20px;padding:20px");
d.appendChild(t)
h=document.getElementsByTagName("h1").item(0);
d.insertBefore(h,t)
c=document.createElement("center");
c.appendChild(d);
s=document.getElementsByTagName("script").item(0);
s.parentNode.insertBefore(c,s);
document.getElementsByTagName("h1").item(0).innerHTML=document.getElementsByTagName("h1").item(0).innerHTML.replace("Index of /" , "").replace(/\//g , " <span class=\"GT\">&amp;amp;gt;</span> ");
document.getElementsByTagName("tr").item(0).setAttribute("style","display:none;");
document.getElementsByTagName("tr").item(1).setAttribute("style","display:none;");
document.getElementsByTagName("tr").item(document.getElementsByTagName("tr").length-1).setAttribute("style","display:none;");
_tds=document.getElementsByTagName("td");
for(i=0,__loop=_tds.length;i<__loop;i++){
if( _tds.item(i).innerHTML == "  - "  )
document.getElementsByTagName("td").item(i).innerHTML="&amp;amp;nbsp;";
}
</script>

The above script basically creates an empty centered div tag inside of wich it places the generated html table, the index title and removes unwanted others hedares or tables headers (some <tr> elements). The final result looks much more pretty: