honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update to code examples

This commit is contained in:
Alex Wolfe 2015-05-18 06:41:26 -07:00
parent a85af9e15e
commit 799a16c5c5
3 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
public/docs/_includes/styleguide/_code-examples.jade
View File

@ -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").
//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 @@
<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

12
public/resources/js/directives/code-example.js
View File

@ -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 = '<pre class="prettyprint {{format}} lang-{{language}}">' +
compile: function(tElement, attrs) {
var html = (attrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
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) {
// SET SCOPE MANUALLY
scope.language = attrs.language;
scope.format = attrs.format;
};
return function(scope, element, attrs) {};
}
};
});

5
public/resources/js/directives/code-pane.js
View File

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