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 += """;
break;
case 38:
strOut += "&";
break;
case 60:
strOut += "<";
break;
case 62:
strOut += ">";
break;
case 124: // vertical pipe (blogger modifies this)
strOut += "|";
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