Skip to content

Commit

Permalink
feature(highlight): enhancements and code-health. (#277)
Browse files Browse the repository at this point in the history 
* bugfix(highlight:) Remove only empty lines at the beggining and end of the content so content  new lines arent removed

* check indentention on first code line as a guide

* remove `html` lang workaround so code parsing is more generic now

* fixed indendation in demo

* bugfix(highlight): Use Renderer to limit access to native DOM and DomSanitizer to prevent XSS issues.

* feature(highlight): Added [content] input to td-highlight to load content dynamically.

* load README.md in highlight docs

* update README.md for highlight

* remove info thats already in README.md

* update docblock in markdown

* polish README.md

* move scss rules so we can apply any pre-built theme instead of the covalent-theme

* update themeing in markdown and highlight

* comment pre-built theme in theme.scss

* feature(highlight): Mimicking VS Dark+ theme as closely as possible by default in covalent-highlight-theme

* changed color for regexp and link

* code-health(highlight): Added initial set of unit-tests.

* wrong title in README.md

* replace npm code block with bash

* fix README.md in markdown

* point to the main coveralls badge instead of develop branch

* remove methods and use regexp to remove leading and trailing new empty lines

* feature(markdown): Remove only empty lines at the beginning and end of code content only

* fixed indentation

* fixed unit test typo
  • Loading branch information
@emoralesb05
emoralesb05 authored Jan 24, 2017
1 parent fd0f32a commit 3311d4a
Show file tree
Hide file tree
Showing 12 changed files with 504 additions and 298 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">

Expand Down
131 changes: 47 additions & 84 deletions src/app/components/components/highlight/highlight.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
22 changes: 20 additions & 2 deletions src/app/components/components/highlight/highlight.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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;
});
}

}
Loading

0 comments on commit 3311d4a

Please sign in to comment.