honeymoose/Angular-Cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code examples, now escape html, full directives

Browse Source
This commit is contained in:
Alex Wolfe
2015-05-03 19:09:25 -07:00
parent b9386de4f3
commit a5f3214e97
9 changed files with 232 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/_includes/_scripts-include.jade
+2 -1
View File
@@ -2,16 +2,17 @@
script(src="/resources/js/vendor/prettify.js")
script(src="/resources/js/vendor/lang-basic.js")
script(src="/resources/js/vendor/lang-dart.js")
script(src="/resources/js/vendor/lodash.js")
<!-- Angular Material Dependencies -->
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-touch.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js")
script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js")
script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js")
<!-- Angular.io Site JS -->
script(src="/resources/js/site.js")
script(src="/resources/js/controllers/app-controller.js")
public/docs/_includes/styleguide/_code-examples.jade
+35 -28
View File
@@ -7,22 +7,16 @@
.l-sub-section
h3 Adding a code example
pre.prettyprint.linenums
code.
pre.prettyprint.linenums
code.
//SOME CODE
var name = "Alex Wolfe";
alert(name);
code-example(format="linenums").
//SOME CODE
var name = "Alex Wolfe";
alert(name);
.l-sub-section
h3 Specify starting line number
pre(class="prettyprint linenums:4")
code.
pre.prettyprint.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
@@ -34,11 +28,9 @@
chosen based on language hints. Add a class that matches
your desired language (example below uses <strong>.lang-html</strong>)
pre(class="prettyprint lang-html")
code.
pre.prettyprint.lang-html
h1 Title
p This is some copy...
code-example(language="html" format="linenums").
h1 Title
p This is some copy...
.l-sub-section
h3 Code Highlighting
@@ -48,16 +40,31 @@
<strong>Black</strong>. You can see examples below and
the class names needed for each type.
pre.prettyprint.linenums
code.
// Pink Background Version
// class="pnk"
var elephants = "The <span class="pnk">pink</span> elephants were marching...";
code-example(format="linenums" escape="html").
// Pink Background Version
// class="pnk"
var elephants = "The <span class='pnk'>pink</span> elephants were marching...";
// Black Background Version
// class="blk"
var night = "The night was pitch <span class="blk">black</span>.";
// Black Background Version
// class="blk"
var night = "The night was pitch <span class='blk'>black</span>.";
// Outlined Version
// class="otl"
var match = "The <span class="otl">bird</span> ate <span class="otl">bird</span> seed near the <span class="otl">bird</span> bath ";
// Outlined Version
// class="otl"
var match = "The <span class='otl'>bird</span> ate <span class='otl'>bird</span> seed near the <span class='otl'>bird</span> bath ";
.l-sub-section
h3 Code Tabs
p.
Code Tabs are a great way to show different languages and versions
of a particular piece of code. When using these tabs make sure the
<stron>content is always related</strong>.
code-tabs
code-pane(language="javascript" format="linenums" name="ES5").
// ES5
var hello = 'blah';
code-pane(language="javascript" format="linenums" name="TypeScript").
// TypeScript
var hello = 'blah';
public/docs/_includes/styleguide/_layouts.jade
+8 -11
View File
@@ -10,20 +10,17 @@
h2 Main Section Title
p Main section content...
pre.prettyprint.linenums.lang-html
code.
.l-main-section
h2 Section Title
p section content...
code-example(language="html" format="linenums").
.l-main-section
h2 Section Title
p section content...
.l-sub-section
h3 Sub Section Title
p.
sub section content... This content is related to the main section
content and <strong>falls within</strong> the main section.
pre.prettyprint.linenums.lang-html
code.
.l-sub-section
h3 Sub Section Title
p sub section content...
code-example(language="html" format="linenums").
.l-sub-section
h3 Sub Section Title
p sub section content...
public/resources/js/controllers/app-controller.js
+8 -3
View File
@@ -3,7 +3,7 @@
*
*/
angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){
angularIO.controller('AppCtrl', ['$scope', '$mdDialog', '$timeout', function($scope, $mdDialog, $timeout) {
$scope.showDocsNav = false;
$scope.showMainNav = false;
@@ -27,6 +27,11 @@ angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDial
$scope.showMenu = !$scope.showMenu;
};
// INITIALIZE PRETTY PRINT
prettyPrint();
/*
* Prettify Code
*
* Finish Rendereding code directives then prettify code
*/
$timeout(prettyPrint, 1);
}]);
public/resources/js/directives/code-example.js
+15 -14
View File
@@ -8,21 +8,22 @@
angularIO.directive('codeExample', function() {
return {
restrict: 'E',
transclude: true,
replace: true,
scope: {
name: '@',
language: '@',
format: '@'
},
link: function(scope, element, attrs, codeSwitchController, transcludeFunc) {
transcludeFunc( scope, function( content ) {
var code = '<code ng-non-bindable>' + content[0].innerHTML + '</code>';
element.append(code);
});
},
compile: function(tElement, tAttrs) {
var html = (tAttrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
var template = '<pre class="prettyprint {{format}} lang-{{language}}">' +
'<code ng-non-bindable>' + html + '</code>' +
'</pre>';
template:'<pre class="prettyprint {{format}} lang-{{language}}"></pre>'
// UPDATE ELEMENT WITH NEW TEMPLATE
tElement.html(template);
// RETURN ELEMENT
return function(scope, element, attrs) {
// SET SCOPE MANUALLY
scope.language = attrs.language;
scope.format = attrs.format;
};
}
};
});
public/resources/js/directives/code-pane.js
+21 -15
View File
@@ -11,23 +11,29 @@ angularIO.directive('codePane', function() {
return {
require: '^codeTabs',
restrict: 'E',
transclude: true,
replace: true,
scope: {
name: '@',
language: '@',
format: '@'
},
scope: true,
link: function(scope, element, attrs, codeTabController, transcludeFunc) {
transcludeFunc( scope, function( content ) {
var code = '<code ng-non-bindable>' + content[0].innerHTML + '</code>';
element.append(code);
});
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">' +
'<code ng-non-bindable>' + html + '</code>' +
'</pre>';
codeTabController.addPane(scope);
},
template:'<pre class="prettyprint {{format}} lang-{{language}}" ng-show="selected"></pre>'
// UPDATE ELEMENT WITH NEW TEMPLATE
tElement.html(template);
// 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);
};
}
};
});
public/resources/js/directives/code-tabs.js
-10
View File
@@ -44,16 +44,6 @@ angularIO.directive('codeTabs', function($timeout) {
// SELECT CURRENT EXAMPLE
pane.selected = true;
};
/*
* Finish Rendereding then prettify code
*
*/
$scope.$watch($scope.panes.$last,function(){
$timeout(prettyPrint, 1);
});
},
template:
public/resources/js/site.js
+1 -1
View File
@@ -3,7 +3,7 @@
*
*/
var angularIO = angular.module('angularIOApp', ['ngMaterial', 'ngTouch'])
var angularIO = angular.module('angularIOApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
// THEMEING FOR ANGULAR MATERIAL
public/resources/js/vendor/lodash.js
Vendored
+142
View File
File diff suppressed because one or more lines are too long