fix(index): display code example corretly

jacobmllr95 · alexeagle · commit 45d136e327ea · 2015-07-01T16:07:41.000-07:00
This commit fixes the displaying of the „name“ template variable (see screenshot below) in the code example on the front page. https://goo.gl/qcLf5X
diff --git a/public/index.jade b/public/index.jade
@@ -1,6 +1,6 @@
 .grid-fluid.l-space-bottom-8
   .c7
-    h3.text-headline  Build Incredible Applications
+    h3.text-headline Build Incredible Applications
     p.text-body Angular is a development platform for creating applications using modern web standards. Angular includes a <a href="/features.html">wealth of essential features</a> such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.
   .c5.text-center
     img(src="/resources/images/logos/html5/html5.png" alt="Modern Web Standards")
@@ -11,17 +11,16 @@
     h3.text-headline  Start Quick, Build Fast
     p.text-body Express your ideas with clean, understandable code. Angular is simple to build on, easy to change, and friendly to the way UX designers work. Create a UI that is beautiful by default, with material design and support for web components. Angular takes <a href="/docs/js/latest/quickstart.html">just minutes to learn</a>.
   .c6
-    pre.prettyprint.linenums.is-showcase
-      code.
-        @Component({selector: 'my-app'})
-        @View({template: '&lt;h1&gt;Hi {{ name }}&lt;/h1&gt;'})
+    code-example(language="javascript" format="linenums" showcase="true").
+      @Component({selector: 'my-app'})
+      @View({template: '&lt;h1&gt;Hi {{ name }}&lt;/h1&gt;'})
 
-        // Component controller
-        class MyAppComponent {
-          constructor() {
-            this.name = 'Ali';
-          }
+      // Component controller
+      class MyAppComponent {
+        constructor() {
+          this.name = 'Ali';
         }
+      }
 
 .grid-fluid.l-space-bottom-8
   .c7
diff --git a/public/resources/js/directives/code-example.js b/public/resources/js/directives/code-example.js
@@ -11,7 +11,9 @@ angularIO.directive('codeExample', function() {
 
     compile: function(tElement, attrs) {
       var html = (attrs.escape === "html") ? _.escape(tElement.html()) : tElement.html();
-      var template =  '<pre class="prettyprint ' + attrs.format + ' lang-' + attrs.language + '">' +
+      var classes = 'prettyprint ' + attrs.format + ' lang-' + attrs.language +
+          (attrs.showcase === 'true' ? ' is-showcase' : '');
+      var template =  '<pre class="' + classes + '">' +
                       '<code ng-non-bindable>' + html + '</code>' +
                       '</pre>';
 
