Friday, April 16, 2010

Howto post code snippets on your Blog

In your Blogger HTML template, insert the style/javascript code between the following two lines:
<div class='post-header-line-1'/>
</div>
Code:
<style type="text/css">
pre.source-code {
  font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;
  color: #ffffff;
  background-color: #000;
  font-size: 12px;
  border: 1px dashed #999999;
  line-height: 14px;
  padding: 5px;
  overflow: auto;
  width: 100%
}
p.warning {
  color: #000000;
  background-color: #FFB6C1;
  font-size: 12px;
  border: 3px double #333333;
  line-height: 14px;
  padding: 5px;
  overflow: auto;
  width: 100%
}
</style>
<script language="JavaScript">
<!--
var Color= new Array();
Color[1] = "ff";
Color[2] = "ee";
Color[3] = "dd";
Color[4] = "cc";
Color[5] = "bb";
Color[6] = "aa";
Color[7] = "99";

function fadeIn(where) {
  if (where >= 1) {
      document.getElementById('fade').style.backgroundColor = "#ffff" + Color[where];
    if (where > 1) {
      where -= 1;
      setTimeout("fadeIn("+where+")", 200);
    } else {
      where -= 1;
      setTimeout("fadeIn("+where+")", 200);
      document.getElementById('fade').style.backgroundColor = "transparent";
    }
  }
}

function format() {
    var strIn = document.getElementById("textin").value;
    var strOut = null;
    if ( document.getElementById("embedstyle").checked ) {
        strOut = "<pre style=\"font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%\"><code>";
        hideElement("style");
    } else {
        strOut = "<pre class=\"source-code\"><code>";
        showElement("style");
    }
    var strOut25 = null;
    var line = 1;
    var strTab;
    var hasVerticalPipe = false;
    var j;
   
    if ( document.getElementById("tab4").checked ) {
    strTab = "    ";
    } else if ( document.getElementById("tab2").checked ) {
    strTab = "  ";
    } else {
        strTab = "        ";
    }

    for ( i = 0; i < strIn.length; i++ ) {
        var code = strIn.charCodeAt(i);
        switch( code ) {
            case 9: // tab
                strOut += strTab;
        break;
            case 10:  // line-feed
            case 13: 
                strOut += "\n";
                line += 1;
                if ( line == 26 ) {
                    strOut25 = strOut + "[only the first 25 lines shown in this example]\n\n";
                }
                j = i + 1;
                if ( code == 13 && j < strIn.length && strIn.charCodeAt(j) == 10 ) {
                    i++;
                }
                break;
            case 34:
                strOut += "&quot;";
                break;
            case 38:
                strOut += "&amp;";
                break;
            case 60:
                strOut += "<";
                break;
            case 62:
                strOut += ">";
                break;
            case 124: // vertical pipe (blogger modifies this)
                strOut += "&#124;";
                hasVerticalPipe = true;
                break;
            default:
                if ( code >= 32 && code <= 127 ) {
                    strOut += strIn.charAt(i);
                } else {
                    strOut += "&#" + code + ";";
                }
                break;
        } // switch
    } // for
    strOut += "\n</code></pre>
";
    var textoutelement = document.getElementById("textout")
    textoutelement.value = strOut;
    textoutelement.focus();
    textoutelement.select();

    if ( hasVerticalPipe ) {
        showElement( "vert-pipe-warning" );
    } else {
        hideElement( "vert-pipe-warning" );
    }

    var resultselement = document.getElementById("results");
    if ( strOut25 != null ) {
        resultselement.innerHTML = strOut25;
    } else {
        resultselement.innerHTML = strOut;
    }

    fadeIn(7);
}

function onloadEvent() {
    var textinelement = document.getElementById("textin");
    textinelement.focus();
    textinelement.select();
}

function showElement(strId) {
    var ref = document.getElementById(strId);
    if ( ref.style) { ref = ref.style; }
    ref.display = '';
}

function hideElement(strId) {
    var ref = document.getElementById(strId);
    if ( ref.style) { ref = ref.style; }
    ref.display = 'none';
}
//-->
</script>
Save your template. Now you should be able to post code wrapped in a neat scrollable frame with the following START TAG:
<code><pre class="source-code"><code>
and the following END TAG:
</code></pre>
You still need to convert the "funny" HTML characters before posting. This can be done here: http://web.forret.com/tools/html.asp