update to code examples

public/docs/_includes/styleguide/_code-examples.jade

@@ -3,21 +3,26 @@
     h2 Code Examples
     p Below are some examples of how you can add/customize code examples in a page.
 
+    strong.l-space-top-3.l-space-bottom-1 ATTRIBUTES:
+    ul
+      li <strong>name</strong> Name displayed in Tab (required for tabs)
+      li <strong>language</strong> javascript, html, etc.
+      li <strong>escape</strong> html (escapes html, woot!)
+      li <strong>format</strong> linenums (or linenums:4 specify starting line)
+
   .showcase-content
     .l-sub-section
       h3 Adding a code example
 
-      code-example(format="linenums").
+      code-example(format="linenums" language="html").
-        //SOME CODE
+        code-example(format="linenums" language="javascript").
-        var name = "Alex Wolfe";
+          //SOME CODE
-        alert(name);
-
     .l-sub-section
       h3 Specify starting line number
 
-      code-example(language="html" format="linenums:4").
+      code-example(language="javascript" format="linenums:4").
-        var title = "This starts on line four";
+        code-example(language="html" format="linenums:4").
-
+          var title = "This starts on line four";
     .l-sub-section
       h3 Specify a language
 
@@ -40,7 +45,7 @@
         <strong>Black</strong>. You can see examples below and
         the class names needed for each type.
 
-      code-example(format="linenums" escape="html").
+      code-example(format="linenums").
         // Pink Background Version
         // class="pnk"
         var elephants = "The <span class='pnk'>pink</span> elephants were marching...";
@@ -68,3 +73,11 @@
         code-pane(language="javascript" format="linenums" name="TypeScript").
           // TypeScript
           var hello = 'blah';
+
+      p To create code tabs simply use the directives below
+      code-example(format="linenums").
+        code-tabs
+          code-pane(format="linenums" name="Tab 1").
+            // TAB 1 CONTENT
+          code-pane(format="linenums" name="Tab 2").
+            // TAB 2 CONTENT

public/resources/js/directives/code-example.js

@@ -9,9 +9,9 @@ angularIO.directive('codeExample', function() {
   return {
     restrict: 'E',
 
-    compile: function(tElement, tAttrs) {
+    compile: function(tElement, attrs) {
-      var html = (tAttrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
+      var html = (attrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
-      var template =  '<pre class="prettyprint {{format}} lang-{{language}}">' +
+      var template =  '<pre class="prettyprint ' + attrs.format + ' lang-' + attrs.language + '">' +
                       '<code ng-non-bindable>' + html + '</code>' +
                       '</pre>';
 
@@ -19,11 +19,7 @@ angularIO.directive('codeExample', function() {
       tElement.html(template);
 
       // RETURN ELEMENT
-      return function(scope, element, attrs) {
+      return function(scope, element, attrs) {};
-        // SET SCOPE MANUALLY
-        scope.language = attrs.language;
-        scope.format = attrs.format;
-      };
     }
   };
 });

public/resources/js/directives/code-pane.js

@@ -15,7 +15,7 @@ angularIO.directive('codePane', function() {
 
     compile: function(tElement, tAttrs) {
       var html = (tAttrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
-      var template =  '<pre class="prettyprint {{format}} lang-{{language}}" ng-show="selected">' +
+      var template =  '<pre class="prettyprint ' + tAttrs.format + ' lang-' + tAttrs.language + '" ng-show="selected">' +
                       '<code ng-non-bindable>' + html + '</code>' +
                       '</pre>';
 
@@ -26,10 +26,7 @@ angularIO.directive('codePane', function() {
 
       // RETURN LINK METHOD
       return function(scope, element, attrs, controller) {
-        // SET SCOPE MANUALLY
-        scope.language = attrs.language;
         scope.name = attrs.name;
-        scope.format = attrs.format;
 
         //ADD PANE TO CONTROLLER
         controller.addPane(scope);