Commits

Anonymous committed 0884e57

More examples, code styling and refactoring of javascript code.

Comments (0)

Files changed (2)

Scripts/jquery.beautyOfCode.js

-
 jQuery.beautyOfCode = {
 
-  settings: {
-	baseUrl: 'http://alexgorbatchev.com/pub/sh/2.0.320/',
-	scripts: 'scripts/',
-	styles: 'styles/',
-	brushes: ['Xml', 'JScript'],
-	config: {},
-    defaults: {},
-    ready: function() {jQuery.beautyOfCode.beautifyAll();}
-  },
+    settings: {
+        // should the syntax highlighter and brushes
+		// be loaded dynamically
+		autoLoad: true,
+		// the base url to alex' hosted sources
+		// http://alexgorbatchev.com/wiki/SyntaxHighlighter:Hosting
+        baseUrl: 'http://alexgorbatchev.com/pub/sh/2.0.320/',
+		// the baseurl for the hosted scripts
+        scripts: 'scripts/',
+		// the baseurl for the hosted styles
+        styles: 'styles/',
+		// the brushes that should be loaded - case sensitive!
+		// http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes
+        brushes: ['Xml', 'JScript', 'CSharp', 'Plain'],
+		// overrides for configurations and defaults
+		// http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration
+        config: {},
+        defaults: {},
+		// function to be called, when all scripts are loaded
+        ready: function() {
+            jQuery.beautyOfCode.beautifyAll();
+        }
+    },
 
-  utils: { 
-	loadScript: function(url, complete) {
-	  jQuery.ajax({url: url, complete: function() { complete(); }, type:'GET', 
-			dataType: 'script', cache: true});
-	},
-	loadAll: function(urls, complete) {
-	  if (!urls || urls.length == 0)
-	  {
-	    complete();
-	    return;
-	  }
-	  var last = urls.pop();
-      jQuery.beautyOfCode.utils.loadScript(
-	     last, 
-	     function() {jQuery.beautyOfCode.utils.loadAll(urls, complete);}
-      );
+    init: function(settings) {
+        settings = jQuery.extend({},
+        jQuery.beautyOfCode.settings, settings);
+
+        if (!settings.config.clipboardSwf)
+        settings.config.clipboardSwf = settings.baseUrl + settings.scripts + 'clipboard.swf';
+
+		if (!settings.autoLoad) {
+			settings.ready();
+		}
+        else {
+            jQuery.beautyOfCode.utils.loadCss(settings.baseUrl + settings.styles + 'shCore.css');
+            jQuery.beautyOfCode.utils.loadCss(settings.baseUrl + settings.styles + 'shThemeDefault.css', 'shTheme');
+
+            var scripts = new Array();
+            scripts.push(settings.baseUrl + settings.scripts + 'shCore.js');
+            jQuery.each(settings.brushes,
+            function(i, item) {
+                scripts.push(settings.baseUrl + settings.scripts + 'shBrush' + item + ".js")
+            });
+
+            jQuery.beautyOfCode.utils.loadAllScripts(
+            scripts,
+            function() {
+                if (settings && settings.config)
+                	jQuery.extend(SyntaxHighlighter.config, settings.config);
+
+                if (settings && settings.defaults)
+                	jQuery.extend(SyntaxHighlighter.defaults, settings.defaults);
+
+                settings.ready();
+            });
+        }
     },
-    loadCss: function(url, id) {
-	  var headNode = jQuery("head")[0];
-	  if(url && headNode)
-	  {
-	    var styleNode = document.createElement('link');
-	    styleNode.setAttribute('rel', 'stylesheet');
-	    styleNode.setAttribute('href', url);
-        if (id) styleNode.id = id;
-	    headNode.appendChild(styleNode);
-	  }
+
+    beautifyAll: function() {
+        jQuery("pre.code:has(code[class])").beautifyCode();
     },
-    addCss: function(css, id) {
-		var headNode = jQuery("head")[0];
-	    if(css && headNode)
-	    {
-	      var styleNode = document.createElement('style');
-	      
-	      styleNode.setAttribute('type', 'text/css');
-          if (id) styleNode.id = id;
-	      if(styleNode.styleSheet) // for IE
-	        styleNode.styleSheet.cssText = css;
-	      else // for everyone else
-	        $(styleNode).text(css);
+    utils: {
+        loadScript: function(url, complete) {
+            jQuery.ajax({
+                url: url,
+                complete: function() {
+                    complete();
+                },
+                type: 'GET',
+                dataType: 'script',
+                cache: true
+            });
+        },
+        loadAllScripts: function(urls, complete) {
+            if (!urls || urls.length == 0)
+            {
+                complete();
+                return;
+            }
+            var first = urls[0];
+            jQuery.beautyOfCode.utils.loadScript(
+            	first,
+	            function() {
+	                jQuery.beautyOfCode.utils.loadAllScripts(
+						urls.slice(1, urls.length), 
+						complete
+					);
+	            }
+            );
+        },
+        loadCss: function(url, id) {
+            var headNode = jQuery("head")[0];
+            if (url && headNode)
+            {
+                var styleNode = document.createElement('link');
+                styleNode.setAttribute('rel', 'stylesheet');
+                styleNode.setAttribute('href', url);
+                if (id) styleNode.id = id;
+                	headNode.appendChild(styleNode);
+            }
+        },
+        addCss: function(css, id) {
+            var headNode = jQuery("head")[0];
+            if (css && headNode)
+            {
+                var styleNode = document.createElement('style');
 
-	      headNode.appendChild(styleNode);
-	    }
-    },
-    getOptionValue: function (name, list) {
-        var regex = new RegExp('^' + name + '\\[([^\\]]+)\\]$', 'gi');
-        var matches = null;
+                styleNode.setAttribute('type', 'text/css');
+                
+				if (id) styleNode.id = id;
+                
+				if (styleNode.styleSheet)
+                	// for IE
+	                styleNode.styleSheet.cssText = css;
+                else
+                // 	for everyone else
+	                $(styleNode).text(css);
 
-        for(var i = 0; i < list.length; i++)
-          if((matches = regex.exec(list[i])) != null)
-            return matches[1];
+                headNode.appendChild(styleNode);
+            }
+        },
+        addCssForBrush: function(brush, highlighter) {
+            if (brush.isCssInitialized)
+            	return;
 
-        return null;
-    },
-    parseParams: function(params) {
-		var trimmed = jQuery.map(params, jQuery.trim);
+            jQuery.beautyOfCode.utils.addCss(highlighter.Style);
 
-		var paramObject = {};
+            brush.isCssInitialized = true;
+        },
+        parseParams: function(params) {
+            var trimmed = jQuery.map(params, jQuery.trim);
 
-        var handleValue = function(flag){
-			var flagValue = jQuery.beautyOfCode.utils.getOptionValue('boc-' + flag, trimmed);
-			if (flagValue) paramObject[flag] = flagValue;
-		};
-		
-		handleValue('class-name');
-		handleValue('first-line');
-		handleValue('tab-size');
+            var paramObject = {};
 
-		var highlight = jQuery.beautyOfCode.utils.getOptionValue('boc-highlight', trimmed);
-		if (highlight) paramObject['highlight'] = jQuery.map(highlight.split(','), jQuery.trim);
+            var getOptionValue = function(name, list) {
+                var regex = new RegExp('^' + name + '\\[([^\\]]+)\\]$', 'gi');
+                var matches = null;
 
-        var handleFlag = function(flag){
-			if (jQuery.inArray('boc-' + flag, trimmed) != -1)
-				paramObject[flag] = true;
-			else if (jQuery.inArray('boc-no-' + flag, trimmed) != -1)
-				paramObject[flag] = false;
-		};
-		
-		handleFlag('smart-tabs');
-		handleFlag('ruler');
-		handleFlag('gutter');
-		handleFlag('toolbar');
-		handleFlag('collapse');
-		handleFlag('auto-links');
-		handleFlag('light');
-		handleFlag('wrap-lines');
-		
-		return paramObject;
+                for (var i = 0; i < list.length; i++)
+                	if ((matches = regex.exec(list[i])) != null)
+                		return matches[1];
+
+                return null;
+            }
+
+            var handleValue = function(flag) {
+                var flagValue = getOptionValue('boc-' + flag, trimmed);
+                if (flagValue) paramObject[flag] = flagValue;
+            };
+
+            handleValue('class-name');
+            handleValue('first-line');
+            handleValue('tab-size');
+
+            var highlight = getOptionValue('boc-highlight', trimmed);
+            if (highlight) paramObject['highlight'] = jQuery.map(highlight.split(','), jQuery.trim);
+
+            var handleFlag = function(flag) {
+                if (jQuery.inArray('boc-' + flag, trimmed) != -1)
+                	paramObject[flag] = true;
+                else if (jQuery.inArray('boc-no-' + flag, trimmed) != -1)
+                	paramObject[flag] = false;
+            };
+
+            handleFlag('smart-tabs');
+            handleFlag('ruler');
+            handleFlag('gutter');
+            handleFlag('toolbar');
+            handleFlag('collapse');
+            handleFlag('auto-links');
+            handleFlag('light');
+            handleFlag('wrap-lines');
+            handleFlag('html-script');
+
+            return paramObject;
+        }
     }
-  },
-
-  init: function (settings) {
-	settings = jQuery.extend({}, jQuery.beautyOfCode.settings, settings);
-	
-	if (!settings.config.clipboardSwf)
-	  settings.config.clipboardSwf = settings.baseUrl + settings.scripts + 'clipboard.swf';
-	
-	jQuery.beautyOfCode.utils.loadCss(settings.baseUrl + settings.styles + 'shCore.css');
-	jQuery.beautyOfCode.utils.loadCss(settings.baseUrl + settings.styles + 'shThemeDefault.css', 'shTheme');
-	
-	jQuery.beautyOfCode.utils.loadScript(
-		settings.baseUrl + settings.scripts + 'shCore.js', 
-		function() {
-			var brushes = new Array();
-			jQuery.each(settings.brushes, function (i, item) { 
-		      brushes.push(settings.baseUrl + settings.scripts + 'shBrush' + item + ".js")
-			});
-			jQuery.beautyOfCode.utils.loadAll(brushes, function() {
-				if (settings && settings.config)
-			      jQuery.extend(SyntaxHighlighter.config, settings.config);
-
-				if (settings && settings.defaults)
-			      jQuery.extend(SyntaxHighlighter.defaults, settings.defaults);
-
-			    settings.ready();	
-			});
-		}
-	);
-  },
-
-  addCssForBrush: function (brush, highlighter) {
-    if (brush.isCssInitialized)
-      return;
-
-    jQuery.beautyOfCode.utils.addCss(highlighter.Style);
-
-    brush.isCssInitialized = true;
-  },
-
-  beautifyAll: function() {
-    jQuery("pre.code:has(code[class])").beautifyCode();
-  }
 };
 
-jQuery.fn.beautifyCode = function (brush, params) {
-  var saveBrush = brush;
-  var saveParams = params;
+jQuery.fn.beautifyCode = function(brush, params) {
+    var saveBrush = brush;
+    var saveParams = params;
 
-  // iterate all elements
-  this.each( function (i, item) {
-    var $item = jQuery(item);
+    // iterate all elements
+    this.each(function(i, item) {
+        var $item = jQuery(item);
 
-    var $code = $item.children("code");
-    var code = $code[0];
-    var classItems = code.className.split(" ");
+        // for now, only supports <pre><code>...</code></pre>
+        // support for only pre, or only code could be added
+        var $code = $item.children("code");
+        var code = $code[0];
+        var classItems = code.className.split(" ");
 
-    var brush = saveBrush ? saveBrush : classItems[0];
-    var elementParams = jQuery.beautyOfCode.utils.parseParams(classItems);
+        var brush = saveBrush ? saveBrush: classItems[0];
+        var elementParams = jQuery.beautyOfCode.utils.parseParams(classItems);
 
-    var params = jQuery.extend({}, SyntaxHighlighter.defaults, saveParams, elementParams);
+        var params = jQuery.extend({},
+        SyntaxHighlighter.defaults, saveParams, elementParams);
 
-    // Instantiate a brush
-    if (params['html-script'] == 'true') 
-    {
-      highlighter = new SyntaxHighlighter.HtmlScript(brush);
-	}
-	else
-	{
-      var brush = SyntaxHighlighter.utils.findBrush(brush);
-	
-      if (brush)
-        highlighter = new brush();
-      else
-        return;
-	}
+        // Instantiate a brush
+        if (params['html-script'] == 'true')
+        {
+            highlighter = new SyntaxHighlighter.HtmlScript(brush);
+        }
+        else
+        {
+            var brush = SyntaxHighlighter.utils.findBrush(brush);
 
-    jQuery.beautyOfCode.addCssForBrush(brush, highlighter);
+            if (brush)
+            	highlighter = new brush();
+            else
+            	return;
+        }
 
-    // IE Bug?: code in pre has to be skipped
-    // in order to preserve line breaks.
-    if ($item.is("pre") && ($code = $item.children("code")))
-      $item.text($code.text());
+        // i'm not sure if this is still neccessary
+        jQuery.beautyOfCode.utils.addCssForBrush(brush, highlighter);
 
-    highlighter.highlight($item.html(), params);
-    highlighter.source = item;
+        // IE Bug?: code in pre has to be skipped
+        // in order to preserve line breaks.
+        if ($item.is("pre") && ($code = $item.children("code")))
+        $item.text($code.text());
 
-    $item.replaceWith(highlighter.div);
-  });
+        highlighter.highlight($item.html(), params);
+        highlighter.source = item;
+
+        $item.replaceWith(highlighter.div);
+    });
 }
 	<script type="text/javascript">
 		$(function(){  
 			$.beautyOfCode.init({
-				brushes: ['Xml', 'JScript', 'CSharp'],
+				brushes: ['Xml', 'JScript', 'CSharp', 'Plain', 'Php'],
 				ready: function() {
 					$.beautyOfCode.beautifyAll();
 					$("#someCode").beautifyCode('javascript', {gutter:false});
 </head>
 <body>
 	<h1>Just a simple demo page</h1>
-	<h2>Javascript, explicit, no gutter</h2>
+	<h2>Script references and initialization</h2>
+	<pre class="code">
+	  <code class="html boc-collapse">
+		&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
+		&lt;script type="text/javascript" src="Scripts/jquery.beautyOfCode.js"></script>
+
+		&lt;script type="text/javascript">
+			$(function(){  
+				$.beautyOfCode.init({
+					brushes: ['Xml', 'JScript', 'CSharp', 'Plain', 'Php'],
+					ready: function() {
+						$.beautyOfCode.beautifyAll();
+						$("#someCode").beautifyCode('javascript', {gutter:false});
+					}
+				}); 
+			});
+		&lt;/script>
+      </code>
+	</pre>
+	<h2>Javascript, explicit, no gutter, highlight</h2>
 	<pre id="someCode">
-	  <code class="boc-highlight[2, 4]">
+	  <code class="boc-highlight[2,4]">
 	     // my code
 	     var x = "Hello, world!";
 	     function juppi() {
 	     }
 	  </code>
 	</pre>
+	<pre class="code">
+	  <code class="html boc-collapse">
+		&lt;pre id="someCode">
+		  &lt;code class="boc-highlight[2,4]">
+		     // my code
+		     var x = "Hello, world!";
+		     function juppi() {
+			   juppi(); // kill
+		     }
+		  &lt;/code>
+		&lt;/pre>
+	  </code>
+	</pre>
 	
 	<h2>Html, autofind, start with second line, ruler</h2>
 	<pre class="code">
         &lt;a>This is bold&lt;/a>
 	  </code>
 	</pre>
+	<pre class="code">
+	  <code class="html boc-collapse">
+		&lt;pre class="code">
+		  &lt;code class="html boc-first-line[2] boc-ruler">
+			This is normal text
+	        &amp;lt;a>This is bold&amp;lt;/a>
+		  &lt;/code>
+		&lt;/pre>
+	  </code>
+	</pre>
+	
+	<h2>Plain, autofind, smart-tab</h2>
+	<pre class="code">
+	  <code class="plain boc-smart-tab">
+		This is	tabbed
+        This	too
+	  </code>
+	</pre>
+	<pre class="code">
+	  <code class="html boc-collapse">
+		&lt;pre class="code">
+		  &lt;code class="plain boc-smart-tab">
+			This is	tabbed
+	        This	too
+		  &lt;/code>
+		&lt;/pre>
+	  </code>
+	</pre>
+	
+  <h2>Php, html-script</h2>
+  <pre class="code">
+  	<code class="php boc-html-script">
+	  &lt;strong style="font-weight: normal">&lt;?= str_replace("\n", "&lt;br/>", $var) ?>&lt;/strong>
+	</code>
+  </pre>
+	<pre class="code">
+	  <code class="html boc-collapse">
+		&lt;pre class="code">
+		  &lt;code class="php boc-html-script">
+		    &amp;lt;strong style="font-weight: normal">&amp;lt;?= str_replace("\n", "&amp;lt;br/>", $var) ?>&amp;lt;/strong>
+		  &lt;/code>
+	    &lt;/pre>
+	  </code>
+	</pre>
 </body>
 </html>