chore: updated code snippets

angular.json

@@ -35,6 +35,9 @@
                         "styles": [
                             {
                                 "input": "packages/docs/src/main.scss"
+                            },
+                            {
+                                "input": "packages/docs/src/highlightjs/material-light.scss"
                             }
                         ],
                         "scripts": []

packages/docs/src/app/containers/component-viewer/component-api.template.html

@@ -0,0 +1,6 @@
+API Component
+
+<doc-viewer
+    documentUrl="/docs-content/api-docs/{{componentViewer.componentDocItem.packageName}}-{{componentViewer.componentDocItem.id}}.html"
+    class="docs-component-view-text-content docs-component-api">
+</doc-viewer>

packages/docs/src/app/docs.module.ts

@@ -16,8 +16,8 @@ import {
     ComponentApiComponent,
     ComponentOverviewComponent,
     ComponentViewerComponent
-} from './containers/component-viwer/component-viewer.component';
-import { ComponentViewerModule } from './containers/component-viwer/component-viewer.module';
+} from './containers/component-viewer/component-viewer.component';
+import { ComponentViewerModule } from './containers/component-viewer/component-viewer.module';
 import { DocsComponent } from './docs.component';
 import { DocumentationItems } from './shared/documentation-items/documentation-items';
 

packages/docs/src/highlightjs/material-dark.scss

@@ -0,0 +1,122 @@
+/*
+Orginal Style from https://github.com/Kelbster/highlightjs-material-dark-theme  (c) Kelby Gassmanl <[email protected]>
+*/
+.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+    background: #2B2B2D;
+    color: #CDD3D8;
+    -webkit-font-smoothing: antialiased;
+    text-size-adjust: 100%;
+    font: 300 100%/1 Roboto Mono, monospace;
+    font-size: 14px;
+}
+
+.hljs > *::selection {
+    background-color: #3e4451;
+}
+
+.hljs-comment {
+    color: #656565;
+    font-style: italic;
+}
+
+.hljs-selector-tag {
+    color: #C792EA;
+}
+
+.hljs-string,
+.hljs-subst {
+    color: #9ccc65;
+}
+
+.hljs-number,
+.hljs-regexp,
+.hljs-variable,
+.hljs-template-variable {
+    color: #F77669;
+}
+
+.hljs-keyword {
+    color: #C792EA;
+}
+
+.hljs-function > .hljs-title {
+    color: #75A5FF;
+}
+
+.hljs-tag {
+    color: #ce93d8;
+}
+
+.hljs-name {
+    color: #4dd0e1;
+}
+
+.hljs-type {
+    color: #da4939;
+}
+
+.hljs-attribute {
+    color: #80CBBF;
+}
+
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-link {
+    color: #C792EA;
+}
+
+.hljs-params {
+    color: #EEFFF7;
+}
+
+
+.hljs-meta {
+    color: #75A5FF;
+}
+
+.hljs-title {
+    color: #75A5FF;
+}
+
+.hljs-section {
+    color: #ffc66d;
+}
+
+.hljs-addition {
+    background-color: #144212;
+    color: #e6e1dc;
+    display: inline-block;
+    width: 100%;
+}
+
+.hljs-deletion {
+    background-color: #600;
+    color: #e6e1dc;
+    display: inline-block;
+    width: 100%;
+}
+
+.hljs-selector-class {
+    color: #FFCB68;
+}
+
+.hljs-selector-id {
+    color: #F77669;
+}
+
+.hljs-emphasis {
+    font-style: italic;
+}
+
+.hljs-strong {
+    font-weight: bold;
+}
+
+.hljs-link {
+    text-decoration: underline;
+}

packages/docs/src/highlightjs/material-light.scss

