feature(highlight): enhancements and code-health.

README.md

@@ -4,7 +4,7 @@
 [![npm version](https://badge.fury.io/js/%40covalent%2Fcore.svg)](https://badge.fury.io/js/%40covalent%2Fcore)
 [![Join the chat at https://gitter.im/Teradata/covalent](https://badges.gitter.im/Teradata/covalent.svg)](https://gitter.im/Teradata/covalent?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![Dependency Status](https://dependencyci.com/github/Teradata/covalent/badge)](https://dependencyci.com/github/Teradata/covalent)
-[![Coverage Status](https://coveralls.io/repos/github/Teradata/covalent/badge.svg?branch=develop)](https://coveralls.io/github/Teradata/covalent?branch=develop)
+[![Coverage Status](https://coveralls.io/repos/github/Teradata/covalent/badge.svg)](https://coveralls.io/github/Teradata/covalent)
 
 <img alt="Covalent" src="https://cdn.rawgit.com/Teradata/covalent/develop/src/app/assets/icons/covalent.svg" width="150">
 

src/app/components/components/highlight/highlight.component.html

@@ -3,110 +3,73 @@
   <md-card-subtitle>Highlighting your code snippets</md-card-subtitle>
   <md-divider></md-divider>
   <md-card-content>
-     <p>Simply wrap your code snippets in <code><![CDATA[<td-highlight>]]></code></p>
-     <p>To use HTML brackets &lt; and &gt; wrap the code with &lt;![CDATA[ and ]]&gt; or replace with HTMLs character entities <![CDATA[ &lt; and &gt; ]]></p>
-     <p>Also, to display model binding, add spaces between curly braces like:<code>{{ '{' }} {{ '{' }} } }</code> and wrap them with &lt;![CDATA[ and ]]&gt;
      <h3>Example:</h3>
+     <p>HTML usage:</p>
      <td-highlight lang="html">
-        <![CDATA[
+      <![CDATA[
         <td-highlight lang="html">
           <h1>hello world!</h1>
           <span>{ {property} }</span>
         </td-highlight>
-        ]]>
+      ]]>
     </td-highlight>
     <p>here's what CSS looks like:</p>
-    <td-highlight lang="css">       
-      pre {{'{'}}
-        display: block;
-        overflow-x: auto;
-        padding: 0;
-        margin: 0;
-        background: #002451;
-        color: white;
-        font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
-        line-height: 1.45;
-        tab-size: 2;
-        -webkit-font-smoothing: auto;
-        -webkit-text-size-adjust: none;
-        position: relative;
-        border-radius: 2px;
-      }
+    <td-highlight lang="css">    
+      <![CDATA[   
+        pre {
+          display: block;
+          overflow-x: auto;
+          padding: 0;
+          margin: 0;
+          background: #002451;
+          color: white;
+          font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
+          line-height: 1.45;
+          tab-size: 2;
+          -webkit-font-smoothing: auto;
+          -webkit-text-size-adjust: none;
+          position: relative;
+          border-radius: 2px;
+        }
+      ]]>
     </td-highlight>
-    <p>and JavaScript (typescript):</p>
+    <p>and TypeScript (javascript):</p>
     <td-highlight lang="typescript">
       <![CDATA[
-      import { Injectable } from '@angular/core';
-      import { Subject } from 'rxjs/Subject';
-      import { Observable } from 'rxjs/Observable';
+        import { Injectable } from '@angular/core';
+        import { Subject } from 'rxjs/Subject';
+        import { Observable } from 'rxjs/Observable';
 
-      @Injectable()
-      export class Service {
+        @Injectable()
+        export class Service {
 
-        private _sources: {[key : string]: Subject<any>} = {};
-        private _observables: {[key: string]: Observable<any>} = {};
+          private _sources: {[key : string]: Subject<any>} = {};
+          private _observables: {[key: string]: Observable<any>} = {};
 
-        constructor(){
+          constructor(){
 
-        }
+          }
 
-        public register(name) : Observable<any> {
-          this._sources[name] = new Subject<any>();
-          this._observables[name] = this._sources[name].asObservable();
-          return this._observables[name];
-        }
+          public register(name) : Observable<any> {
+            this._sources[name] = new Subject<any>();
+            this._observables[name] = this._sources[name].asObservable();
+            return this._observables[name];
+          }
 
-        public emit(name: string): void {
-          if(this._sources[name]){
-            this._sources[name].next(null);
+          public emit(name: string): void {
+            if(this._sources[name]){
+              this._sources[name].next(null);
+            }
           }
         }
-      }
-      ]]>
-    </td-highlight>
-    <h3>Setup:</h3>
-    <p><code>highlight.js</code> needs to be added as vendor (installed as a <code>highlight.js</code> dependency).</p>
-    <td-highlight lang="typescript">
-      <![CDATA[
-        module.exports = function(defaults) {
-          return new Angular2App(defaults, {
-            vendorNpmFiles: [
-              ...
-              'highlight.js/lib/**'
-            ]
-          });
-        };
-      ]]>
-    </td-highlight>
-    <p>Reference the module in the <code>system-config.js</code> file.</p>
-    <td-highlight lang="html">
-      <![CDATA[
-        const barrels: string[] = [
-          'highlight.js/lib',
-        ];
-        System.config({
-          map: {
-            ...
-            'highlight.js/lib': 'vendor/highlight.js/lib',
-            ...
-          },
-          packages: cliSystemConfigPackages,
-        });
-      ]]>
-    </td-highlight>
-    <p>Then, import the [CovalentHighlightModule] using the forRoot() method in your NgModule:</p>
-    <td-highlight lang="typescript">
-      <![CDATA[
-        import { CovalentHighlightModule } from '@covalent/highlight';
-        @NgModule({
-          imports: [
-            CovalentHighlightModule.forRoot(),
-            ...
-          ],
-          ...
-        })
-        export class MyModule {}
       ]]>
     </td-highlight>
   </md-card-content>
 </md-card>
+
+<md-card>
+  <md-card-content>
+    <td-markdown [content]="content">
+    </td-markdown>
+  </md-card-content>
+</md-card>

src/app/components/components/highlight/highlight.component.ts

@@ -1,4 +1,5 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, OnInit } from '@angular/core';
+import { Http, Response } from '@angular/http';
 
 import { slideInDownAnimation } from '../../../app.animations';
 
@@ -8,9 +9,26 @@ import { slideInDownAnimation } from '../../../app.animations';
   templateUrl: './highlight.component.html',
   animations: [slideInDownAnimation],
 })
-export class HighlightDemoComponent {
+export class HighlightDemoComponent implements OnInit {
 
   @HostBinding('@routeAnimation') routeAnimation: boolean = true;
   @HostBinding('class.td-route-animation') classAnimation: boolean = true;
 
+  content: string;
+
+  constructor(private _http: Http) {}
+
+  ngOnInit(): void {
+    let errorString: string = 'Warning: Resource could not be loaded.';
+    this._http.get('platform/highlight/README.md').subscribe((res: Response) => {
+      try {
+        this.content = res.text();
+      } catch (e) {
+        this.content = errorString;
+      }
+    }, (error: Error) => {
+      this.content = errorString;
+    });
+  }
+
 }