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);