feat: docs app

docs/app/blocks/components/code-block/code-block.component.scss

@@ -0,0 +1,39 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  $code-lines-fg: #515877;
+  $code-block-bg: nb-theme(code-block-bg);
+
+  .container {
+    display: flex;
+    padding: 0;
+    font-size: 1rem;
+    border-radius: 0.5rem;
+    background: $code-block-bg;
+    overflow-x: auto;
+
+    .lines {
+      display: flex;
+      flex-direction: column;
+      text-align: end;
+      font-size: 0.875rem;
+      padding: 2rem 0.5rem 0.5rem;
+      border-radius: 0.5rem 0 0 0.5rem;
+      color: $code-lines-fg;
+      user-select: none;
+    }
+
+    pre {
+      margin-bottom: 0;
+      background: transparent;
+      overflow: visible;
+
+      code.hljs {
+        background: transparent;
+        padding-left: 0.5rem;
+        margin-bottom: 0;
+      }
+    }
+  }
+}

docs/app/blocks/components/code-block/code-block.component.ts

@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+import { NgxHighlightService } from '../../../@theme/services/highlight.service';
+
+@Component({
+  selector: 'ngx-code-block',
+  styleUrls: ['./code-block.component.scss'],
+  template: `
+    <div class="container">
+      <div class="lines">
+        <span *ngFor="let line of lines">{{ line }}</span>
+      </div>
+      <pre><code class="hljs" [innerHTML]="code"></code></pre>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxCodeBlockComponent {
+
+  @Input() path = '';
+  @Input() firstLine: number;
+  @Input() lastLine: number;
+
+  @Input('code')
+  set rawCode(value) {
+    const highlighted = this.highlightService.highlight(value);
+    this.code = this.getVisible(highlighted);
+    this.lines = this.createLines(this.code);
+  }
+
+  code: SafeHtml;
+  lines: number[] = [];
+
+  constructor(private highlightService: NgxHighlightService) {
+  }
+
+  getVisible(code): string {
+    return code
+      .split('\n')
+      .slice(this.firstLine - 1, this.lastLine)
+      .join('\n');
+  }
+
+  createLines(code): number[] {
+    const length = code.split('\n').length;
+    return Array(length).fill(0).map((_, i) => i + (this.firstLine || 1));
+  }
+}