Blogger Tweak: Making Code Snippets More Usable

Now that I’m blogging more code snippet heavy content it’s becoming apparent that the excellent Code Snippet Plugin with Windows Live Writer isn’t the most usable for people trying to copy the snippet for their own use.  So I’ve created a Blogger Template tweak to automatically add a ‘plain text/formatted’ toggle. 

To install simply copy the snippet below into your Blogger Template just above the </body> tag.

   1: <script type='text/javascript'>

   2:         var ChildText = function(nodeList) {

   3:             var text = '';

   4:             for (var j = nodeList.length - 1; j >= 0; --j) {

   5:                 if (nodeList[j].childNodes.length > 0) {

   6:                     text = ChildText(nodeList[j].childNodes) + text;

   7:                 } else if (nodeList[j].nodeType == 3) {

   8:                     var local= '';

   9:                     if (nodeList[j].textContent) {

  10:                         local = nodeList[j].textContent;

  11:                     } else {

  12:                         local = nodeList[j].nodeValue;

  13:                     }

  14:                       var div = document.createElement("div");

  15:                        var dt = document.createTextNode(local);

  16:                        div.appendChild(dt);

  17:                        text = div.innerHTML + text;

  18:                 }

  19:             }

  20:             return text;

  21:         }

  22:     

  23:         var divs = document.getElementsByTagName("div");

  24:         for (var i = 0; i < divs.length; i++) {

  25:             if (divs[i].id === "codeSnippetWrapper") {

  26:  

  27:                 divs[i].style["position"] = "relative";

  28:  

  29:                 var dtxt = document.createElement("div");

  30:                 dtxt.setAttribute("id", "plaintext");

  31:                 dtxt.setAttribute("style", "display:none;");

  32:                 var txt = document.createElement("pre");

  33:                 dtxt.appendChild(txt);

  34:                 divs[i].appendChild(dtxt);

  35:                 var text = '';

  36:                 var lines = divs[i].getElementsByTagName("pre");

  37:                 for (var j = lines.length - 1; j >= 0; --j) {

  38:                     var cns = lines[j].childNodes;

  39:                     var chd = [];

  40:                     for (var k = 1; k < cns.length; k++)

  41:                         chd[k - 1] = cns[k];

  42:  

  43:                     text = ChildText(chd) + text;

  44:                     if (j > 0) text = "<br />" + text;

  45:                 }

  46:  

  47:                 txt.innerHTML = text;

  48:  

  49:  

  50:                 var link = document.createElement("span");

  51:                 link.setAttribute("id", "ptlink");

  52:                 link.innerHTML = "Plain Text";

  53:                 link.setAttribute("style", "width:10em;height:1.5em;position:absolute;padding:2px;top:-2px;right:10px;border:1px;border-color:#000;background-color:#fff;font-size:0.9em;display:block;color:#000;");

  54:                 divs[i].appendChild(link);

  55:  

  56:                 link.onclick = function(e) {

  57:                     //If "e" is undefined use the global "event" variable

  58:                     e = e || event;

  59:  

  60:                     var target = (e.srcElement || e.currentTarget).parentNode;

  61:                     var ptxt;

  62:                     var phtml;

  63:                     var plink;

  64:                     var pres = target.childNodes;

  65:                     for (var i = 0; i < pres.length; i++) {

  66:                         if (pres[i].id === "plaintext") {

  67:                             ptxt = pres[i];

  68:                         } else if (pres[i].id === "codeSnippet") {

  69:                             phtml = pres[i];

  70:                         } else if (pres[i].id === "ptlink") {

  71:                             plink = pres[i];

  72:                         }

  73:                     }

  74:  

  75:                     if (ptxt.style["display"] === "none") {

  76:                         ptxt.style["display"] = "block";

  77:                         phtml.style["display"] = "none";

  78:                         plink.innerHTML = "Formatted";

  79:                     }

  80:                     else {

  81:                         ptxt.style["display"] = "none";

  82:                         phtml.style["display"] = "block";

  83:                         plink.innerHTML = "Plain Text";

  84:                         

  85:                     };

  86:  

  87:  

  88:                 };

  89:             }

  90:         }

  91: </script>

  92:  

Enjoy!