feat(ngdocs): external links to github, plunkr and jsfiddle available for code examples

Author: matsko

docs/src/ngdoc.js

@@ -105,7 +105,7 @@ Doc.prototype = {
       IS_URL = /^(https?:\/\/|ftps?:\/\/|mailto:|\.|\/)/,
       IS_ANGULAR = /^(api\/)?(angular|ng|AUTO)\./,
       IS_HASH = /^#/,
-      parts = trim(text).split(/(<pre>[\s\S]*?<\/pre>|<doc:example(\S*).*?>[\s\S]*?<\/doc:example>|<example[^>]*>[\s\S]*?<\/example>)/),
+      parts = trim(text).split(/(<pre.*?>[\s\S]*?<\/pre>|<doc:example(\S*).*?>[\s\S]*?<\/doc:example>|<example[^>]*>[\s\S]*?<\/example>)/),
       seq = 0,
       placeholderMap = {};
 
@@ -191,9 +191,9 @@ Doc.prototype = {
 
           return placeholder(example.toHtml());
         }).
-        replace(/^<pre>([\s\S]*?)<\/pre>/mi, function(_, content){
+        replace(/^<pre(.*?)>([\s\S]*?)<\/pre>/mi, function(_, attrs, content){
           return placeholder(
-            '<pre class="prettyprint linenums">' +
+            '<pre'+attrs+' class="prettyprint linenums">' +
               content.replace(/</g, '&lt;').replace(/>/g, '&gt;') +
               '</pre>');
         }).

docs/src/templates/css/docs.css

@@ -241,3 +241,22 @@ ul.events > li > h3 {
 .type-hint-number {
   background:rgb(189, 63, 66);
 }
+
+.syntax-links {
+  background:#eee;
+  border:1px solid #ddd;
+  text-align:right;
+  padding:1em;
+  border-bottom:0;
+  border-top-left-radius:4px;
+  border-top-right-radius:4px;
+}
+
+.syntax-links a {
+  margin-left:10px;
+}
+
+.syntax-links + pre {
+  border-top-left-radius:0;
+  border-top-right-radius:0;
+}

src/bootstrap/bootstrap.js

@@ -48,6 +48,48 @@ directive.dropdownToggle =
     };
   }];
 
+directive.syntax = function() {
+  return {
+    restrict: 'A',
+    link: function(scope, element, attrs) {
+      function makeLink(type, text, link, icon) {
+        return '<a href="' + link + '" class="btn syntax-' + type + '" target="_blank" rel="nofollow">' + 
+                '<span class="' + icon + '"></span> ' + text +
+               '</a>';
+      };
+      var html = '<nav class="syntax-links">';
+      var types = {
+        'github' : {
+          text : 'View on Github',
+          key : 'syntaxGithub',
+          icon : 'icon-github'
+        },
+        'plunkr' : {
+          text : 'View on Plunkr',
+          key : 'syntaxPlunkr',
+          icon : 'icon-arrow-down'
+        },
+        'jsfiddle' : {
+          text : 'View on JSFiddle',
+          key : 'syntaxFiddle',
+          icon : 'icon-cloud'
+        }
+      };
+      for(var type in types) {
+        var data = types[type];
+        var link = attrs[data.key];
+        if(link) {
+          html += makeLink(type, data.text, link, data.icon);
+        }
+      };
+      html += '</nav>';
+      var nav = angular.element(html);
+      var node = element[0];
+      var par = node.parentNode;
+      par.insertBefore(nav[0], node);
+    }
+  }
+}
 
 directive.tabbable = function() {
   return {