feat(addon-doc): add header

angular.json

@@ -496,7 +496,10 @@
                         "stylePreprocessorOptions": {
                             "includePaths": ["projects/core/styles"]
                         },
-                        "scripts": ["node_modules/marked/lib/marked.js"],
+                        "scripts": [
+                            "node_modules/prismjs/prism.js",
+                            "node_modules/marked/lib/marked.js"
+                        ],
                         "es5BrowserSupport": true
                     },
                     "configurations": {

package.json

@@ -60,22 +60,23 @@
         "@angular/platform-server": "^9.1.12",
         "@angular/router": "~9.1.12",
         "@angularclass/hmr": "^2.1.3",
-        "@ng-web-apis/common": "1.7.0",
-        "@ng-web-apis/intersection-observer": "2.0.1",
+        "@ng-web-apis/common": "1.9.0",
+        "@ng-web-apis/intersection-observer": "2.1.0",
         "@ng-web-apis/mutation-observer": "1.1.0",
         "@ng-web-apis/resize-observer": "1.0.3",
-        "@ng-web-apis/universal": "^1.6.0",
+        "@ng-web-apis/universal": "1.9.2",
         "@tinkoff/angular-contenteditable-accessor": "1.1.0",
         "@tinkoff/ng-dompurify": "3.0.0",
-        "@tinkoff/ng-event-plugins": "1.0.1",
+        "@tinkoff/ng-event-plugins": "2.0.0",
         "@tinkoff/ng-polymorpheus": "2.1.0",
         "angular2-text-mask": "9.0.0",
         "classlist.js": "^1.1.20150312",
         "core-js": "^2.6.9",
-        "dompurify": "1.0.11",
-        "highlight.js": "^9.15.5",
-        "ngx-highlightjs": "3.0.3",
-        "ngx-markdown": "^8.2.1",
+        "dompurify": "^2.2.3",
+        "highlight.js": "^10.4.1",
+        "intersection-observer": "^0.12.0",
+        "ngx-highlightjs": "^4.1.3",
+        "ngx-markdown": "^11.0.1",
         "preboot": "^7.0.0",
         "rxjs": "~6.6.3",
         "tslib": "^1.10.0",
@@ -92,7 +93,7 @@
         "@commitlint/cli": "^11.0.0",
         "@commitlint/config-conventional": "^11.0.0",
         "@tinkoff/linters": "^0.6.0",
-        "@types/dompurify": "^0.0.32",
+        "@types/dompurify": "^2.0.4",
         "@types/express": "4.16.1",
         "@types/jasmine": "~3.3.15",
         "@types/jasmine-ajax": "^3.1.40",
@@ -129,7 +130,6 @@
         "ts-loader": "^5.3.3",
         "ts-node": "~7.0.0",
         "tslint": "~5.15.0",
-        "tslint-teamcity-reporter": "^3.2.2",
         "typescript": "~3.8.3"
     },
     "husky": {

projects/addon-doc/README.md

@@ -32,24 +32,11 @@ npm i @taiga-ui/addon-doc
 
 2. Configure languages to highlight in your main module:
 
-    ```typescript
-    import * as typescript from 'highlight.js/lib/languages/typescript';
-    import {HighlightLanguage} from 'ngx-highlightjs';
-
-    /**
-     * Import every language you wish to highlight here
-     * NOTE: The name of each language must match the file name its imported from
-     */
-    export function hljsLanguages(): ReadonlyArray<HighlightLanguage> {
-        return [{name: 'typescript', func: typescript}];
-    }
-    ```
-
     ```typescript
     import {NgModule} from '@angular/core';
     import {TuiDocMainModule} from '@taiga-ui/addon-doc';
     import {hljsLanguages} from './hljsLanguages';
-    import {HIGHLIGHT_OPTIONS} from 'ngx-highlightjs';
+    import {HIGHLIGHT_OPTIONS, HighlightLanguage} from 'ngx-highlightjs';
     import {AppComponent} from './app.component';
 
     @NgModule({
@@ -60,7 +47,13 @@ npm i @taiga-ui/addon-doc
             {
                 provide: HIGHLIGHT_OPTIONS,
                 useValue: {
-                    languages: hljsLanguages,
+                    coreLibraryLoader: () => import('highlight.js/lib/core'),
+                    lineNumbersLoader: () => import('highlightjs-line-numbers.js'), // Optional, only if you want the line numbers
+                    languages: {
+                        typescript: () => import('highlight.js/lib/languages/typescript'),
+                        less: () => import('highlight.js/lib/languages/less'),
+                        xml: () => import('highlight.js/lib/languages/xml'),
+                    },
                 },
             },
         ],

projects/addon-doc/package.json

@@ -25,11 +25,11 @@
         "@taiga-ui/core": "1.6.5",
         "@taiga-ui/kit": "1.6.5",
         "schematics-utilities": "1.0.1",
-        "highlight.js": "^9.15.5",
-        "ngx-highlightjs": "3.0.3"
+        "highlight.js": "^10.0.0",
+        "ngx-highlightjs": "^4.0.0"
     },
     "devDependencies": {
         "@taiga-ui/core": "1.6.5",
         "@taiga-ui/kit": "1.6.5"
     }
-}
+}

projects/addon-doc/src/components/code/code.template.html

@@ -1,2 +1,2 @@
 <p *ngIf="filename" class="header">{{filename}}</p>
-<pre class="code"><code [highlight]="code"></code></pre>
+<pre class="code"><code [lineNumbers]="true" [highlight]="code"></code></pre>

projects/addon-doc/src/components/demo/demo.template.html

@@ -3,9 +3,9 @@
     <tui-tooltip size="l" describeId="form" [content]="tooltip">
         <ng-template #tooltip>
             {{texts[0]}}
-            <a tuiLink tuiMode="light" routerLink="/tui-mode"
-                ><code>tuiMode</code></a
-            >
+            <a tuiLink tuiMode="light" routerLink="/tui-mode">
+                <code>tuiMode</code>
+            </a>
         </ng-template>
     </tui-tooltip>
     <div tuiGroup class="tui-space_left-3" [collapsed]="true">