diff --git a/public/docs/_includes/styleguide/_code-examples.jade b/public/docs/_includes/styleguide/_code-examples.jade index 0b3ffb3639..c9987f7739 100644 --- a/public/docs/_includes/styleguide/_code-examples.jade +++ b/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 name Name displayed in Tab (required for tabs) + li language javascript, html, etc. + li escape html (escapes html, woot!) + li format linenums (or linenums:4 specify starting line) + .showcase-content .l-sub-section h3 Adding a code example - code-example(format="linenums"). - //SOME CODE - var name = "Alex Wolfe"; - alert(name); - + code-example(format="linenums" language="html"). + code-example(format="linenums" language="javascript"). + //SOME CODE .l-sub-section h3 Specify starting line number - code-example(language="html" format="linenums:4"). - var title = "This starts on line four"; - + code-example(language="javascript" format="linenums:4"). + 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 @@ Black. 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 pink 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 \ No newline at end of file diff --git a/public/resources/js/directives/code-example.js b/public/resources/js/directives/code-example.js index 597fa24f55..d279203141 100644 --- a/public/resources/js/directives/code-example.js +++ b/public/resources/js/directives/code-example.js @@ -9,9 +9,9 @@ angularIO.directive('codeExample', function() { return { restrict: 'E', - compile: function(tElement, tAttrs) { - var html = (tAttrs.escape === "html") ? _.escape(tElement.html()) : tElement.html(); - var template = '
' +
+    compile: function(tElement, attrs) {
+      var html = (attrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
+      var template =  '
' +
                       '' + html + '' +
                       '
'; @@ -19,11 +19,7 @@ angularIO.directive('codeExample', function() { tElement.html(template); // RETURN ELEMENT - return function(scope, element, attrs) { - // SET SCOPE MANUALLY - scope.language = attrs.language; - scope.format = attrs.format; - }; + return function(scope, element, attrs) {}; } }; }); \ No newline at end of file diff --git a/public/resources/js/directives/code-pane.js b/public/resources/js/directives/code-pane.js index 32655d09f7..a91117225b 100644 --- a/public/resources/js/directives/code-pane.js +++ b/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 = '
' +
+      var template =  '
' +
                       '' + html + '' +
                       '
'; @@ -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);