feat(aio): add code-example and code-tabs

* move embedded components to EmbeddedModule * add PrettyPrint service; load pretty print js dynamically * make code-example to syntax highlighting w/ `prettyPrintOne` * add code-tabs * Implement copy code button
2017-03-26 13:32:29 -07:00
parent 2e4fe7fd2e
commit 837ed788f4
19 changed files with 877 additions and 144 deletions
@@ -0,0 +1,41 @@
+/* tslint:disable component-selector */
+import { Component, ElementRef, OnInit } from '@angular/core';
+
+/**
+ * An embeddable code block that displays nicely formatted code.
+ * Example usage:
+ *
+ * ```
+ * <code-example language="ts" linenums="2" class="special" title="Do Stuff">
+ * // a code block
+ * console.log('do stuff');
+ * </code-example>
+ * ```
+ */
+@Component({
+  selector: 'code-example',
+  template: `
+    <header *ngIf="title">{{title}}</header>
+    <aio-code [code]="code" [language]="language" [linenums]="linenums"></aio-code>
+  `
+})
+export class CodeExampleComponent implements OnInit { // implements AfterViewInit {
+
+  code: string;
+  language: string;
+  linenums: boolean | number;
+  title: string;
+
+  constructor(private elementRef: ElementRef) {
+    const element = this.elementRef.nativeElement;
+    this.language = element.getAttribute('language') || '';
+    this.linenums = element.getAttribute('linenums');
+    this.title = element.getAttribute('title') || '';
+  }
+
+  ngOnInit() {
+    // The `codeExampleContent` property is set by the DocViewer when it builds this component.
+    // It is the original innerHTML of the host element.
+    this.code = this.elementRef.nativeElement.codeExampleContent;
+  }
+}