@@ -0,0 +1,90 @@
+/** Adapted from https://github.com/atom-material/atom-material-syntax-light */
+.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em;
+    background: #FAFAFA;
+    color: #37474f;
+    -webkit-font-smoothing: antialiased;
+    text-size-adjust: 100%;
+    font: 300 100%/1 Roboto Mono, monospace;
+    font-size: 14px;
+}
+
+.hljs > *::selection,
+.hljs-section {
+    background-color: #D6EDEA;
+}
+
+.hljs-comment {
+    color: #B0BEC5;
+    font-style: italic;
+}
+
+.hljs-tag,
+.hljs-selector-tag,
+.hljs-regexp,
+.hljs-meta {
+    color: #9c27b0;
+}
+
+.hljs-string,
+.hljs-subst {
+    color: #0d904f;
+}
+
+.hljs-number,
+.hljs-variable,
+.hljs-template-variable {
+    color: #80CBC4;
+}
+
+.hljs-name,
+.hljs-keyword,
+.hljs-type,
+.hljs-attribute {
+    color: #3b78e7;
+}
+
+.hljs-title,
+.hljs-function > .hljs-title,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-link {
+    color: #6182B8;
+}
+
+.hljs-params {
+    color: #d81b60;
+}
+
+.hljs-addition {
+    color: #3b78e7;
+    display: inline-block;
+    width: 100%;
+}
+
+.hljs-deletion {
+    color: #E53935;
+    display: inline-block;
+    width: 100%;
+}
+
+.hljs-selector-id,
+.hljs-selector-class {
+    color: #8796B0;
+}
+
+.hljs-emphasis {
+    font-style: italic;
+}
+
+.hljs-strong {
+    font-weight: bold;
+}
+
+.hljs-link {
+    text-decoration: underline;
+}

packages/docs/src/main.scss

@@ -4,6 +4,8 @@
 
 @import './app-theme';
 @import './styles/common';
+@import './styles/markdown';
+@import './styles/mosaic-fixed';
 
 
 $primary: mc-palette($mc-blue, 400, 500, 600);

packages/docs/src/styles/_markdown.scss

@@ -0,0 +1,77 @@
+// Styles for overview and guide docs generated via `marked` from the material2 repo.
+
+.docs-markdown {
+    max-width: 100%;
+
+    h1 {
+        display: inline-block;
+        font-size: 34px;
+        font-weight: 400;
+        padding: 5px;
+    }
+
+    h2 {
+        font-size: 24px;
+    }
+
+    h3 {
+        font-size: 20px;
+    }
+
+    h2, h4 {
+        margin-top: 40px;
+    }
+
+    h5 {
+        font-size: 18px;
+    }
+
+    p, ul, ol {
+        font-size: 16px;
+        line-height: 28px;
+    }
+
+    a {
+        text-decoration: none;
+    }
+
+    td code {
+        font-size: 14px;
+    }
+
+    pre {
+        border-radius: 5px;
+        display: flex;
+        margin: 16px auto;
+        overflow-x: auto;
+        padding: 20px;
+        white-space: pre-wrap;
+
+        code {
+            padding: 0;
+            font-size: 100%;
+        }
+    }
+
+    code {
+        padding: 3px;
+    }
+}
+
+.docs-header-link {
+    header-link a {
+        text-decoration: none;
+        // deduct -30px so the anchor icon will be positioned outside the content
+        margin-left: -30px;
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    .material-icons {
+        visibility: hidden;
+    }
+
+    &:hover .material-icons {
+        visibility: visible;
+    }
+}

packages/docs/src/styles/_mosaic-fixed.scss

@@ -0,0 +1,5 @@
+
+.mc-tab-group {
+    // TODO: need none
+    text-align: left !important;
+}

tsconfig.webpack.json

@@ -49,6 +49,7 @@
         "packages/**/*.e2e.ts",
         "packages/mosaic-examples/**/*.*",
         "packages/cdk/schematics/**/*.*",
+        "packages/docs/**/*.*",
         "packages/dev-app/**/*.*"
     ],
     "angularCompilerOptions": {