Skip to content
Browse files

Auto-update docs.

  • Loading branch information...
1 parent 6df4324 commit 38cb3015cd39f6021d9b67cd166b0c2e241e2ca8 Alex Young committed Nov 26, 2011
Showing with 2,085 additions and 0 deletions.
  1. +151 −0 examples.html
  2. +1 −0 ico-min.js
  3. +234 −0 index.html
  4. +119 −0 index.md
  5. +21 −0 intro.md
  6. 0 { → layout}/begin.html
  7. 0 { → layout}/end.html
  8. +44 −0 prettify.css
  9. +1,508 −0 prettify.js
  10. +7 −0 raphael.js
View
151 examples.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html>
+ <head>
+ <title>Raphael Ico</title>
+ <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
+ <script src="../ico.js" type="text/javascript" charset="utf-8"></script>
+ <script type="text/javascript">
+function $(id) {
+ return document.getElementById(id);
+}
+
+function $R(min, max) {
+ var a = [], i;
+ for (i = min; i < max; i++) {
+ a.push(i);
+ }
+ return a;
+}
+
+function $map(min, max, method) {
+ var a = [], i;
+ for (i = min; i < max; i++) {
+ a.push(method.apply(this, [i]));
+ }
+ return a;
+}
+
+function $random(min, max) {
+ return $map(min, max, function() { return Math.random(); });
+}
+ </script>
+ <style type="text/css" media="screen">
+html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input { margin: 0; padding: 0; }
+h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, th { font-size: 1em; font-weight: normal; font-style: normal; }
+fieldset, img { border: none; }
+body { font-family: "Lucida Grande", Helvetica, sans-serif; font-size: 12px; background-color: #fff; padding: 0; margin: 10px 5%; color: #000 }
+h1, h2 { font-size: 2em; margin: 0.5em 0; }
+
+p { margin: 1em 0; }
+p.example { color: #555; }
+
+.sparkline { display: inline-block; height: 14px; margin: 0 4px }
+.sparkline div { display: inline-block; }
+
+.linegraph, .linegraph_dark, .linegraph_small { width: 600px; height: 300px; background-color: #fff; margin-bottom: 20px; }
+.linegraph_dark { background-color: #999; }
+.linegraph_small { width: 400px; height: 200px; }
+
+.highlight { color: red; }
+ </style>
+ </head>
+ <body>
+ <h2>Sparklines</h2>
+ <p>Sparklines are tiny graphs <span id="sparkline" class="sparkline"></span> that you can use inline. You can use more than one <span id="sparkline_2" class="sparkline"></span> in a document.</p>
+
+ <p>Sometimes it's useful to highlight a value in a sparkline:</p>
+
+ <p class="example">Today there were <span id="sparkline_3" class="sparkline"></span> <span class="highlight">5</span> daily defects.</p>
+
+ <p>That example also showed a range using a background colour. This could represent a set of acceptable values.</p>
+
+ <h2>Bar Graph</h2>
+ <div id="bargraph" class="linegraph"></div>
+ <div id="bargraph_bug" class="linegraph"></div>
+ <div id="bargraph_9" class="linegraph"></div>
+
+ <h2>Line Graph</h2>
+ <div id="linegraph_4" class="linegraph"></div>
+ <div id="linegraph" class="linegraph"></div>
+ <div id="linegraph_2" class="linegraph"></div>
+ <div id="linegraph_3" class="linegraph"></div>
+ <div id="linegraph_5" class="linegraph"></div>
+
+ <h2>Horizontal Bar Graph</h2>
+ <div id="bargraph_5" class="linegraph"></div>
+ <div id="bargraph_6" class="linegraph"></div>
+ <div id="bargraph_7" class="linegraph"></div>
+ <div id="bargraph_8" class="linegraph"></div>
+
+ <h2>Focused Data Ranges</h2>
+
+ <p>Centre onto awkward data ranges:</p>
+
+ <div id="linegraph_small_high" class="linegraph"></div>
+ <div id="linegraph_med_high" class="linegraph"></div>
+ <div id="linegraph_negative" class="linegraph"></div>
+ <div id="linegraph_negative_and_positive" class="linegraph"></div>
+ <div id="bar_negative_and_positive" class="linegraph"></div>
+ <div id="horizontal_negative_and_positive" class="linegraph"></div>
+
+ <h2>Contributed Examples</h2>
+
+ <p>Min and max are the same:</p>
+ <div class="linegraph" id="rics_poll"></div>
+
+ <p>Small range difference, but should still start at 0:</p>
+ <div class="linegraph" id="rics_poll4"></div>
+
+ <p>Small range difference, but should still start at 0 (it's a bar chart):</p>
+ <div class="linegraph" id="rics_poll5"></div>
+
+ <p>Large min max set to the same:</p>
+ <div class="linegraph" id="rics_poll3"></div>
+
+ <p>Negative values should always be above the axis (not fixed yet):</p>
+ <div class="linegraph" id="rics_poll2"></div>
+
+ <p>GitHub issue #4: LineGraph with the same values:</p>
+ <div class="linegraph" id="issue4"></div>
+
+ <p>TODO: Automatically reduce numerically labels when there are too many to neatly fit.</p>
+ <div id="miki" class="linegraph"></div>
+
+ <script type="text/javascript">
+new Ico.SparkLine($('sparkline'), [21, 41, 32, 1, 10, 5, 32, 10, 23], { width: 30, height: 14, background_colour: '#ccc' });
+new Ico.SparkBar($('sparkline_2'), [1, 5, 10, 15, 20, 15, 10, 15, 30, 15, 10], { width: 30, height: 14, background_colour: '#ccc' });
+new Ico.SparkLine($('sparkline_3'), [10, 1, 12, 3, 4, 8, 5], { width: 60, height: 14, highlight: { colour: '#ff0000' }, acceptable_range: [5, 9], background_colour: '#ccc' });
+
+new Ico.BarGraph($('bargraph'), { one: $random(1, 25) }, { bar_labels: true });
+new Ico.BarGraph($('bargraph_bug'), [1.0]);
+new Ico.BarGraph($('bargraph_9'), { shoe_size: [1, 1, 1, 0, 2, 4, 6, 8, 3, 9, 6]}, { colours: { shoe_size: '#990000' }, grid: true, bar_labels: true });
+
+new Ico.LineGraph($('linegraph'), { one: [30, 5, 1, 10, 15, 18, 20, 25, 1], two: [10, 9, 3, 30, 1, 10, 5, 33, 33], three: [5, 4, 10, 1, 30, 11, 33, 12, 22]}, { markers: 'circle', colours: { one: '#990000', two: '#009900', three: '#000099'}, labels: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'], meanline: true, grid: true});
+new Ico.LineGraph($('linegraph_2'), [100, 10, 90, 20, 80, 30, 70, 40, 60, 50, 55, 10, 9, 38, 65, 40, 79, 83, 48, 75, 14, 67, 20, 89, 48], { meanline: { stroke: '#AA0000' }, grid: true } );
+new Ico.LineGraph($('linegraph_3'), $map(1, 25, function() { return Math.round(Math.random() * 10000); }), { start_value: 0 });
+new Ico.LineGraph($('linegraph_4'), $random(1, 25));
+
+new Ico.LineGraph($('linegraph_5'), { shoe_size: [15,14,10]},{ markers: 'circle', colours: { shoe_size: '#990000' }, grid: true });
+
+new Ico.HorizontalBarGraph($('bargraph_5'), [2, 5, 1, 10, 15, 33, 20, 25, 1], { font_size: 20, labels: ['label one', 'label two', 'label three', 'four', 'five', 'six', 'seven', 'eight', 'nine'], colour: '#ff0099', background_colour: '#ccc' });
+new Ico.BarGraph($('bargraph_6'), [2, 5, 1, 10, 15, 33, 20, 25, 1], { labels: ['label one', 'label two', 'label three', 'label four', 'label five', 'label six', 'label seven', 'label eight', 'label nine'] });
+new Ico.HorizontalBarGraph($('bargraph_7'), [2, 5, 1, 10, 15, 33, 20, 25, 1], { font_size: 14 });
+new Ico.HorizontalBarGraph($('bargraph_8'), [0.23, 0.1, 0.9, 0.95, 0.99, 0.3, 0.5, 0.35, 0.3], { bar_size: 25, colours: { one: '#990000', two: '#009900', three: '#000099'}, labels: ['label one', 'label two', 'label three', 'four', 'five', 'six', 'longest label seven', 'eight', 'nine'] });
+
+new Ico.LineGraph($('linegraph_small_high'), $map(1, 25, function() { return Math.round(Math.random() + 100); }));
+new Ico.LineGraph($('linegraph_med_high'), $map(1, 25, function() { return Math.round((Math.random() * 10) + 1000); } ));
+new Ico.LineGraph($('linegraph_negative'), [57,-31,-87,-66,-30,-77,-88,75,-25,48,-56,-91,16,-41,87,69,65,-62,-58,15,-49,-75,42,-78,-79]);
+new Ico.LineGraph($('linegraph_negative_and_positive'), [-57,-31,-87,-66,-30,-77,-88,-75,-25,-48,-56,-91,-16,-41,-87,-69,-65,-62,-58,-15,-49,-75,-42,-78,-79]);
+new Ico.BarGraph($('bar_negative_and_positive'), [-57,-31,-87,66,-30,-77,-88,-75,-25,-48,-56,-91,16,-41,-87,-69,-65,-62,58,-15,-49,-75,-42,-78,-79]);
+new Ico.HorizontalBarGraph($('horizontal_negative_and_positive'), [-57,-31,-87,66,-30,-77,-88,-75,-20,-48,-56,-91,16,-41,-87,-69,-65,-62,58,-15,-49,-75,-42,-78,-79]);
+new Ico.BarGraph($('rics_poll'), [20, 20], { max_bar_size: 100, font_size: 10, colour: '#ff0099', labels: ['label one', 'label two'] });
+new Ico.LineGraph($('issue4'), [20, 20, 20, 20, 20], { font_size: 10, colour: '#ff0099' });
+new Ico.BarGraph($('rics_poll4'), [20, 19, 15, 10], { font_size: 10, colour: '#ff0099', labels: ['label one', 'label two'] });
+new Ico.BarGraph($('rics_poll5'), [10.1, 10.2, 10.5, 11], { font_size: 10, colour: '#ff0099' });
+new Ico.BarGraph($('rics_poll2'), [20, -20, -30], { font_size: 10, colour: '#ff0099', labels: ['label one', 'label two', 'label three'] });
+new Ico.BarGraph($('rics_poll3'), [2000, 2000], { bar_padding: 100, font_size: 10, colour: '#ff0099', labels: ['label one', 'label two'] });
+new Ico.LineGraph($('miki'), [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3], { label_count: 3, label_step: 1, font_size: 10, colour: '#ff0099', labels: ['2/7', '4/7', '6/7', '8/7', '10/7', '12/7', '14/7', '16/7', '18/7', '20/7', '22/7', '24/7', '26/7', '28/7', '30/7', '1/8'] });
+ </script>
+ </body>
+</html>
View
1 ico-min.js
@@ -0,0 +1 @@
+(function(a){function d(a,b){var c;a.currentStyle?c=a.currentStyle[b]:window.getComputedStyle&&(c=document.defaultView.getComputedStyle(a,null).getPropertyValue(b)),c&&c.length===0&&(c=null);return c}function c(a){return a>1?a-1:1}var b={VERSION:"0.3.0",round:function(a,b){var c=Math.round(a*Math.pow(10,b))/Math.pow(10,b);return c}};Array.prototype.sum=function(){for(var a=0,b=0;a<this.length;b+=this[a++]);return b},typeof Array.prototype.max=="undefined"&&(Array.prototype.max=function(){return Math.max.apply({},this)}),typeof Array.prototype.min=="undefined"&&(Array.prototype.min=function(){return Math.min.apply({},this)}),Array.prototype.mean=function(){return this.sum()/this.length},Array.prototype.variance=function(){var a=this.mean(),b=0;for(var c=0;c<this.length;c++)b+=Math.pow(this[c]-a,2);return b/(this.length-1)},Array.prototype.standard_deviation=function(){return Math.sqrt(this.variance())},typeof Object.extend=="undefined"&&(Object.extend=function(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}),b.Normaliser=function(a,b){this.options={start_value:null},typeof b!="undefined"&&(this.options=b),this.min=a.min(),this.max=a.max(),this.standard_deviation=a.standard_deviation(),this.range=0,this.step=this.labelStep(this.max-this.min),this.start_value=this.calculateStart(),this.process()},b.Normaliser.prototype={calculateStart:function(){var a=typeof this.options.start_value!="undefined"&&this.min>=0?this.options.start_value:this.min,b=this.round(a,1);if(this.min>0&&b>this.min)return 0;return b},round:function(a,b){b=b||1;var c=a;if(this.standard_deviation>.1){var d=Math.pow(10,-b);c=Math.round(a*d)/d;if(c>this.min)return this.round(a-this.step)}return c},process:function(){this.range=this.max-this.start_value,this.step=this.labelStep(this.range)},labelStep:function(a){return Math.pow(10,Math.round(Math.log(a)/Math.LN10)-1)}},b.Base={normaliseData:function(a){var b=[],c=0;for(c=0;c<a.length;c++)b.push(this.normalise(a[c]));return b},flatten:function(a){var b=[];if(typeof a.length=="undefined"){if(typeof a!="object")return[];for(var c in a)a.hasOwnProperty(c)&&(b=b.concat(this.flatten(a[c])))}for(var d=0;d<a.length;d++)typeof a[d].length=="number"?b=b.concat(this.flatten(a[d])):b.push(a[d]);return b},makeRange:function(a,b){var c=[],d;for(d=a;d<b;d++)c.push(d);return c}},b.BaseGraph=function(){this.initialize.apply(this,arguments)},Object.extend(b.BaseGraph.prototype,b.Base),Object.extend(b.BaseGraph.prototype,{initialize:function(a,c,e){this.element=a,this.data_sets=this.buildDataSets(c,e),this.flat_data=this.flatten(c),this.data_size=this.longestDataSetLength();if(e&&e.colour){e.colours={};for(var f in this.data_sets)this.data_sets.hasOwnProperty(f)&&(e.colours[f]=e.colour)}this.options={width:parseInt(d(a,"width"),10),height:parseInt(d(a,"height"),10),labels:this.makeRange(1,this.data_size+1),plot_padding:10,font_size:10,show_horizontal_labels:!0,show_vertical_labels:!0,background_colour:d(a,"backgroundColor")||"#ffffff",label_colour:"#666",markers:!1,marker_size:5,meanline:!1,grid:!1,grid_colour:"#ccc",y_padding_top:20,draw:!0},Object.extend(this.options,this.chartDefaults()||{}),Object.extend(this.options,e||{}),this.normaliser=new b.Normaliser(this.flat_data,this.normaliserOptions()),this.label_step=this.normaliser.step,this.range=this.normaliser.range,this.start_value=this.normaliser.start_value,this.x_padding_left=10+this.paddingLeftOffset(),this.x_padding_right=20,this.x_padding=this.x_padding_left+this.x_padding_right,this.y_padding_top=this.options.y_padding_top,this.y_padding_bottom=20+this.paddingBottomOffset(),this.y_padding=this.y_padding_top+this.y_padding_bottom,this.graph_width=this.options.width-this.x_padding,this.graph_height=this.options.height-this.y_padding,this.step=this.calculateStep(),this.y_label_count=Math.ceil(this.range/this.label_step),this.normaliser.min+this.y_label_count*this.normaliser.step<this.normaliser.max&&(this.y_label_count+=1),this.value_labels=this.makeValueLabels(this.y_label_count),this.top_value=this.value_labels[this.value_labels.length-1],this.grid_start_offset=-1,this.options.draw&&(typeof this.options.colours=="undefined"&&(this.options.colours=this.makeRandomColours()),this.paper=Raphael(this.element,this.options.width,this.options.height),this.background=this.paper.rect(0,0,this.options.width,this.options.height),this.background.attr({fill:this.options.background_colour,stroke:"none"}),this.options.meanline===!0&&(this.options.meanline={"stroke-width":"2px",stroke:"#BBBBBB"}),this.setChartSpecificOptions(),this.lastPoint={x:0,y:0},this.draw())},buildDataSets:function(a,b){return typeof a.length!="undefined"?{one:a}:a},normaliserOptions:function(){return{}},chartDefaults:function(){return{}},drawPlot:function(a,b,c,d,e){},calculateStep:function(){},makeRandomColours:function(){var a={};for(var b in this.data_sets)a.hasOwnProperty(b)||(a[b]=Raphael.hsb2rgb(Math.random(),1,.75).hex);return a},longestDataSetLength:function(){var a=0;for(var b in this.data_sets)this.data_sets.hasOwnProperty(b)&&(a=this.data_sets[b].length>a?this.data_sets[b].length:a);return a},roundValue:function(a,b){var c=Math.pow(10,b);a*=c,a=Math.round(a)/c;return a},roundValues:function(a,b){var c=[];for(var d=0;d<a.length;d++)c.push(this.roundValue(a[d],b));return c},longestLabel:function(a){var b=Array.prototype.slice.call(a||this.options.labels,0);return b.sort(function(a,b){return a.toString().length<b.toString().length})[0].toString().length},paddingLeftOffset:function(){var a=this.roundValues(this.flat_data,2),b=0;b=a.sort(function(a,b){return a.toString().length<b.toString().length})[0].toString().length,b=b>2?b-1:b;return 10+b*this.options.font_size},paddingBottomOffset:function(){return this.options.font_size},normalise:function(a){var b=this.start_value===0?this.top_value:this.range;return a/b*this.graph_height},draw:function(){this.options.grid&&this.drawGrid(),this.options.meanline&&this.drawMeanLine(this.normaliseData(this.flat_data)),this.drawAxis(),this.options.show_vertical_labels&&this.drawVerticalLabels(),this.options.show_horizontal_labels&&this.drawHorizontalLabels();for(var a in this.data_sets)if(this.data_sets.hasOwnProperty(a)){var b=this.data_sets[a];this.drawLines(a,this.options.colours[a],this.normaliseData(b))}this.start_value!==0&&this.drawFocusHint()},drawGrid:function(){var a="",b;if(this.options.show_vertical_labels){var c=this.graph_height+this.y_padding_top;for(b=0;b<this.y_label_count;b++)c=c-this.graph_height/this.y_label_count,a+="M"+this.x_padding_left+","+c,a+="L"+(this.x_padding_left+this.graph_width)+","+c}if(this.options.show_horizontal_labels){var d=this.x_padding_left+this.options.plot_padding+this.grid_start_offset,e=this.options.labels.length;for(b=0;b<e;b++)a+="M"+d+","+this.y_padding_top,a+="L"+d+","+(this.y_padding_top+this.graph_height),d=d+this.step;d=d-this.options.plot_padding-1,a+="M"+d+","+this.y_padding_top,a+="L"+d+","+(this.y_padding_top+this.graph_height)}this.paper.path(a).attr({stroke:this.options.grid_colour,"stroke-width":"1px"})},drawLines:function(a,b,c){var d=this.calculateCoords(c),e="";for(var f=0;f<d.length;f++){var g=d[f][0]||0,h=d[f][1]||0;e=this.drawPlot(f,e,g,h,b)}this.paper.path(e).attr({stroke:b,"stroke-width":"3px"})},calculateCoords:function(a){var b=this.x_padding_left+this.options.plot_padding-this.step,c=this.graph_height+this.y_padding_top+this.normalise(this.start_value),d=0,e=[];for(var f=0;f<a.length;f++)d=c-a[f],b=b+this.step,e.push([b,d]);return e},drawFocusHint:function(){var a=5,b=this.x_padding_left+a/2-1,c=this.options.height-this.y_padding_bottom,d="";d+="M"+b+","+c,d+="L"+(b-a)+","+(c-a),d+="M"+b+","+(c-a),d+="L"+(b-a)+","+(c-a*2),this.paper.path(d).attr({stroke:this.options.label_colour,"stroke-width":2})},drawMeanLine:function(a){var b=a.sum()/a.length,c="";c+="M"+(this.x_padding_left-1)+","+(this.options.height-this.y_padding_bottom-b),c+="L"+(this.graph_width+this.x_padding_left)+","+(this.options.height-this.y_padding_bottom-b),this.paper.path(c).attr(this.options.meanline)},drawAxis:function(){var a="";a+="M"+(this.x_padding_left-1)+","+(this.options.height-this.y_padding_bottom),a+="L"+(this.graph_width+this.x_padding_left)+","+(this.options.height-this.y_padding_bottom),a+="M"+(this.x_padding_left-1)+","+(this.options.height-this.y_padding_bottom),a+="L"+(this.x_padding_left-1)+","+this.y_padding_top,this.paper.path(a).attr({stroke:this.options.label_colour})},makeValueLabels:function(a){var b=this.label_step,c=this.start_value,d=[];for(var e=0;e<a;e++)c=this.roundValue(c+b,2),d.push(c);return d},drawMarkers:function(a,b,c,d,e,f){function h(a){return a*b[1]}function g(a){return a*b[0]}var i=this.x_padding_left-1+g(d),j=this.options.height-this.y_padding_bottom+h(d),k="",l={font:this.options.font_size+'px "Arial"',stroke:"none",fill:"#000"};Object.extend(l,f||{});for(var m=0;m<a.length;m++)k+="M"+i+","+j,typeof a[m]!="undefined"&&(a[m]+"").length>0&&(k+="L"+(i+h(5))+","+(j+g(5)),this.paper.text(i+e[0],j-e[1],a[m]).attr(l).toFront()),i=i+g(c),j=j+h(c);this.paper.path(k).attr({stroke:this.options.label_colour})},drawVerticalLabels:function(){var a=this.graph_height/this.y_label_count;this.drawMarkers(this.value_labels,[0,-1],a,a,[-8,-2],{"text-anchor":"end"})},drawHorizontalLabels:function(){this.drawMarkers(this.options.labels,[1,0],this.step,this.options.plot_padding,[0,(this.options.font_size+7)*-1])}}),b.BarGraph=function(){this.initialize.apply(this,arguments)},Object.extend(b.BarGraph.prototype,b.BaseGraph.prototype),Object.extend(b.BarGraph.prototype,{chartDefaults:function(){return{plot_padding:0}},normaliserOptions:function(){return{start_value:0}},setChartSpecificOptions:function(){this.bar_padding=5,this.bar_width=this.calculateBarWidth(),this.options.plot_padding=this.bar_width/2,this.step=this.calculateStep(),this.grid_start_offset=this.bar_padding-1,this.start_y=this.options.height-this.y_padding_bottom},calculateBarWidth:function(){return this.graph_width/this.data_size-this.bar_padding},calculateStep:function(){return(this.graph_width-this.options.plot_padding*2-this.bar_padding*2)/c(this.data_size)},drawPlot:function(a,b,c,d,e){c=c+this.bar_padding,b+="M"+c+","+this.start_y,b+="L"+c+","+d,this.paper.path(b).attr({stroke:e,"stroke-width":this.bar_width+"px"}),b="",c=c+this.step,b+="M"+c+","+this.start_y;return b},drawHorizontalLabels:function(){var a=this.bar_padding+this.options.plot_padding;this.drawMarkers(this.options.labels,[1,0],this.step,a,[0,(this.options.font_size+7)*-1])}}),b.HorizontalBarGraph=function(){this.initialize.apply(this,arguments)},Object.extend(b.HorizontalBarGraph.prototype,b.BaseGraph.prototype),Object.extend(b.HorizontalBarGraph.prototype,{setChartSpecificOptions:function(){this.y_padding_top=0,this.x_padding_left=20+this.longestLabel()*(this.options.font_size/2),this.bar_padding=5,this.bar_width=this.calculateBarHeight(),this.options.plot_padding=0,this.step=this.calculateStep()},normalise:function(a){var b=this.x_padding_left;return a/this.range*(this.graph_width-b)},calculateBarHeight:function(){return this.graph_height/this.data_size-this.bar_padding},calculateStep:function(){return(this.options.height-this.y_padding_bottom)/c(this.data_size)},drawLines:function(a,b,c){var d=this.x_padding_left+this.options.plot_padding*2,e=this.options.height-this.y_padding_bottom-this.step/2,f="M"+d+","+e,g;for(g=0;g<c.length;g++)f+="L"+(d+c[g]-this.normalise(this.start_value))+","+e,e=e-this.step,f+="M"+d+","+e;this.paper.path(f).attr({stroke:b,"stroke-width":this.bar_width+"px"})},drawFocusHint:function(){var a=5,b=this.x_padding_left+this.step*2,c=this.options.height-this.y_padding_bottom,d="";d+="M"+b+","+c,d+="L"+(b-a)+","+(c+a),d+="M"+(b-a)+","+c,d+="L"+(b-a*2)+","+(c+a),this.paper.path(d).attr({stroke:this.options.label_colour,"stroke-width":2})},drawVerticalLabels:function(){var a=this.step/2-this.options.plot_padding*2;this.drawMarkers(this.options.labels,[0,-1],this.step,a,[-8,this.options.font_size/8],{"text-anchor":"end"})},drawHorizontalLabels:function(){var a=this.graph_width/this.y_label_count,b=this.makeValueLabels(this.y_label_count);this.drawMarkers(b,[1,0],a,a,[0,(this.options.font_size+7)*-1])}}),b.LineGraph=function(){this.initialize.apply(this,arguments)},Object.extend(b.LineGraph.prototype,b.BaseGraph.prototype),Object.extend(b.LineGraph.prototype,{normalise:function(a){var b=this.start_value===0?this.top_value:this.top_value-this.start_value;return a/b*this.graph_height},chartDefaults:function(){return{plot_padding:10}},setChartSpecificOptions:function(){this.x_padding_left=30+this.longestLabel(this.value_labels)*(this.options.font_size/2),typeof this.options.curve_amount=="undefined"&&(this.options.curve_amount=10)},normaliserOptions:function(){return{start_value:this.options.start_value}},calculateStep:function(){return(this.graph_width-this.options.plot_padding*2)/c(this.data_size)},startPlot:function(a,b,c,d){this.lastPoint={x:b,y:c};return a+"M"+b+","+c},drawPlot:function(a,b,c,d,e){var f=this.options.curve_amount;if(this.options.markers==="circle"){var g=this.paper.circle(c,d,this.options.marker_size);g.attr({"stroke-width":"1px",stroke:this.options.background_colour,fill:e})}if(a===0)return this.startPlot(b,c,d,e);f?b+=["C",this.lastPoint.x+f,this.lastPoint.y,c-f,d,c,d]:b+="L"+c+","+d,this.lastPoint={x:c,y:d};return b}}),b.SparkLine=function(){this.initialize.apply(this,arguments)},b.SparkLine.prototype={initialize:function(a,b,c){this.element=a,this.data=b,this.options={width:parseInt(d(a,"width"),10),height:parseInt(d(a,"height"),10),highlight:!1,background_colour:d(a,"backgroundColor")||"#ffffff",colour:"#036"},Object.extend(this.options,c||{}),this.step=this.calculateStep(),this.paper=Raphael(this.element,this.options.width,this.options.height),this.options.acceptable_range?this.background=this.paper.rect(0,this.options.height-this.normalise(this.options.acceptable_range[1]),this.options.width,this.options.height-this.normalise(this.options.acceptable_range[0])):this.background=this.paper.rect(0,0,this.options.width,this.options.height),this.background.attr({fill:this.options.background_colour,stroke:"none"}),this.draw()},calculateStep:function(){return this.options.width/c(this.data.length)},normalise:function(a){return this.options.height/this.data.max()*a},draw:function(){var a=this.normaliseData(this.data);this.drawLines("",this.options.colour,a),this.options.highlight&&this.showHighlight(a)},drawLines:function(a,c,d){var e="",f=0,g=d.slice(1),h=0;e="M0,"+(this.options.height-d[0]);for(h=1;h<d.length;h++)f=f+this.step,e+="L"+f+","+b.round(this.options.height-d[h],2);this.paper.path(e).attr({stroke:c}),this.lastPoint={x:0,y:this.options.height-d[0]}},showHighlight:function(a){var b=2,c=this.options.width-b,d=this.options.highlight.index||a.length-1,e=a[d]+Math.round(b/2);typeof this.options.highlight.index!="undefined"&&(c=this.step*this.options.highlight.index);var f=this.paper.circle(c,this.options.height-e,b);f.attr({stroke:!1,fill:this.options.highlight.colour})}},Object.extend(b.SparkLine.prototype,b.Base),b.SparkBar=function(){this.initialize.apply(this,arguments)},Object.extend(b.SparkBar.prototype,b.SparkLine.prototype),Object.extend(b.SparkBar.prototype,{calculateStep:function(){return this.options.width/c(this.data.length)},drawLines:function(a,b,c){var d=this.step>2?this.step-1:this.step,e=d,f="",g=0;for(g=0;g<c.length;g++)f+="M"+e+","+(this.options.height-c[g]),f+="L"+e+","+this.options.height,e=e+this.step;this.paper.path(f).attr({stroke:b,"stroke-width":d})}}),a.Ico=b})(typeof window=="undefined"?this:window)
View
234 index.html
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset='utf-8'>
+ <title>alexyoung/ico @ GitHub</title>
+ <link href="prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="prettify.js"></script>
+ <style type="text/css">
+ body {
+ margin-top: 1.0em;
+ background-color: #ffffff;
+ font-family: Helvetica, Arial, FreeSans, san-serif;
+ color: #000000;
+ }
+ #container {
+ margin: 0 auto;
+ width: 700px;
+ }
+ h1 { font-size: 3.8em; color: #000000; margin-bottom: 3px; }
+ h1 .small { font-size: 0.4em; }
+ h1 a { text-decoration: none }
+ h2 { font-size: 1.5em; color: #000000; }
+ h3 { color: #000000; }
+ a { color: #000000; }
+ .description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
+ .download { float: right; }
+ pre { background: #000; color: #fff; padding: 15px;}
+ hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
+ .footer { text-align:center; padding-top:30px; font-style: italic; }
+
+ code { padding: 2px 4px; }
+
+ /* Pretty printing styles. Used with prettify.js. */
+ /* Vim sunburst theme by David Leibovic */
+
+ pre .str, code .str { color: #65B042; } /* string - green */
+ pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
+ pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
+ pre .typ, code .typ { color: #89bdff; } /* type - light blue */
+ pre .lit, code .lit { color: #3387CC; } /* literal - blue */
+ pre .pun, code .pun { color: #fff; } /* punctuation - white */
+ pre .pln, code .pln { color: #fff; } /* plaintext - white */
+ pre .tag, code .tag { color: #89bdff; } /* html/xml tag - light blue */
+ pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name - khaki */
+ pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
+ pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
+
+ pre.prettyprint, code.prettyprint {
+ background-color: #111111;
+ -moz-border-radius: 8px;
+ -webkit-border-radius: 8px;
+ -o-border-radius: 8px;
+ -ms-border-radius: 8px;
+ -khtml-border-radius: 8px;
+ border-radius: 8px;
+ }
+
+ pre.prettyprint {
+ width: 95%;
+ margin: 1em auto;
+ padding: 1em;
+ white-space: pre-wrap;
+ }
+
+ /* Specify class=linenums on a pre to get line numbering */
+ ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* 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 { }
+
+ @media print {
+ pre .str, code .str { color: #060; }
+ pre .kwd, code .kwd { color: #006; font-weight: bold; }
+ pre .com, code .com { color: #600; font-style: italic; }
+ pre .typ, code .typ { color: #404; font-weight: bold; }
+ pre .lit, code .lit { color: #044; }
+ pre .pun, code .pun { color: #440; }
+ pre .pln, code .pln { color: #000; }
+ pre .tag, code .tag { color: #006; font-weight: bold; }
+ pre .atn, code .atn { color: #404; }
+ pre .atv, code .atv { color: #060; }
+ }
+
+ #linegraph { width: 700px; height: 300px }
+
+ </style>
+</head>
+<body onload="prettyPrint()">
+ <a href="http://github.com/alexyoung/ico"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+
+ <div id="container">
+
+ <div class="download">
+ <a href="http://github.com/alexyoung/ico/zipball/master">
+ <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a>
+ <a href="http://github.com/alexyoung/ico/tarball/master">
+ <img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
+ </div>
+
+ <h1><a href="http://github.com/alexyoung/ico">ico</a>
+ <span class="small">by <a href="http://github.com/alexyoung">alexyoung</a></span></h1>
+
+<h3>Ico</h3>
+
+<p>Ico (GitHub: <a href="https://github.com/alexyoung/ico">alexyoung / ico</a>, License: <em>MIT</em>) is a JavaScript graph library.</p>
+
+<p>The <a href="http://alexyoung.github.com/ico/examples.html">Ico Example Page</a> has a lot of examples that demonstrate Ico's usage.</p>
+
+<h3>Usage</h3>
+
+<p>Graphs are created by instantiated classes. The available classes are:</p>
+
+<ul>
+<li><code>Ico.SparkLine</code>: Creates a small line graph intended for use within text</li>
+<li><code>Ico.SparkBar</code>: Creates a small bar graph intended for use within text</li>
+<li><code>Ico.BarGraph</code>: Creates a bar graph</li>
+<li><code>Ico.HorizontalBarGraph</code>: Creates a horizontal bar graph</li>
+<li><code>Ico.LineGraph</code>: Creates a line graph</li>
+</ul>
+
+<p>Each of these classes can be instantiated with the same arguments:</p>
+
+<pre class="prettyprint lang-js"><code>
+// Basic signature
+new Ico.SparkLine(element, data, options);
+
+// Real examples
+new Ico.SparkLine($('sparkline'),
+ [21, 41, 32, 1, 10, 5, 32, 10, 23],
+ { width: 30, height: 14, background_colour: '#ccc' }
+);
+
+new Ico.BarGraph($('bargraph'), { one: $random(1, 25) }, { bar_labels: true });
+</code></pre>
+
+<p>The third argument, <code>options</code>, may vary between graphs.</p>
+
+<h3>Live Example</h3>
+
+<pre class="prettyprint lang-js"><code>
+new Ico.LineGraph($('linegraph'), {
+ one: [30, 5, 1, 10, 15, 18, 20, 25, 1],
+ two: [10, 9, 3, 30, 1, 10, 5, 33, 33],
+ three: [5, 4, 10, 1, 30, 11, 33, 12, 22]
+ }, {
+ markers: 'circle',
+ colours: { one: '#990000', two: '#009900', three: '#000099'},
+ labels: ['one', 'two', 'three', 'four',
+ 'five', 'six', 'seven', 'eight', 'nine'],
+ meanline: true,
+ grid: true
+ }
+);
+</code></pre>
+
+<script type="text/javascript" src="raphael.js"></script>
+<script type="text/javascript" src="ico-min.js"></script>
+<div id="linegraph"></div>
+<script type="text/javascript">
+new Ico.LineGraph(document.getElementById('linegraph'), {
+ one: [30, 5, 1, 10, 15, 18, 20, 25, 1],
+ two: [10, 9, 3, 30, 1, 10, 5, 33, 33],
+ three: [5, 4, 10, 1, 30, 11, 33, 12, 22]
+}, {
+ markers: 'circle',
+ colours: { one: '#990000', two: '#009900', three: '#000099'},
+ labels: ['one', 'two', 'three', 'four',
+ 'five', 'six', 'seven', 'eight', 'nine'],
+ meanline: true,
+ grid: true
+}
+);
+</script>
+
+<h3>Options for <code>Ico.SparkLine</code></h3>
+
+<ul>
+<li><code>width</code>: Width of the graph, defaults to the element's width</li>
+<li><code>height</code>: Height of the graph, defaults to the element's height</li>
+<li><code>highlight</code>: Highlight options <code>highlight: { colour: '#ff0000' }</code> -- used to pick out the last value</li>
+<li><code>background_colour</code>: The graph's background colour, defaults to the element's background colour if set</li>
+<li><code>colour</code>: The colour for drawing lines</li>
+<li><code>acceptable_range</code>: An array of two values, <code>[min, max]</code>, for setting the size of the background rectangle</li>
+</ul>
+
+<h3>Options for <code>Ico.SparkBar</code></h3>
+
+<p><code>Ico.SparkBar</code> options are the same as <code>Ico.SparkLine</code>.</p>
+
+<h3>Shared Options for <code>Ico.BarGraph</code>, <code>Ico.HorizontalBarGraph</code>, and <code>Ico.LineGraph</code></h3>
+
+<ul>
+<li><code>width</code>: The width of the container element, defaults to the element's width</li>
+<li><code>height</code>: The height of the container element, defaults to the element's height</li>
+<li><code>background_colour</code>: The graph's background colour, defaults to the element's background colour if set</li>
+<li><code>labels</code>: An array of text labels (for each bar or line)</li>
+<li><code>show_horizontal_labels</code>: Set to <code>false</code> to hide horizontal labels</li>
+<li><code>show_vertical_labels</code>: Set to <code>false</code> to hide vertical labels</li>
+<li><code>label_count</code>: The number of numerical labels to display</li>
+<li><code>label_step</code>: The value to increment each numerical label</li>
+<li><code>start_value</code>: The value to start plotting from (generally 0). This can be used to force 0 in cases where the normaliser starts from another value</li>
+<li><code>font_size</code>: The size of the fonts used in the graph</li>
+<li><code>meanline</code>: Display a line through the mean value</li>
+<li><code>grid</code>: Display a grid to make reading values easier</li>
+<li><code>grid_colour</code>: Change the colour of the grid</li>
+</ul>
+
+<h3>Options for <code>Ico.BarGraph</code></h3>
+
+<ul>
+<li><code>bar_size</code>: Set the size for a bar in a bar graph</li>
+<li><code>max_bar_size</code>: Set the maximum size for a bar in a bar graph</li>
+<li><code>bar_labels</code>: Display the actual value of each bar in a bar graph</li>
+</ul>
+
+<h3>Options for <code>Ico.HorizontalBarGraph</code></h3>
+
+<ul>
+<li><code>bar_size</code>: Set the size for a bar in a bar graph</li>
+<li><code>max_bar_size</code>: Set the maximum size for a bar in a bar graph</li>
+</ul>
+
+<h3>Options for <code>Ico.LineGraph</code></h3>
+
+<ul>
+<li><code>markers</code>: Set to <code>'circle'</code> to display markers at each point on a line graph</li>
+<li><code>marker_size</code>: The size of each marker</li>
+</ul>
+
+<h3>Data Normalisation</h3>
+
+<p>Data is mapped to plottable values by <code>Ico.Normaliser</code>. This class also attempts to calculate a sensible value to start plotting from on the X axis and the X axis label increment. These values can be overridden through <code>start_value</code> and <code>label_step</code> in graphs to support data that is difficult to plot.</p>
+</body>
+</html>
View
119 index.md
@@ -0,0 +1,119 @@
+### Ico
+
+Ico (GitHub: [alexyoung / ico](https://github.com/alexyoung/ico), License: _MIT_) is a JavaScript graph library.
+
+The [Ico Example Page](http://alexyoung.github.com/ico/examples.html) has a lot of examples that demonstrate Ico's usage.
+
+### Usage
+
+Graphs are created by instantiated classes. The available classes are:
+
+* `Ico.SparkLine`: Creates a small line graph intended for use within text
+* `Ico.SparkBar`: Creates a small bar graph intended for use within text
+* `Ico.BarGraph`: Creates a bar graph
+* `Ico.HorizontalBarGraph`: Creates a horizontal bar graph
+* `Ico.LineGraph`: Creates a line graph
+
+Each of these classes can be instantiated with the same arguments:
+
+<pre class="prettyprint lang-js"><code>
+// Basic signature
+new Ico.SparkLine(element, data, options);
+
+// Real examples
+new Ico.SparkLine($('sparkline'),
+ [21, 41, 32, 1, 10, 5, 32, 10, 23],
+ { width: 30, height: 14, background_colour: '#ccc' }
+);
+
+new Ico.BarGraph($('bargraph'), { one: $random(1, 25) }, { bar_labels: true });
+</code></pre>
+
+The third argument, `options`, may vary between graphs.
+
+### Live Example
+
+<pre class="prettyprint lang-js"><code>
+new Ico.LineGraph($('linegraph'), {
+ one: [30, 5, 1, 10, 15, 18, 20, 25, 1],
+ two: [10, 9, 3, 30, 1, 10, 5, 33, 33],
+ three: [5, 4, 10, 1, 30, 11, 33, 12, 22]
+ }, {
+ markers: 'circle',
+ colours: { one: '#990000', two: '#009900', three: '#000099'},
+ labels: ['one', 'two', 'three', 'four',
+ 'five', 'six', 'seven', 'eight', 'nine'],
+ meanline: true,
+ grid: true
+ }
+);
+</code></pre>
+
+<script type="text/javascript" src="raphael.js"></script>
+<script type="text/javascript" src="ico-min.js"></script>
+<div id="linegraph"></div>
+<script type="text/javascript">
+new Ico.LineGraph(document.getElementById('linegraph'), {
+ one: [30, 5, 1, 10, 15, 18, 20, 25, 1],
+ two: [10, 9, 3, 30, 1, 10, 5, 33, 33],
+ three: [5, 4, 10, 1, 30, 11, 33, 12, 22]
+}, {
+ markers: 'circle',
+ colours: { one: '#990000', two: '#009900', three: '#000099'},
+ labels: ['one', 'two', 'three', 'four',
+ 'five', 'six', 'seven', 'eight', 'nine'],
+ meanline: true,
+ grid: true
+}
+);
+</script>
+
+### Options for `Ico.SparkLine`
+
+* `width`: Width of the graph, defaults to the element's width
+* `height`: Height of the graph, defaults to the element's height
+* `highlight`: Highlight options `highlight: { colour: '#ff0000' }` -- used to pick out the last value
+* `background_colour`: The graph's background colour, defaults to the element's background colour if set
+* `colour`: The colour for drawing lines
+* `acceptable_range`: An array of two values, `[min, max]`, for setting the size of the background rectangle
+
+### Options for `Ico.SparkBar`
+
+`Ico.SparkBar` options are the same as `Ico.SparkLine`.
+
+### Shared Options for `Ico.BarGraph`, `Ico.HorizontalBarGraph`, and `Ico.LineGraph`
+
+* `width`: The width of the container element, defaults to the element's width
+* `height`: The height of the container element, defaults to the element's height
+* `background_colour`: The graph's background colour, defaults to the element's background colour if set
+* `labels`: An array of text labels (for each bar or line)
+* `show_horizontal_labels`: Set to `false` to hide horizontal labels
+* `show_vertical_labels`: Set to `false` to hide vertical labels
+* `label_count`: The number of numerical labels to display
+* `label_step`: The value to increment each numerical label
+* `start_value`: The value to start plotting from (generally 0). This can be used to force 0 in cases where the normaliser starts from another value
+* `font_size`: The size of the fonts used in the graph
+* `meanline`: Display a line through the mean value
+* `grid`: Display a grid to make reading values easier
+* `grid_colour`: Change the colour of the grid
+
+### Options for `Ico.BarGraph`
+
+* `bar_size`: Set the size for a bar in a bar graph
+* `max_bar_size`: Set the maximum size for a bar in a bar graph
+* `bar_labels`: Display the actual value of each bar in a bar graph
+
+### Options for `Ico.HorizontalBarGraph`
+
+* `bar_size`: Set the size for a bar in a bar graph
+* `max_bar_size`: Set the maximum size for a bar in a bar graph
+
+### Options for `Ico.LineGraph`
+
+* `markers`: Set to `'circle'` to display markers at each point on a line graph
+* `marker_size`: The size of each marker
+
+### Data Normalisation
+
+Data is mapped to plottable values by `Ico.Normaliser`. This class also attempts to calculate a sensible value to start plotting from on the X axis and the X axis label increment. These values can be overridden through `start_value` and `label_step` in graphs to support data that is difficult to plot.
+
View
21 intro.md
@@ -0,0 +1,21 @@
+Ico is a JavaScript graph library that uses [Raphael](http://raphaeljs.com/) to draw. This means it can draw charts in multiple browsers (including IE).
+
+Get it at GitHub: [alexyoung / ico](https://github.com/alexyoung/ico) or [view examples](http://alexyoung.github.com/ico/examples.html).
+
+The API uses a data parameter then an additional option for customisation:
+
+ new Ico.BarGraph(dom_element, data, options);
+
+An array or object can be passed as data:
+
+ new Ico.BarGraph(dom_element, [1, 2, 3, 4], { grid: true });
+
+ new Ico.BarGraph($('dom_element'), {
+ shoe_size: [1, 1, 1, 0, 2, 4, 6, 8, 3, 9, 6]
+ },
+ { colours: {shoe_size: '#990000' },
+ grid: true });
+
+## Support
+
+[Donate](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=support%40helicoid%2enet&lc=GB&item_name=Helicoid%20Limited&no_note=0&cn=Add%20special%20instructions%20to%20the%20seller&no_shipping=2&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted)
View
0 begin.html → layout/begin.html
File renamed without changes.
View
0 end.html → layout/end.html
File renamed without changes.
View
44 prettify.css
@@ -0,0 +1,44 @@
+/* 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; }
+pre.prettyprint { padding: 2px; border: 1px 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; }
+}
View
1,508 prettify.js
@@ -0,0 +1,1508 @@
+// Copyright (C) 2006 Google Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+/**
+ * @fileoverview
+ * some functions for browser-side pretty printing of code contained in html.
+ * <p>
+ *
+ * For a fairly comprehensive set of languages see the
+ * <a href="http://google-code-prettify.googlecode.com/svn/trunk/README.html#langs">README</a>
+ * file that came with this source. At a minimum, the lexer should work on a
+ * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
+ * XML, CSS, Javascript, and Makefiles. It works passably on Ruby, PHP and Awk
+ * and a subset of Perl, but, because of commenting conventions, doesn't work on
+ * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
+ * <p>
+ * Usage: <ol>
+ * <li> include this source file in an html page via
+ * {@code <script type="text/javascript" src="/path/to/prettify.js"></script>}
+ * <li> define style rules. See the example page for examples.
+ * <li> mark the {@code <pre>} and {@code <code>} tags in your source with
+ * {@code class=prettyprint.}
+ * You can also use the (html deprecated) {@code <xmp>} tag, but the pretty
+ * printer needs to do more substantial DOM manipulations to support that, so
+ * some css styles may not be preserved.
+ * </ol>
+ * That's it. I wanted to keep the API as simple as possible, so there's no
+ * need to specify which language the code is in, but if you wish, you can add
+ * another class to the {@code <pre>} or {@code <code>} element to specify the
+ * language, as in {@code <pre class="prettyprint lang-java">}. Any class that
+ * starts with "lang-" followed by a file extension, specifies the file type.
+ * See the "lang-*.js" files in this directory for code that implements
+ * per-language file handlers.
+ * <p>
+ * Change log:<br>
+ * cbeust, 2006/08/22
+ * <blockquote>
+ * Java annotations (start with "@") are now captured as literals ("lit")
+ * </blockquote>
+ * @requires console
+ */
+
+// JSLint declarations
+/*global console, document, navigator, setTimeout, window */
+
+/**
+ * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
+ * UI events.
+ * If set to {@code false}, {@code prettyPrint()} is synchronous.
+ */
+window['PR_SHOULD_USE_CONTINUATION'] = true;
+
+/** the number of characters between tab columns */
+window['PR_TAB_WIDTH'] = 8;
+
+/** Walks the DOM returning a properly escaped version of innerHTML.
+ * @param {Node} node
+ * @param {Array.<string>} out output buffer that receives chunks of HTML.
+ */
+window['PR_normalizedHtml']
+
+/** Contains functions for creating and registering new language handlers.
+ * @type {Object}
+ */
+ = window['PR']
+
+/** Pretty print a chunk of code.
+ *
+ * @param {string} sourceCodeHtml code as html
+ * @return {string} code as html, but prettier
+ */
+ = window['prettyPrintOne']
+/** Find all the {@code <pre>} and {@code <code>} tags in the DOM with
+ * {@code class=prettyprint} and prettify them.
+ * @param {Function?} opt_whenDone if specified, called when the last entry
+ * has been finished.
+ */
+ = window['prettyPrint'] = void 0;
+
+/** browser detection. @extern @returns false if not IE, otherwise the major version. */
+window['_pr_isIE6'] = function () {
+ var ieVersion = navigator && navigator.userAgent &&
+ navigator.userAgent.match(/\bMSIE ([678])\./);
+ ieVersion = ieVersion ? +ieVersion[1] : false;
+ window['_pr_isIE6'] = function () { return ieVersion; };
+ return ieVersion;
+};
+
+
+(function () {
+ // Keyword lists for various languages.
+ var FLOW_CONTROL_KEYWORDS =
+ "break continue do else for if return while ";
+ var C_KEYWORDS = FLOW_CONTROL_KEYWORDS + "auto case char const default " +
+ "double enum extern float goto int long register short signed sizeof " +
+ "static struct switch typedef union unsigned void volatile ";
+ var COMMON_KEYWORDS = C_KEYWORDS + "catch class delete false import " +
+ "new operator private protected public this throw true try typeof ";
+ var CPP_KEYWORDS = COMMON_KEYWORDS + "alignof align_union asm axiom bool " +
+ "concept concept_map const_cast constexpr decltype " +
+ "dynamic_cast explicit export friend inline late_check " +
+ "mutable namespace nullptr reinterpret_cast static_assert static_cast " +
+ "template typeid typename using virtual wchar_t where ";
+ var JAVA_KEYWORDS = COMMON_KEYWORDS +
+ "abstract boolean byte extends final finally implements import " +
+ "instanceof null native package strictfp super synchronized throws " +
+ "transient ";
+ var CSHARP_KEYWORDS = JAVA_KEYWORDS +
+ "as base by checked decimal delegate descending event " +
+ "fixed foreach from group implicit in interface internal into is lock " +
+ "object out override orderby params partial readonly ref sbyte sealed " +
+ "stackalloc string select uint ulong unchecked unsafe ushort var ";
+ var JSCRIPT_KEYWORDS = COMMON_KEYWORDS +
+ "debugger eval export function get null set undefined var with " +
+ "Infinity NaN ";
+ var PERL_KEYWORDS = "caller delete die do dump elsif eval exit foreach for " +
+ "goto if import last local my next no our print package redo require " +
+ "sub undef unless until use wantarray while BEGIN END ";
+ var PYTHON_KEYWORDS = FLOW_CONTROL_KEYWORDS + "and as assert class def del " +
+ "elif except exec finally from global import in is lambda " +
+ "nonlocal not or pass print raise try with yield " +
+ "False True None ";
+ var RUBY_KEYWORDS = FLOW_CONTROL_KEYWORDS + "alias and begin case class def" +
+ " defined elsif end ensure false in module next nil not or redo rescue " +
+ "retry self super then true undef unless until when yield BEGIN END ";
+ var SH_KEYWORDS = FLOW_CONTROL_KEYWORDS + "case done elif esac eval fi " +
+ "function in local set then until ";
+ var ALL_KEYWORDS = (
+ CPP_KEYWORDS + CSHARP_KEYWORDS + JSCRIPT_KEYWORDS + PERL_KEYWORDS +
+ PYTHON_KEYWORDS + RUBY_KEYWORDS + SH_KEYWORDS);
+
+ // token style names. correspond to css classes
+ /** token style for a string literal */
+ var PR_STRING = 'str';
+ /** token style for a keyword */
+ var PR_KEYWORD = 'kwd';
+ /** token style for a comment */
+ var PR_COMMENT = 'com';
+ /** token style for a type */
+ var PR_TYPE = 'typ';
+ /** token style for a literal value. e.g. 1, null, true. */
+ var PR_LITERAL = 'lit';
+ /** token style for a punctuation string. */
+ var PR_PUNCTUATION = 'pun';
+ /** token style for a punctuation string. */
+ var PR_PLAIN = 'pln';
+
+ /** token style for an sgml tag. */
+ var PR_TAG = 'tag';
+ /** token style for a markup declaration such as a DOCTYPE. */
+ var PR_DECLARATION = 'dec';
+ /** token style for embedded source. */
+ var PR_SOURCE = 'src';
+ /** token style for an sgml attribute name. */
+ var PR_ATTRIB_NAME = 'atn';
+ /** token style for an sgml attribute value. */
+ var PR_ATTRIB_VALUE = 'atv';
+
+ /**
+ * A class that indicates a section of markup that is not code, e.g. to allow
+ * embedding of line numbers within code listings.
+ */
+ var PR_NOCODE = 'nocode';
+
+ /** A set of tokens that can precede a regular expression literal in
+ * javascript.
+ * http://www.mozilla.org/js/language/js20/rationale/syntax.html has the full
+ * list, but I've removed ones that might be problematic when seen in
+ * languages that don't support regular expression literals.
+ *
+ * <p>Specifically, I've removed any keywords that can't precede a regexp
+ * literal in a syntactically legal javascript program, and I've removed the
+ * "in" keyword since it's not a keyword in many languages, and might be used
+ * as a count of inches.
+ *
+ * <p>The link a above does not accurately describe EcmaScript rules since
+ * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
+ * very well in practice.
+ *
+ * @private
+ */
+ var REGEXP_PRECEDER_PATTERN = function () {
+ var preceders = [
+ "!", "!=", "!==", "#", "%", "%=", "&", "&&", "&&=",
+ "&=", "(", "*", "*=", /* "+", */ "+=", ",", /* "-", */ "-=",
+ "->", /*".", "..", "...", handled below */ "/", "/=", ":", "::", ";",
+ "<", "<<", "<<=", "<=", "=", "==", "===", ">",
+ ">=", ">>", ">>=", ">>>", ">>>=", "?", "@", "[",
+ "^", "^=", "^^", "^^=", "{", "|", "|=", "||",
+ "||=", "~" /* handles =~ and !~ */,
+ "break", "case", "continue", "delete",
+ "do", "else", "finally", "instanceof",
+ "return", "throw", "try", "typeof"
+ ];
+ var pattern = '(?:^^|[+-]';
+ for (var i = 0; i < preceders.length; ++i) {
+ pattern += '|' + preceders[i].replace(/([^=<>:&a-z])/g, '\\$1');
+ }
+ pattern += ')\\s*'; // matches at end, and matches empty string
+ return pattern;
+ // CAVEAT: this does not properly handle the case where a regular
+ // expression immediately follows another since a regular expression may
+ // have flags for case-sensitivity and the like. Having regexp tokens
+ // adjacent is not valid in any language I'm aware of, so I'm punting.
+ // TODO: maybe style special characters inside a regexp as punctuation.
+ }();
+
+ // Define regexps here so that the interpreter doesn't have to create an
+ // object each time the function containing them is called.
+ // The language spec requires a new object created even if you don't access
+ // the $1 members.
+ var pr_amp = /&/g;
+ var pr_lt = /</g;
+ var pr_gt = />/g;
+ var pr_quot = /\"/g;
+ /** like textToHtml but escapes double quotes to be attribute safe. */
+ function attribToHtml(str) {
+ return str.replace(pr_amp, '&amp;')
+ .replace(pr_lt, '&lt;')
+ .replace(pr_gt, '&gt;')
+ .replace(pr_quot, '&quot;');
+ }
+
+ /** escapest html special characters to html. */
+ function textToHtml(str) {
+ return str.replace(pr_amp, '&amp;')
+ .replace(pr_lt, '&lt;')
+ .replace(pr_gt, '&gt;');
+ }
+
+
+ var pr_ltEnt = /&lt;/g;
+ var pr_gtEnt = /&gt;/g;
+ var pr_aposEnt = /&apos;/g;
+ var pr_quotEnt = /&quot;/g;
+ var pr_ampEnt = /&amp;/g;
+ var pr_nbspEnt = /&nbsp;/g;
+ /** unescapes html to plain text. */
+ function htmlToText(html) {
+ var pos = html.indexOf('&');
+ if (pos < 0) { return html; }
+ // Handle numeric entities specially. We can't use functional substitution
+ // since that doesn't work in older versions of Safari.
+ // These should be rare since most browsers convert them to normal chars.
+ for (--pos; (pos = html.indexOf('&#', pos + 1)) >= 0;) {
+ var end = html.indexOf(';', pos);
+ if (end >= 0) {
+ var num = html.substring(pos + 3, end);
+ var radix = 10;
+ if (num && num.charAt(0) === 'x') {
+ num = num.substring(1);
+ radix = 16;
+ }
+ var codePoint = parseInt(num, radix);
+ if (!isNaN(codePoint)) {
+ html = (html.substring(0, pos) + String.fromCharCode(codePoint) +
+ html.substring(end + 1));
+ }
+ }
+ }
+
+ return html.replace(pr_ltEnt, '<')
+ .replace(pr_gtEnt, '>')
+ .replace(pr_aposEnt, "'")
+ .replace(pr_quotEnt, '"')
+ .replace(pr_nbspEnt, ' ')
+ .replace(pr_ampEnt, '&');
+ }
+
+ /** is the given node's innerHTML normally unescaped? */
+ function isRawContent(node) {
+ return 'XMP' === node.tagName;
+ }
+
+ var newlineRe = /[\r\n]/g;
+ /**
+ * Are newlines and adjacent spaces significant in the given node's innerHTML?
+ */
+ function isPreformatted(node, content) {
+ // PRE means preformatted, and is a very common case, so don't create
+ // unnecessary computed style objects.
+ if ('PRE' === node.tagName) { return true; }
+ if (!newlineRe.test(content)) { return true; } // Don't care
+ var whitespace = '';
+ // For disconnected nodes, IE has no currentStyle.
+ if (node.currentStyle) {
+ whitespace = node.currentStyle.whiteSpace;
+ } else if (window.getComputedStyle) {
+ // Firefox makes a best guess if node is disconnected whereas Safari
+ // returns the empty string.
+ whitespace = window.getComputedStyle(node, null).whiteSpace;
+ }
+ return !whitespace || whitespace === 'pre';
+ }
+
+ function normalizedHtml(node, out, opt_sortAttrs) {
+ switch (node.nodeType) {
+ case 1: // an element
+ var name = node.tagName.toLowerCase();
+
+ out.push('<', name);
+ var attrs = node.attributes;
+ var n = attrs.length;
+ if (n) {
+ if (opt_sortAttrs) {
+ var sortedAttrs = [];
+ for (var i = n; --i >= 0;) { sortedAttrs[i] = attrs[i]; }
+ sortedAttrs.sort(function (a, b) {
+ return (a.name < b.name) ? -1 : a.name === b.name ? 0 : 1;
+ });
+ attrs = sortedAttrs;
+ }
+ for (var i = 0; i < n; ++i) {
+ var attr = attrs[i];
+ if (!attr.specified) { continue; }
+ out.push(' ', attr.name.toLowerCase(),
+ '="', attribToHtml(attr.value), '"');
+ }
+ }
+ out.push('>');
+ for (var child = node.firstChild; child; child = child.nextSibling) {
+ normalizedHtml(child, out, opt_sortAttrs);
+ }
+ if (node.firstChild || !/^(?:br|link|img)$/.test(name)) {
+ out.push('<\/', name, '>');
+ }
+ break;
+ case 3: case 4: // text
+ out.push(textToHtml(node.nodeValue));
+ break;
+ }
+ }
+
+ /**
+ * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
+ * matches the union o the sets o strings matched d by the input RegExp.
+ * Since it matches globally, if the input strings have a start-of-input
+ * anchor (/^.../), it is ignored for the purposes of unioning.
+ * @param {Array.<RegExp>} regexs non multiline, non-global regexs.
+ * @return {RegExp} a global regex.
+ */
+ function combinePrefixPatterns(regexs) {
+ var capturedGroupIndex = 0;
+
+ var needToFoldCase = false;
+ var ignoreCase = false;
+ for (var i = 0, n = regexs.length; i < n; ++i) {
+ var regex = regexs[i];
+ if (regex.ignoreCase) {
+ ignoreCase = true;
+ } else if (/[a-z]/i.test(regex.source.replace(
+ /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
+ needToFoldCase = true;
+ ignoreCase = false;
+ break;
+ }
+ }
+
+ function decodeEscape(charsetPart) {
+ if (charsetPart.charAt(0) !== '\\') { return charsetPart.charCodeAt(0); }
+ switch (charsetPart.charAt(1)) {
+ case 'b': return 8;
+ case 't': return 9;
+ case 'n': return 0xa;
+ case 'v': return 0xb;
+ case 'f': return 0xc;
+ case 'r': return 0xd;
+ case 'u': case 'x':
+ return parseInt(charsetPart.substring(2), 16)
+ || charsetPart.charCodeAt(1);
+ case '0': case '1': case '2': case '3': case '4':
+ case '5': case '6': case '7':
+ return parseInt(charsetPart.substring(1), 8);
+ default: return charsetPart.charCodeAt(1);
+ }
+ }
+
+ function encodeEscape(charCode) {
+ if (charCode < 0x20) {
+ return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
+ }
+ var ch = String.fromCharCode(charCode);
+ if (ch === '\\' || ch === '-' || ch === '[' || ch === ']') {
+ ch = '\\' + ch;
+ }
+ return ch;
+ }
+
+ function caseFoldCharset(charSet) {
+ var charsetParts = charSet.substring(1, charSet.length - 1).match(
+ new RegExp(
+ '\\\\u[0-9A-Fa-f]{4}'
+ + '|\\\\x[0-9A-Fa-f]{2}'
+ + '|\\\\[0-3][0-7]{0,2}'
+ + '|\\\\[0-7]{1,2}'
+ + '|\\\\[\\s\\S]'
+ + '|-'
+ + '|[^-\\\\]',
+ 'g'));
+ var groups = [];
+ var ranges = [];
+ var inverse = charsetParts[0] === '^';
+ for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
+ var p = charsetParts[i];
+ switch (p) {
+ case '\\B': case '\\b':
+ case '\\D': case '\\d':
+ case '\\S': case '\\s':
+ case '\\W': case '\\w':
+ groups.push(p);
+ continue;
+ }
+ var start = decodeEscape(p);
+ var end;
+ if (i + 2 < n && '-' === charsetParts[i + 1]) {
+ end = decodeEscape(charsetParts[i + 2]);
+ i += 2;
+ } else {
+ end = start;
+ }
+ ranges.push([start, end]);
+ // If the range might intersect letters, then expand it.
+ if (!(end < 65 || start > 122)) {
+ if (!(end < 65 || start > 90)) {
+ ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
+ }
+ if (!(end < 97 || start > 122)) {
+ ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
+ }
+ }
+ }
+
+ // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
+ // -> [[1, 12], [14, 14], [16, 17]]
+ ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1] - a[1]); });
+ var consolidatedRanges = [];
+ var lastRange = [NaN, NaN];
+ for (var i = 0; i < ranges.length; ++i) {
+ var range = ranges[i];
+ if (range[0] <= lastRange[1] + 1) {
+ lastRange[1] = Math.max(lastRange[1], range[1]);
+ } else {
+ consolidatedRanges.push(lastRange = range);
+ }
+ }
+
+ var out = ['['];
+ if (inverse) { out.push('^'); }
+ out.push.apply(out, groups);
+ for (var i = 0; i < consolidatedRanges.length; ++i) {
+ var range = consolidatedRanges[i];
+ out.push(encodeEscape(range[0]));
+ if (range[1] > range[0]) {
+ if (range[1] + 1 > range[0]) { out.push('-'); }
+ out.push(encodeEscape(range[1]));
+ }
+ }
+ out.push(']');
+ return out.join('');
+ }
+
+ function allowAnywhereFoldCaseAndRenumberGroups(regex) {
+ // Split into character sets, escape sequences, punctuation strings
+ // like ('(', '(?:', ')', '^'), and runs of characters that do not
+ // include any of the above.
+ var parts = regex.source.match(
+ new RegExp(
+ '(?:'
+ + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]' // a character set
+ + '|\\\\u[A-Fa-f0-9]{4}' // a unicode escape
+ + '|\\\\x[A-Fa-f0-9]{2}' // a hex escape
+ + '|\\\\[0-9]+' // a back-reference or octal escape
+ + '|\\\\[^ux0-9]' // other escape sequence
+ + '|\\(\\?[:!=]' // start of a non-capturing group
+ + '|[\\(\\)\\^]' // start/emd of a group, or line start
+ + '|[^\\x5B\\x5C\\(\\)\\^]+' // run of other characters
+ + ')',
+ 'g'));
+ var n = parts.length;
+
+ // Maps captured group numbers to the number they will occupy in
+ // the output or to -1 if that has not been determined, or to
+ // undefined if they need not be capturing in the output.
+ var capturedGroups = [];
+
+ // Walk over and identify back references to build the capturedGroups
+ // mapping.
+ for (var i = 0, groupIndex = 0; i < n; ++i) {
+ var p = parts[i];
+ if (p === '(') {
+ // groups are 1-indexed, so max group index is count of '('
+ ++groupIndex;
+ } else if ('\\' === p.charAt(0)) {
+ var decimalValue = +p.substring(1);
+ if (decimalValue && decimalValue <= groupIndex) {
+ capturedGroups[decimalValue] = -1;
+ }
+ }
+ }
+
+ // Renumber groups and reduce capturing groups to non-capturing groups
+ // where possible.
+ for (var i = 1; i < capturedGroups.length; ++i) {
+ if (-1 === capturedGroups[i]) {
+ capturedGroups[i] = ++capturedGroupIndex;
+ }
+ }
+ for (var i = 0, groupIndex = 0; i < n; ++i) {
+ var p = parts[i];
+ if (p === '(') {
+ ++groupIndex;
+ if (capturedGroups[groupIndex] === undefined) {
+ parts[i] = '(?:';
+ }
+ } else if ('\\' === p.charAt(0)) {
+ var decimalValue = +p.substring(1);
+ if (decimalValue && decimalValue <= groupIndex) {
+ parts[i] = '\\' + capturedGroups[groupIndex];
+ }
+ }
+ }
+
+ // Remove any prefix anchors so that the output will match anywhere.
+ // ^^ really does mean an anchored match though.
+ for (var i = 0, groupIndex = 0; i < n; ++i) {
+ if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
+ }
+
+ // Expand letters to groupts to handle mixing of case-sensitive and
+ // case-insensitive patterns if necessary.
+ if (regex.ignoreCase && needToFoldCase) {
+ for (var i = 0; i < n; ++i) {
+ var p = parts[i];
+ var ch0 = p.charAt(0);
+ if (p.length >= 2 && ch0 === '[') {
+ parts[i] = caseFoldCharset(p);
+ } else if (ch0 !== '\\') {
+ // TODO: handle letters in numeric escapes.
+ parts[i] = p.replace(
+ /[a-zA-Z]/g,
+ function (ch) {
+ var cc = ch.charCodeAt(0);
+ return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
+ });
+ }
+ }
+ }
+
+ return parts.join('');
+ }
+
+ var rewritten = [];
+ for (var i = 0, n = regexs.length; i < n; ++i) {
+ var regex = regexs[i];
+ if (regex.global || regex.multiline) { throw new Error('' + regex); }
+ rewritten.push(
+ '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
+ }
+
+ return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
+ }
+
+ var PR_innerHtmlWorks = null;
+ function getInnerHtml(node) {
+ // inner html is hopelessly broken in Safari 2.0.4 when the content is
+ // an html description of well formed XML and the containing tag is a PRE
+ // tag, so we detect that case and emulate innerHTML.
+ if (null === PR_innerHtmlWorks) {
+ var testNode = document.createElement('PRE');
+ testNode.appendChild(
+ document.createTextNode('<!DOCTYPE foo PUBLIC "foo bar">\n<foo />'));
+ PR_innerHtmlWorks = !/</.test(testNode.innerHTML);
+ }
+
+ if (PR_innerHtmlWorks) {
+ var content = node.innerHTML;
+ // XMP tags contain unescaped entities so require special handling.
+ if (isRawContent(node)) {
+ content = textToHtml(content);
+ } else if (!isPreformatted(node, content)) {
+ content = content.replace(/(<br\s*\/?>)[\r\n]+/g, '$1')
+ .replace(/(?:[\r\n]+[ \t]*)+/g, ' ');
+ }
+ return content;
+ }
+
+ var out = [];
+ for (var child = node.firstChild; child; child = child.nextSibling) {
+ normalizedHtml(child, out);
+ }
+ return out.join('');
+ }
+
+ /** returns a function that expand tabs to spaces. This function can be fed
+ * successive chunks of text, and will maintain its own internal state to
+ * keep track of how tabs are expanded.
+ * @return {function (string) : string} a function that takes
+ * plain text and return the text with tabs expanded.
+ * @private
+ */
+ function makeTabExpander(tabWidth) {
+ var SPACES = ' ';
+ var charInLine = 0;
+
+ return function (plainText) {
+ // walk over each character looking for tabs and newlines.
+ // On tabs, expand them. On newlines, reset charInLine.
+ // Otherwise increment charInLine
+ var out = null;
+ var pos = 0;
+ for (var i = 0, n = plainText.length; i < n; ++i) {
+ var ch = plainText.charAt(i);
+
+ switch (ch) {
+ case '\t':
+ if (!out) { out = []; }
+ out.push(plainText.substring(pos, i));
+ // calculate how much space we need in front of this part
+ // nSpaces is the amount of padding -- the number of spaces needed
+ // to move us to the next column, where columns occur at factors of
+ // tabWidth.
+ var nSpaces = tabWidth - (charInLine % tabWidth);
+ charInLine += nSpaces;
+ for (; nSpaces >= 0; nSpaces -= SPACES.length) {
+ out.push(SPACES.substring(0, nSpaces));
+ }
+ pos = i + 1;
+ break;
+ case '\n':
+ charInLine = 0;
+ break;
+ default:
+ ++charInLine;
+ }
+ }
+ if (!out) { return plainText; }
+ out.push(plainText.substring(pos));
+ return out.join('');
+ };
+ }
+
+ var pr_chunkPattern = new RegExp(
+ '[^<]+' // A run of characters other than '<'
+ + '|<\!--[\\s\\S]*?--\>' // an HTML comment
+ + '|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>' // a CDATA section
+ // a probable tag that should not be highlighted
+ + '|<\/?[a-zA-Z](?:[^>\"\']|\'[^\']*\'|\"[^\"]*\")*>'
+ + '|<', // A '<' that does not begin a larger chunk
+ 'g');
+ var pr_commentPrefix = /^<\!--/;
+ var pr_cdataPrefix = /^<!\[CDATA\[/;
+ var pr_brPrefix = /^<br\b/i;
+ var pr_tagNameRe = /^<(\/?)([a-zA-Z][a-zA-Z0-9]*)/;
+
+ /** split markup into chunks of html tags (style null) and
+ * plain text (style {@link #PR_PLAIN}), converting tags which are
+ * significant for tokenization (<br>) into their textual equivalent.
+ *
+ * @param {string} s html where whitespace is considered significant.
+ * @return {Object} source code and extracted tags.
+ * @private
+ */
+ function extractTags(s) {
+ // since the pattern has the 'g' modifier and defines no capturing groups,
+ // this will return a list of all chunks which we then classify and wrap as
+ // PR_Tokens
+ var matches = s.match(pr_chunkPattern);
+ var sourceBuf = [];
+ var sourceBufLen = 0;
+ var extractedTags = [];
+ if (matches) {
+ for (var i = 0, n = matches.length; i < n; ++i) {
+ var match = matches[i];
+ if (match.length > 1 && match.charAt(0) === '<') {
+ if (pr_commentPrefix.test(match)) { continue; }
+ if (pr_cdataPrefix.test(match)) {
+ // strip CDATA prefix and suffix. Don't unescape since it's CDATA
+ sourceBuf.push(match.substring(9, match.length - 3));
+ sourceBufLen += match.length - 12;
+ } else if (pr_brPrefix.test(match)) {
+ // <br> tags are lexically significant so convert them to text.
+ // This is undone later.
+ sourceBuf.push('\n');
+ ++sourceBufLen;
+ } else {
+ if (match.indexOf(PR_NOCODE) >= 0 && isNoCodeTag(match)) {
+ // A <span class="nocode"> will start a section that should be
+ // ignored. Continue walking the list until we see a matching end
+ // tag.
+ var name = match.match(pr_tagNameRe)[2];
+ var depth = 1;
+ var j;
+ end_tag_loop:
+ for (j = i + 1; j < n; ++j) {
+ var name2 = matches[j].match(pr_tagNameRe);
+ if (name2 && name2[2] === name) {
+ if (name2[1] === '/') {
+ if (--depth === 0) { break end_tag_loop; }
+ } else {
+ ++depth;
+ }
+ }
+ }
+ if (j < n) {
+ extractedTags.push(
+ sourceBufLen, matches.slice(i, j + 1).join(''));
+ i = j;
+ } else { // Ignore unclosed sections.
+ extractedTags.push(sourceBufLen, match);
+ }
+ } else {
+ extractedTags.push(sourceBufLen, match);
+ }
+ }
+ } else {
+ var literalText = htmlToText(match);
+ sourceBuf.push(literalText);
+ sourceBufLen += literalText.length;
+ }
+ }
+ }
+ return { source: sourceBuf.join(''), tags: extractedTags };
+ }
+
+ /** True if the given tag contains a class attribute with the nocode class. */
+ function isNoCodeTag(tag) {
+ return !!tag
+ // First canonicalize the representation of attributes
+ .replace(/\s(\w+)\s*=\s*(?:\"([^\"]*)\"|'([^\']*)'|(\S+))/g,
+ ' $1="$2$3$4"')
+ // Then look for the attribute we want.
+ .match(/[cC][lL][aA][sS][sS]=\"[^\"]*\bnocode\b/);
+ }
+
+ /**
+ * Apply the given language handler to sourceCode and add the resulting
+ * decorations to out.
+ * @param {number} basePos the index of sourceCode within the chunk of source
+ * whose decorations are already present on out.
+ */
+ function appendDecorations(basePos, sourceCode, langHandler, out) {
+ if (!sourceCode) { return; }
+ var job = {
+ source: sourceCode,
+ basePos: basePos
+ };
+ langHandler(job);
+ out.push.apply(out, job.decorations);
+ }
+
+ /** Given triples of [style, pattern, context] returns a lexing function,
+ * The lexing function interprets the patterns to find token boundaries and
+ * returns a decoration list of the form
+ * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
+ * where index_n is an index into the sourceCode, and style_n is a style
+ * constant like PR_PLAIN. index_n-1 <= index_n, and style_n-1 applies to
+ * all characters in sourceCode[index_n-1:index_n].
+ *
+ * The stylePatterns is a list whose elements have the form
+ * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
+ *
+ * Style is a style constant like PR_PLAIN, or can be a string of the
+ * form 'lang-FOO', where FOO is a language extension describing the
+ * language of the portion of the token in $1 after pattern executes.
+ * E.g., if style is 'lang-lisp', and group 1 contains the text
+ * '(hello (world))', then that portion of the token will be passed to the
+ * registered lisp handler for formatting.
+ * The text before and after group 1 will be restyled using this decorator
+ * so decorators should take care that this doesn't result in infinite
+ * recursion. For example, the HTML lexer rule for SCRIPT elements looks
+ * something like ['lang-js', /<[s]cript>(.+?)<\/script>/]. This may match
+ * '<script>foo()<\/script>', which would cause the current decorator to
+ * be called with '<script>' which would not match the same rule since
+ * group 1 must not be empty, so it would be instead styled as PR_TAG by
+ * the generic tag rule. The handler registered for the 'js' extension would
+ * then be called with 'foo()', and finally, the current decorator would
+ * be called with '<\/script>' which would not match the original rule and
+ * so the generic tag rule would identify it as a tag.
+ *
+ * Pattern must only match prefixes, and if it matches a prefix, then that
+ * match is considered a token with the same style.
+ *
+ * Context is applied to the last non-whitespace, non-comment token
+ * recognized.
+ *
+ * Shortcut is an optional string of characters, any of which, if the first
+ * character, gurantee that this pattern and only this pattern matches.
+ *
+ * @param {Array} shortcutStylePatterns patterns that always start with
+ * a known character. Must have a shortcut string.
+ * @param {Array} fallthroughStylePatterns patterns that will be tried in
+ * order if the shortcut ones fail. May have shortcuts.
+ *
+ * @return {function (Object)} a
+ * function that takes source code and returns a list of decorations.
+ */
+ function createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns) {
+ var shortcuts = {};
+ var tokenizer;
+ (function () {
+ var allPatterns = shortcutStylePatterns.concat(fallthroughStylePatterns);
+ var allRegexs = [];
+ var regexKeys = {};
+ for (var i = 0, n = allPatterns.length; i < n; ++i) {
+ var patternParts = allPatterns[i];
+ var shortcutChars = patternParts[3];
+ if (shortcutChars) {
+ for (var c = shortcutChars.length; --c >= 0;) {
+ shortcuts[shortcutChars.charAt(c)] = patternParts;
+ }
+ }
+ var regex = patternParts[1];
+ var k = '' + regex;
+ if (!regexKeys.hasOwnProperty(k)) {
+ allRegexs.push(regex);
+ regexKeys[k] = null;
+ }
+ }
+ allRegexs.push(/[\0-\uffff]/);
+ tokenizer = combinePrefixPatterns(allRegexs);
+ })();
+
+ var nPatterns = fallthroughStylePatterns.length;
+ var notWs = /\S/;
+
+ /**
+ * Lexes job.source and produces an output array job.decorations of style
+ * classes preceded by the position at which they start in job.source in
+ * order.
+ *
+ * @param {Object} job an object like {@code
+ * source: {string} sourceText plain text,
+ * basePos: {int} position of job.source in the larger chunk of
+ * sourceCode.
+ * }
+ */
+ var decorate = function (job) {
+ var sourceCode = job.source, basePos = job.basePos;
+ /** Even entries are positions in source in ascending order. Odd enties
+ * are style markers (e.g., PR_COMMENT) that run from that position until
+ * the end.
+ * @type {Array.<number|string>}
+ */
+ var decorations = [basePos, PR_PLAIN];
+ var pos = 0; // index into sourceCode
+ var tokens = sourceCode.match(tokenizer) || [];
+ var styleCache = {};
+
+ for (var ti = 0, nTokens = tokens.length; ti < nTokens; ++ti) {
+ var token = tokens[ti];
+ var style = styleCache[token];
+ var match = void 0;
+
+ var isEmbedded;
+ if (typeof style === 'string') {
+ isEmbedded = false;
+ } else {
+ var patternParts = shortcuts[token.charAt(0)];
+ if (patternParts) {
+ match = token.match(patternParts[1]);
+ style = patternParts[0];
+ } else {
+ for (var i = 0; i < nPatterns; ++i) {
+ patternParts = fallthroughStylePatterns[i];
+ match = token.match(patternParts[1]);
+ if (match) {
+ style = patternParts[0];
+ break;
+ }
+ }
+
+ if (!match) { // make sure that we make progress
+ style = PR_PLAIN;
+ }
+ }
+
+ isEmbedded = style.length >= 5 && 'lang-' === style.substring(0, 5);
+ if (isEmbedded && !(match && typeof match[1] === 'string')) {
+ isEmbedded = false;
+ style = PR_SOURCE;
+ }
+
+ if (!isEmbedded) { styleCache[token] = style; }
+ }
+
+ var tokenStart = pos;
+ pos += token.length;
+
+ if (!isEmbedded) {
+ decorations.push(basePos + tokenStart, style);
+ } else { // Treat group 1 as an embedded block of source code.
+ var embeddedSource = match[1];
+ var embeddedSourceStart = token.indexOf(embeddedSource);
+ var embeddedSourceEnd = embeddedSourceStart + embeddedSource.length;
+ if (match[2]) {
+ // If embeddedSource can be blank, then it would match at the
+ // beginning which would cause us to infinitely recurse on the
+ // entire token, so we catch the right context in match[2].
+ embeddedSourceEnd = token.length - match[2].length;
+ embeddedSourceStart = embeddedSourceEnd - embeddedSource.length;
+ }
+ var lang = style.substring(5);
+ // Decorate the left of the embedded source
+ appendDecorations(
+ basePos + tokenStart,
+ token.substring(0, embeddedSourceStart),
+ decorate, decorations);
+ // Decorate the embedded source
+ appendDecorations(
+ basePos + tokenStart + embeddedSourceStart,
+ embeddedSource,
+ langHandlerForExtension(lang, embeddedSource),
+ decorations);
+ // Decorate the right of the embedded section
+ appendDecorations(
+ basePos + tokenStart + embeddedSourceEnd,
+ token.substring(embeddedSourceEnd),
+ decorate, decorations);
+ }
+ }
+ job.decorations = decorations;
+ };
+ return decorate;
+ }
+
+ /** returns a function that produces a list of decorations from source text.
+ *
+ * This code treats ", ', and ` as string delimiters, and \ as a string
+ * escape. It does not recognize perl's qq() style strings.
+ * It has no special handling for double delimiter escapes as in basic, or
+ * the tripled delimiters used in python, but should work on those regardless
+ * although in those cases a single string literal may be broken up into
+ * multiple adjacent string literals.
+ *
+ * It recognizes C, C++, and shell style comments.
+ *
+ * @param {Object} options a set of optional parameters.
+ * @return {function (Object)} a function that examines the source code
+ * in the input job and builds the decoration list.
+ */
+ function sourceDecorator(options) {
+ var shortcutStylePatterns = [], fallthroughStylePatterns = [];
+ if (options['tripleQuotedStrings']) {
+ // '''multi-line-string''', 'single-line-string', and double-quoted
+ shortcutStylePatterns.push(
+ [PR_STRING, /^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+ null, '\'"']);
+ } else if (options['multiLineStrings']) {
+ // 'multi-line-string', "multi-line-string"
+ shortcutStylePatterns.push(
+ [PR_STRING, /^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,
+ null, '\'"`']);
+ } else {
+ // 'single-line-string', "single-line-string"
+ shortcutStylePatterns.push(
+ [PR_STRING,
+ /^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,
+ null, '"\'']);
+ }
+ if (options['verbatimStrings']) {
+ // verbatim-string-literal production from the C# grammar. See issue 93.
+ fallthroughStylePatterns.push(
+ [PR_STRING, /^@\"(?:[^\"]|\"\")*(?:\"|$)/, null]);
+ }
+ if (options['hashComments']) {
+ if (options['cStyleComments']) {
+ // Stop C preprocessor declarations at an unclosed open comment
+ shortcutStylePatterns.push(
+ [PR_COMMENT, /^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\r\n]*)/,
+ null, '#']);
+ fallthroughStylePatterns.push(
+ [PR_STRING,
+ /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,
+ null]);
+ } else {
+ shortcutStylePatterns.push([PR_COMMENT, /^#[^\r\n]*/, null, '#']);
+ }
+ }
+ if (options['cStyleComments']) {
+ fallthroughStylePatterns.push([PR_COMMENT, /^\/\/[^\r\n]*/, null]);
+ fallthroughStylePatterns.push(
+ [PR_COMMENT, /^\/\*[\s\S]*?(?:\*\/|$)/, null]);
+ }
+ if (options['regexLiterals']) {
+ var REGEX_LITERAL = (
+ // A regular expression literal starts with a slash that is
+ // not followed by * or / so that it is not confused with
+ // comments.
+ '/(?=[^/*])'
+ // and then contains any number of raw characters,
+ + '(?:[^/\\x5B\\x5C]'
+ // escape sequences (\x5C),
+ + '|\\x5C[\\s\\S]'
+ // or non-nesting character sets (\x5B\x5D);
+ + '|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+'
+ // finally closed by a /.
+ + '/');
+ fallthroughStylePatterns.push(
+ ['lang-regex',
+ new RegExp('^' + REGEXP_PRECEDER_PATTERN + '(' + REGEX_LITERAL + ')')
+ ]);
+ }
+
+ var keywords = options['keywords'].replace(/^\s+|\s+$/g, '');
+ if (keywords.length) {
+ fallthroughStylePatterns.push(
+ [PR_KEYWORD,
+ new RegExp('^(?:' + keywords.replace(/\s+/g, '|') + ')\\b'), null]);
+ }
+
+ shortcutStylePatterns.push([PR_PLAIN, /^\s+/, null, ' \r\n\t\xA0']);
+ fallthroughStylePatterns.push(
+ // TODO(mikesamuel): recognize non-latin letters and numerals in idents
+ [PR_LITERAL, /^@[a-z_$][a-z_$@0-9]*/i, null],
+ [PR_TYPE, /^@?[A-Z]+[a-z][A-Za-z_$@0-9]*/, null],
+ [PR_PLAIN, /^[a-z_$][a-z_$@0-9]*/i, null],
+ [PR_LITERAL,
+ new RegExp(
+ '^(?:'
+ // A hex number
+ + '0x[a-f0-9]+'
+ // or an octal or decimal number,
+ + '|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)'
+ // possibly in scientific notation
+ + '(?:e[+\\-]?\\d+)?'
+ + ')'
+ // with an optional modifier like UL for unsigned long
+ + '[a-z]*', 'i'),
+ null, '0123456789'],
+ [PR_PUNCTUATION, /^.[^\s\w\.$@\'\"\`\/\#]*/, null]);
+
+ return createSimpleLexer(shortcutStylePatterns, fallthroughStylePatterns);
+ }
+
+ var decorateSource = sourceDecorator({
+ 'keywords': ALL_KEYWORDS,
+ 'hashComments': true,
+ 'cStyleComments': true,
+ 'multiLineStrings': true,
+ 'regexLiterals': true
+ });
+
+ /** Breaks {@code job.source} around style boundaries in
+ * {@code job.decorations} while re-interleaving {@code job.extractedTags},
+ * and leaves the result in {@code job.prettyPrintedHtml}.
+ * @param {Object} job like {
+ * source: {string} source as plain text,
+ * extractedTags: {Array.<number|string>} extractedTags chunks of raw
+ * html preceded by their position in {@code job.source}
+ * in order
+ * decorations: {Array.<number|string} an array of style classes preceded
+ * by the position at which they start in job.source in order
+ * }
+ * @private
+ */
+ function recombineTagsAndDecorations(job) {
+ var sourceText = job.source;
+ var extractedTags = job.extractedTags;
+ var decorations = job.decorations;
+
+ var html = [];
+ // index past the last char in sourceText written to html
+ var outputIdx = 0;
+
+ var openDecoration = null;
+ var currentDecoration = null;
+ var tagPos = 0; // index into extractedTags
+ var decPos = 0; // index into decorations
+ var tabExpander = makeTabExpander(window['PR_TAB_WIDTH']);
+
+ var adjacentSpaceRe = /([\r\n ]) /g;
+ var startOrSpaceRe = /(^| ) /gm;
+ var newlineRe = /\r\n?|\n/g;
+ var trailingSpaceRe = /[ \r\n]$/;
+ var lastWasSpace = true; // the last text chunk emitted ended with a space.
+
+ // See bug 71 and http://stackoverflow.com/questions/136443/why-doesnt-ie7-
+ var isIE678 = window['_pr_isIE6']();
+ var lineBreakHtml = (
+ isIE678
+ ? (job.sourceNode.tagName === 'PRE'
+ // Use line feeds instead of <br>s so that copying and pasting works
+ // on IE.
+ // Doing this on other browsers breaks lots of stuff since \r\n is
+ // treated as two newlines on Firefox.
+ ? (isIE678 === 6 ? '&#160;\r\n' :
+ isIE678 === 7 ? '&#160;<br>\r' : '&#160;\r')
+ // IE collapses multiple adjacent <br>s into 1 line break.
+ // Prefix every newline with '&#160;' to prevent such behavior.
+ // &nbsp; is the same as &#160; but works in XML as well as HTML.
+ : '&#160;<br />')
+ : '<br />');
+
+ // Look for a class like linenums or linenums:<n> where <n> is the 1-indexed
+ // number of the first line.
+ var numberLines = job.sourceNode.className.match(/\blinenums\b(?::(\d+))?/);
+ var lineBreaker;
+ if (numberLines) {
+ var lineBreaks = [];
+ for (var i = 0; i < 10; ++i) {
+ lineBreaks[i] = lineBreakHtml + '</li><li class="L' + i + '">';
+ }
+ var lineNum = numberLines[1] && numberLines[1].length
+ ? numberLines[1] - 1 : 0; // Lines are 1-indexed
+ html.push('<ol class="linenums"><li class="L', (lineNum) % 10, '"');
+ if (lineNum) {
+ html.push(' value="', lineNum + 1, '"');
+ }
+ html.push('>');
+ lineBreaker = function () {
+ var lb = lineBreaks[++lineNum % 10];
+ // If a decoration is open, we need to close it before closing a list-item
+ // and reopen it on the other side of the list item.
+ return openDecoration
+ ? ('</span>' + lb + '<span class="' + openDecoration + '">') : lb;
+ };
+ } else {
+ lineBreaker = lineBreakHtml;
+ }
+
+ // A helper function that is responsible for opening sections of decoration
+ // and outputing properly escaped chunks of source
+ function emitTextUpTo(sourceIdx) {
+ if (sourceIdx > outputIdx) {
+ if (openDecoration && openDecoration !== currentDecoration) {
+ // Close the current decoration
+ html.push('</span>');
+ openDecoration = null;
+ }
+ if (!openDecoration && currentDecoration) {
+ openDecoration = currentDecoration;
+ html.push('<span class="', openDecoration, '">');
+ }
+ // This interacts badly with some wikis which introduces paragraph tags
+ // into pre blocks for some strange reason.
+ // It's necessary for IE though which seems to lose the preformattedness
+ // of <pre> tags when their innerHTML is assigned.
+ // http://stud3.tuwien.ac.at/~e0226430/innerHtmlQuirk.html
+ // and it serves to undo the conversion of <br>s to newlines done in
+ // chunkify.
+ var htmlChunk = textToHtml(
+ tabExpander(sourceText.substring(outputIdx, sourceIdx)))
+ .replace(lastWasSpace
+ ? startOrSpaceRe
+ : adjacentSpaceRe, '$1&#160;');
+ // Keep track of whether we need to escape space at the beginning of the
+ // next chunk.
+ lastWasSpace = trailingSpaceRe.test(htmlChunk);
+ html.push(htmlChunk.replace(newlineRe, lineBreaker));
+ outputIdx = sourceIdx;
+ }
+ }
+
+ while (true) {
+ // Determine if we're going to consume a tag this time around. Otherwise
+ // we consume a decoration or exit.
+ var outputTag;
+ if (tagPos < extractedTags.length) {
+ if (decPos < decorations.length) {
+ // Pick one giving preference to extractedTags since we shouldn't open
+ // a new style that we're going to have to immediately close in order
+ // to output a tag.
+ outputTag = extractedTags[tagPos] <= decorations[decPos];
+ } else {
+ outputTag = true;
+ }
+ } else {
+ outputTag = false;
+ }
+ // Consume either a decoration or a tag or exit.
+ if (outputTag) {
+ emitTextUpTo(extractedTags[tagPos]);
+ if (openDecoration) {
+ // Close the current decoration
+ html.push('</span>');
+ openDecoration = null;
+ }
+ html.push(extractedTags[tagPos + 1]);
+ tagPos += 2;
+ } else if (decPos < decorations.length) {
+ emitTextUpTo(decorations[decPos]);
+ currentDecoration = decorations[decPos + 1];
+ decPos += 2;
+ } else {
+ break;
+ }
+ }
+ emitTextUpTo(sourceText.length);
+ if (openDecoration) {
+ html.push('</span>');
+ }
+ if (numberLines) { html.push('</li></ol>'); }
+ job.prettyPrintedHtml = html.join('');
+ }
+
+ /** Maps language-specific file extensions to handlers. */
+ var langHandlerRegistry = {};
+ /** Register a language handler for the given file extensions.
+ * @param {function (Object)} handler a function from source code to a list
+ * of decorations. Takes a single argument job which describes the
+ * state of the computation. The single parameter has the form
+ * {@code {
+ * source: {string} as plain text.
+ * decorations: {Array.<number|string>} an array of style classes
+ * preceded by the position at which they start in
+ * job.source in order.
+ * The language handler should assigned this field.
+ * basePos: {int} the position of source in the larger source chunk.
+ * All positions in the output decorations array are relative
+ * to the larger source chunk.
+ * } }
+ * @param {Array.<string>} fileExtensions
+ */
+ function registerLangHandler(handler, fileExtensions) {
+ for (var i = fileExtensions.length; --i >= 0;) {
+ var ext = fileExtensions[i];
+ if (!langHandlerRegistry.hasOwnProperty(ext)) {
+ langHandlerRegistry[ext] = handler;
+ } else if ('console' in window) {
+ console['warn']('cannot override language handler %s', ext);
+ }
+ }
+ }
+ function langHandlerForExtension(extension, source) {
+ if (!(extension && langHandlerRegistry.hasOwnProperty(extension))) {
+ // Treat it as markup if the first non whitespace character is a < and
+ // the last non-whitespace character is a >.
+ extension = /^\s*</.test(source)
+ ? 'default-markup'
+ : 'default-code';
+ }
+ return langHandlerRegistry[extension];
+ }
+ registerLangHandler(decorateSource, ['default-code']);
+ registerLangHandler(
+ createSimpleLexer(
+ [],
+ [
+ [PR_PLAIN, /^[^<?]+/],
+ [PR_DECLARATION, /^<!\w[^>]*(?:>|$)/],
+ [PR_COMMENT, /^<\!--[\s\S]*?(?:-\->|$)/],
+ // Unescaped content in an unknown language
+ ['lang-', /^<\?([\s\S]+?)(?:\?>|$)/],
+ ['lang-', /^<%([\s\S]+?)(?:%>|$)/],
+ [PR_PUNCTUATION, /^(?:<[%?]|[%?]>)/],
+ ['lang-', /^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],
+ // Unescaped content in javascript. (Or possibly vbscript).
+ ['lang-js', /^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],
+ // Contains unescaped stylesheet content
+ ['lang-css', /^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],
+ ['lang-in.tag', /^(<\/?[a-z][^<>]*>)/i]
+ ]),
+ ['default-markup', 'htm', 'html', 'mxml', 'xhtml', 'xml', 'xsl']);
+ registerLangHandler(
+ createSimpleLexer(
+ [
+ [PR_PLAIN, /^[\s]+/, null, ' \t\r\n'],
+ [PR_ATTRIB_VALUE, /^(?:\"[^\"]*\"?|\'[^\']*\'?)/, null, '\"\'']
+ ],
+ [
+ [PR_TAG, /^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],
+ [PR_ATTRIB_NAME, /^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],
+ ['lang-uq.val', /^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],
+ [PR_PUNCTUATION, /^[=<>\/]+/],
+ ['lang-js', /^on\w+\s*=\s*\"([^\"]+)\"/i],
+ ['lang-js', /^on\w+\s*=\s*\'([^\']+)\'/i],
+ ['lang-js', /^on\w+\s*=\s*([^\"\'>\s]+)/i],
+ ['lang-css', /^style\s*=\s*\"([^\"]+)\"/i],
+ ['lang-css', /^style\s*=\s*\'([^\']+)\'/i],
+ ['lang-css', /^style\s*=\s*([^\"\'>\s]+)/i]
+ ]),
+ ['in.tag']);
+ registerLangHandler(
+ createSimpleLexer([], [[PR_ATTRIB_VALUE, /^[\s\S]+/]]), ['uq.val']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': CPP_KEYWORDS,
+ 'hashComments': true,
+ 'cStyleComments': true
+ }), ['c', 'cc', 'cpp', 'cxx', 'cyc', 'm']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': 'null true false'
+ }), ['json']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': CSHARP_KEYWORDS,
+ 'hashComments': true,
+ 'cStyleComments': true,
+ 'verbatimStrings': true
+ }), ['cs']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': JAVA_KEYWORDS,
+ 'cStyleComments': true
+ }), ['java']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': SH_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true
+ }), ['bsh', 'csh', 'sh']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': PYTHON_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true,
+ 'tripleQuotedStrings': true
+ }), ['cv', 'py']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': PERL_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true,
+ 'regexLiterals': true
+ }), ['perl', 'pl', 'pm']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': RUBY_KEYWORDS,
+ 'hashComments': true,
+ 'multiLineStrings': true,
+ 'regexLiterals': true
+ }), ['rb']);
+ registerLangHandler(sourceDecorator({
+ 'keywords': JSCRIPT_KEYWORDS,
+ 'cStyleComments': true,
+ 'regexLiterals': true
+ }), ['js']);
+ registerLangHandler(
+ createSimpleLexer([], [[PR_STRING, /^[\s\S]+/]]), ['regex']);
+
+ function applyDecorator(job) {
+ var sourceCodeHtml = job.sourceCodeHtml;
+ var opt_langExtension = job.langExtension;
+
+ // Prepopulate output in case processing fails with an exception.
+ job.prettyPrintedHtml = sourceCodeHtml;
+
+ try {
+ // Extract tags, and convert the source code to plain text.
+ var sourceAndExtractedTags = extractTags(sourceCodeHtml);
+ /** Plain text. @type {string} */
+ var source = sourceAndExtractedTags.source;
+ job.source = source;
+ job.basePos = 0;
+
+ /** Even entries are positions in source in ascending order. Odd entries
+ * are tags that were extracted at that position.
+ * @type {Array.<number|string>}
+ */
+ job.extractedTags = sourceAndExtractedTags.tags;
+
+ // Apply the appropriate language handler
+ langHandlerForExtension(opt_langExtension, source)(job);
+ // Integrate the decorations and tags back into the source code to produce
+ // a decorated html string which is left in job.prettyPrintedHtml.
+ recombineTagsAndDecorations(job);
+ } catch (e) {
+ if ('console' in window) {
+ console['log'](e && e['stack'] ? e['stack'] : e);
+ }
+ }
+ }
+
+ function prettyPrintOne(sourceCodeHtml, opt_langExtension) {
+ var job = {
+ sourceCodeHtml: sourceCodeHtml,
+ langExtension: opt_langExtension
+ };
+ applyDecorator(job);
+ return job.prettyPrintedHtml;
+ }
+
+ function prettyPrint(opt_whenDone) {
+ function byTagName(tn) { return document.getElementsByTagName(tn); }
+ // fetch a list of nodes to rewrite
+ var codeSegments = [byTagName('pre'), byTagName('code'), byTagName('xmp')];
+ var elements = [];
+ for (var i = 0; i < codeSegments.length; ++i) {
+ for (var j = 0, n = codeSegments[i].length; j < n; ++j) {
+ elements.push(codeSegments[i][j]);
+ }
+ }
+ codeSegments = null;
+
+ var clock = Date;
+ if (!clock['now']) {
+ clock = { 'now': function () { return (new Date).getTime(); } };
+ }
+
+ // The loop is broken into a series of continuations to make sure that we
+ // don't make the browser unresponsive when rewriting a large page.
+ var k = 0;
+ var prettyPrintingJob;
+
+ function doWork() {
+ var endTime = (window['PR_SHOULD_USE_CONTINUATION'] ?
+ clock.now() + 250 /* ms */ :
+ Infinity);
+ for (; k < elements.length && clock.now() < endTime; k++) {
+ var cs = elements[k];
+ if (cs.className && cs.className.indexOf('prettyprint') >= 0) {
+ // If the classes includes a language extensions, use it.
+ // Language extensions can be specified like
+ // <pre class="prettyprint lang-cpp">
+ // the language extension "cpp" is used to find a language handler as
+ // passed to PR_registerLangHandler.
+ var langExtension = cs.className.match(/\blang-(\w+)\b/);
+ if (langExtension) { langExtension = langExtension[1]; }
+
+ // make sure this is not nested in an already prettified element
+ var nested = false;
+ for (var p = cs.parentNode; p; p = p.parentNode) {
+ if ((p.tagName === 'pre' || p.tagName === 'code' ||
+ p.tagName === 'xmp') &&
+ p.className && p.className.indexOf('prettyprint') >= 0) {
+ nested = true;
+ break;
+ }
+ }
+ if (!nested) {
+ // fetch the content as a snippet of properly escaped HTML.
+ // Firefox adds newlines at the end.
+ var content = getInnerHtml(cs);
+ content = content.replace(/(?:\r\n?|\n)$/, '');
+
+ // do the pretty printing
+ prettyPrintingJob = {
+ sourceCodeHtml: content,
+ langExtension: langExtension,
+ sourceNode: cs
+ };
+ applyDecorator(prettyPrintingJob);
+ replaceWithPrettyPrintedHtml();
+ }
+ }
+ }
+ if (k < elements.length) {
+ // finish up in a continuation
+ setTimeout(doWork, 250);
+ } else if (opt_whenDone) {
+ opt_whenDone();
+ }
+ }
+
+ function replaceWithPrettyPrintedHtml() {
+ var newContent = prettyPrintingJob.prettyPrintedHtml;
+ if (!newContent) { return; }
+ var cs = prettyPrintingJob.sourceNode;
+
+ // push the prettified html back into the tag.
+ if (!isRawContent(cs)) {
+ // just replace the old html with the new
+ cs.innerHTML = newContent;
+ } else {
+ // we need to change the tag to a <pre> since <xmp>s do not allow
+ // embedded tags such as the span tags used to attach styles to
+ // sections of source code.
+ var pre = document.createElement('PRE');
+ for (var i = 0; i < cs.attributes.length; ++i) {
+ var a = cs.attributes[i];
+ if (a.specified) {
+ var aname = a.name.toLowerCase();
+ if (aname === 'class') {
+ pre.className = a.value; // For IE 6
+ } else {
+ pre.setAttribute(a.name, a.value);
+ }
+ }
+ }
+ pre.innerHTML = newContent;
+
+ // remove the old
+ cs.parentNode.replaceChild(pre, cs);
+ cs = pre;
+ }
+ }
+
+ doWork();
+ }
+
+ window['PR_normalizedHtml'] = normalizedHtml;
+ window['prettyPrintOne'] = prettyPrintOne;
+ window['prettyPrint'] = prettyPrint;
+ window['PR'] = {
+ 'combinePrefixPatterns': combinePrefixPatterns,
+ 'createSimpleLexer': createSimpleLexer,
+ 'registerLangHandler': registerLangHandler,
+ 'sourceDecorator': sourceDecorator,
+ 'PR_ATTRIB_NAME': PR_ATTRIB_NAME,