codeboxes

As a developer you may want to display prettyfied code to explain yor work. One way to do this is to use google-code-prettify. I find it sometimes usefull to combine this with itemBox. You can "prettify" a lot of languages. Here I show only css and javascript. It is also fairly easy to modify the style for different languages.

.itembox{min-width:20px;}
.itembox.dragged{
 border-style:solid; border-width:thin;
 border-color:red;padding:0px
}

.itembox .header{
  border-style:solid; border-width:thin;
  font-size:14px;font-weight:bold;
  line-height:100%;
  padding: 2px 0px 2px 2px;  
  margin:0px; min-height:16px;
}
.itembox .drag{background:#7AC5CD;cursor:move;}
.itembox .nodrag{background:#CCCCCC}

.itembox .toggler{cursor:pointer; 
  min-width:20px;min-height:16px;
  float:right;
  display:inline}

.itembox .toggler.off {
  background:url(expand.jpg) no-repeat}
.itembox .toggler.on  {
  background:url(collapse.jpg) no-repeat}

.itembox .content{margin:0px;padding:10px;
 display:block;
 background-color:#eeeeee;
 border-style:solid;border-width:thin;
 border-color:#aaaaaa}

We can modify the stylesheet for code snippets. We may for instance limit the area that the codepresentation should take. Here we have limited the size and allowed scroll. We make a stylesheet called codebox and involve this by writing "style-codebox" in the class list of the itemBox. The stylesheet presents it self like this:

.codebox{min-width:100px;}
.codebox.dragged{
 border-style:solid; border-width:thin;
 border-color:red;padding:0px
}

.codebox .header{
 border-style:solid; border-width:thin;
 font-size:14px;font-weight:bold;line-height:100%;
 padding: 2px 0px 2px 2px;  margin:0px; min-height:16px;				
}


.codebox .drag{background:#7AC5CD;cursor:move;}
.codebox .nodrag{background:rgba(139, 170, 110, 0.61)}

.codebox .toggler{cursor:pointer; 
 min-width:20px;min-height:16px;
 float:right;
 display:inline
}

.codebox .toggler.off {background:url(expand.jpg) no-repeat}
.codebox .toggler.on  {background:url(collapse.jpg) no-repeat}
			   
.codebox .content{display:block;
 background-color:#FBFAE8;
 max-width:600px;max-height:500px;overflow:auto;
 border-style:solid;border-width:thin;border-color:#aaaaaa
}

/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
/* BS:use border thin if unwrapped*/
pre.prettyprint { padding: 2px; border: 0px solid #888 }

/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}

//---------------------------
// transform box to image
function  changeToImage(id){
	var box=itemHolder.getBoxById(id);
	box.setImageStyle();
}
 
//-------- reset stuff ------
// the only box we will remember
var originalBox1=null;
 
function rememberOriginal(id){
	var box=document.getElementById(id);
	return box.cloneNode(true);
}

function resetBox(id,original){
	// set back orional, undeteced element
	var box=document.getElementById(id+"Wrapper");
	var holder=box.parentNode;
	holder.replaceChild(original.cloneNode(true),box);
	
	// take it away from boxlist and rebuild
	// will detect only new (not ready) itemBox elements
	itemHolder.removeAndRebuild(id);
}

// must be done before we run itemHolder.initElements();
// and after the box is parsed
originalBox1=rememberOriginal('box1');
//-------------------------------------

Displaying code snippets