feat(showcase): use marked and prismjs to highlight the code

apps/showcase/package.json

@@ -72,14 +72,17 @@
     "ag-grid-angular": "~32.3.0",
     "ag-grid-community": "~32.3.0",
     "bootstrap": "5.3.3",
-    "highlight.js": "^11.8.0",
+    "clipboard": "^2.0.11",
     "intl-messageformat": "~10.7.0",
+    "marked": "^12.0.0",
     "monaco-editor": "~0.52.0",
-    "ngx-highlightjs": "^12.0.0",
+    "ngx-markdown": "^18.1.0",
     "ngx-monaco-editor-v2": "^18.0.0",
     "ngx-monaco-tree": "^18.1.0",
     "pixelmatch": "^5.2.1",
     "pngjs": "^7.0.0",
+    "prism-themes": "^1.9.0",
+    "prismjs": "^1.28.0",
     "rxjs": "^7.8.1",
     "sass-loader": "^14.0.0",
     "tslib": "^2.6.2",

apps/showcase/project.json

@@ -77,6 +77,7 @@
         ],
         "styles": [
           "apps/showcase/src/styles.scss",
+          "prism-themes/themes/prism-vsc-dark-plus.css",
           {
             "inject": false,
             "input": "apps/showcase/src/style/dark-theme/dark-theme.scss",
@@ -88,7 +89,18 @@
             "bundleName": "horizon-theme"
           }
         ],
-        "scripts": []
+        "scripts": [
+          "clipboard",
+          "prismjs",
+          "prismjs/components/prism-bash",
+          "prismjs/components/prism-css",
+          "prismjs/components/prism-json",
+          "prismjs/components/prism-markdown",
+          "prismjs/components/prism-markup",
+          "prismjs/components/prism-regex",
+          "prismjs/components/prism-typescript",
+          "prismjs/components/prism-yaml"
+        ]
       },
       "configurations": {
         "production": {

apps/showcase/src/app/app.module.ts

@@ -3,7 +3,7 @@ import {PetApi} from '@o3r-training/showcase-sdk';
 import { registerLocaleData } from '@angular/common';
 import localeEN from '@angular/common/locales/en';
 import localeFR from '@angular/common/locales/fr';
-import { isDevMode, NgModule } from '@angular/core';
+import { isDevMode, NgModule, SecurityContext } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgbOffcanvasModule } from '@ng-bootstrap/ng-bootstrap';
@@ -26,11 +26,12 @@ import {
 import { ConsoleLogger, Logger, LOGGER_CLIENT_TOKEN, LoggerService } from '@o3r/logger';
 import { OTTER_RULES_ENGINE_DEVTOOLS_OPTIONS, RulesEngineRunnerModule } from '@o3r/rules-engine';
 import { OTTER_STYLING_DEVTOOLS_OPTIONS, StylingDevtoolsModule } from '@o3r/styling';
-import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
-import { ScrollBackTopPresComponent, SidenavPresComponent } from '../components/index';
+import { CLIPBOARD_OPTIONS, provideMarkdown } from 'ngx-markdown';
+import { ClipboardButtonPresComponent, ScrollBackTopPresComponent, SidenavPresComponent } from '../components/index';
 import { DatePickerHebrewInputPresComponent } from '../components/utilities/date-picker-input-hebrew';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { markedAlert } from '../helpers/marked-alert-extension';
 
 
 const runtimeChecks: Partial<RuntimeChecks> = {
@@ -113,27 +114,25 @@ export function registerCustomComponents(): Map<string, any> {
   ],
   providers: [
     {provide: MESSAGE_FORMAT_CONFIG, useValue: {}},
-    {
-      provide: HIGHLIGHT_OPTIONS,
-      useValue: {
-        coreLibraryLoader: () => import('highlight.js/lib/core'),
-        languages: {
-          bash: () => import('highlight.js/lib/languages/bash'),
-          css: () => import('highlight.js/lib/languages/css'),
-          json: () => import('highlight.js/lib/languages/json'),
-          typescript: () => import('highlight.js/lib/languages/typescript'),
-          xml: () => import('highlight.js/lib/languages/xml')
-        }
-      }
-    },
     {provide: LOGGER_CLIENT_TOKEN, useValue: new ConsoleLogger()},
     {provide: PetApi, useFactory: petApiFactory, deps: [LoggerService]},
     {provide: OTTER_CONFIGURATION_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}},
     {provide: OTTER_LOCALIZATION_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}},
     {provide: OTTER_RULES_ENGINE_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}},
     {provide: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}},
     {provide: OTTER_APPLICATION_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true, appName: 'showcase'}},
-    {provide: OTTER_STYLING_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}}
+    {provide: OTTER_STYLING_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}},
+    provideMarkdown({
+      clipboardOptions: {
+        provide: CLIPBOARD_OPTIONS,
+        useValue: {
+          buttonComponent: ClipboardButtonPresComponent
+        }
+      },
+      markedExtensions: [markedAlert()],
+      /* Templates are only internal, no need to sanitize */
+      sanitize: SecurityContext.NONE
+    })
   ],
   bootstrap: [AppComponent]
 })

apps/showcase/src/app/component-replacement/component-replacement.component.ts

@@ -5,7 +5,7 @@ import { IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavPresComponent } from '../../compo
 import { AsyncPipe } from '@angular/common';
 import { ComponentReplacementPresComponent } from '../../components/showcase/component-replacement/component-replacement-pres.component';
 import { RouterModule } from '@angular/router';
-import { CopyTextPresComponent } from '../../components/utilities/copy-text/copy-text-pres.component';
+import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
@@ -15,7 +15,15 @@ import { CopyTextPresComponent } from '../../components/utilities/copy-text/copy
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [RouterModule, InPageNavPresComponent, AsyncPipe, IN_PAGE_NAV_PRES_DIRECTIVES, ComponentReplacementPresComponent, CopyTextPresComponent]
+  imports: [
+    RouterModule,
+    InPageNavPresComponent,
+    AsyncPipe,
+    IN_PAGE_NAV_PRES_DIRECTIVES,
+    ComponentReplacementPresComponent,
+    MarkdownModule
+  ],
+  providers: [provideMarkdown()]
 })
 export class ComponentReplacementComponent implements AfterViewInit {
   private readonly inPageNavPresService = inject(InPageNavPresService);

apps/showcase/src/app/component-replacement/component-replacement.template.html

@@ -28,7 +28,11 @@ <h2 id="component-replacement-example">Example</h2>
     <h2 id="comp-replacement-install">How to install</h2>
     <p> To use the <i>component replacement mechanism</i> you'll need to install the <i>&#64;o3r/components</i> package.</p>
     <div>
-      <o3r-copy-text-pres [wrap]="true" language="bash" text="ng add @o3r/components"></o3r-copy-text-pres>
+      <markdown clipboard ngPreserveWhitespaces>
+        ```bash
+        ng add &#64;o3r/components
+        ```
+      </markdown>
     </div>
 
     <h2 id="comp-replacement-references">References</h2>

apps/showcase/src/app/configuration/configuration.component.ts

@@ -3,7 +3,8 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, computed, inject, Qu
 import { RouterModule } from '@angular/router';
 import { ConfigurationBaseServiceModule } from '@o3r/configuration';
 import { O3rComponent } from '@o3r/core';
-import { ConfigurationPresComponent, CopyTextPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components/index';
+import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { ConfigurationPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components/index';
 import { ConfigurationPresConfig } from '../../components/showcase/configuration/configuration-pres.config';
 
 const CONFIG_OVERRIDE: ConfigurationPresConfig = {
@@ -24,10 +25,11 @@ const CONFIG_OVERRIDE: ConfigurationPresConfig = {
     RouterModule,
     ConfigurationPresComponent,
     ConfigurationBaseServiceModule,
-    CopyTextPresComponent,
     IN_PAGE_NAV_PRES_DIRECTIVES,
-    AsyncPipe
+    AsyncPipe,
+    MarkdownModule
   ],
+  providers: [provideMarkdown()],
   templateUrl: './configuration.template.html',
   styleUrls: ['./configuration.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/app/configuration/configuration.template.html

@@ -28,7 +28,7 @@ <h2 id="configuration-examples">Examples</h2>
       </p>
       <o3r-configuration-pres [config]="config()"></o3r-configuration-pres>
       <div class="row">
-        <o3r-copy-text-pres language="html" [text]="codeConfig()" class="col-12 col-md-8 col-lg-9"></o3r-copy-text-pres>
+        <markdown clipboard ngPreserveWhitespaces [data]="codeConfig() | language: 'html'" class="col-12 col-md-8 col-lg-9"></markdown>
         <div class="d-flex gap-2 align-self-start mt-md-2 pb-3 col-12 col-md-4 col-lg-3">
           <button type="button" class="btn btn-primary" id="btn-override-config" [disabled]="!!config()"
                   [class.disabled]="config()" (click)="toggleConfig()">Override</button>
@@ -43,19 +43,39 @@ <h2 id="configuration-examples">Examples</h2>
     </div>
     <h2 id="configuration-install">How to install</h2>
     <div>
-      <o3r-copy-text-pres [wrap]="true" language="bash" text="ng add @o3r/configuration"></o3r-copy-text-pres>
+      <markdown clipboard ngPreserveWhitespaces>
+        ```bash
+        ng add &#64;o3r/configuration
+        ```
+      </markdown>
     </div>
     <h2 id="configuration-component-generation">How to generate a configurable component</h2>
-    <o3r-copy-text-pres [wrap]="true" language="bash" text="ng g component ComponentName --use-otter-config"></o3r-copy-text-pres>
+    <markdown clipboard ngPreserveWhitespaces>
+      ```bash
+      ng g component ComponentName --use-otter-config
+      ```
+    </markdown>
     <h2 id="configuration-add-config-later">How to add configuration to a component</h2>
-    <o3r-copy-text-pres [wrap]="true" language="bash" text="ng g configuration-to-component --path='path/to/the/component/class/file'"></o3r-copy-text-pres>
+    <markdown clipboard ngPreserveWhitespaces>
+      ```bash
+      ng g configuration-to-component --path='path/to/the/component/class/file'
+      ```
+    </markdown>
     <h2 id="configuration-metadata">Metadata</h2>
     <div>
       <h3>How to extract</h3>
-      <o3r-copy-text-pres [wrap]="true" language="bash" text="ng run project-name:extract-components"></o3r-copy-text-pres>
+      <markdown clipboard ngPreserveWhitespaces>
+        ```bash
+        ng run project-name:extract-components
+        ```
+      </markdown>
       <p>It will extract components' configuration and generate the two following files: <code>component.config.metadata.json</code> and <code>component.class.metadata.json</code></p>
       <p>Check the list of options available by running:</p>
-      <o3r-copy-text-pres [wrap]="true" language="bash" text="ng run project-name:extract-components --help"></o3r-copy-text-pres>
+      <markdown clipboard ngPreserveWhitespaces>
+        ```bash
+        ng run project-name:extract-components --help
+        ```
+      </markdown>
     </div>
     <h2 id="configuration-references">References</h2>
     <div>

apps/showcase/src/app/design-token/design-token.component.ts

@@ -2,19 +2,21 @@ import { AsyncPipe } from '@angular/common';
 import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
-import { CopyTextPresComponent, DesignTokenPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components';
+import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { DesignTokenPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
   selector: 'o3r-design-token',
   standalone: true,
   imports: [
     AsyncPipe,
-    CopyTextPresComponent,
     DesignTokenPresComponent,
     RouterLink,
-    IN_PAGE_NAV_PRES_DIRECTIVES
+    IN_PAGE_NAV_PRES_DIRECTIVES,
+    MarkdownModule
   ],
+  providers: [provideMarkdown()],
   templateUrl: './design-token.template.html',
   styleUrl: './design-token.style.scss',
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/app/design-token/design-token.template.html

@@ -37,11 +37,23 @@ <h2 id="design-token-examples">Examples</h2>
       <a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/components/showcase/design" target="_blank" rel="noopener">Source code</a>
     </div>
     <h2 id="design-token-install">How to install</h2>
-    <o3r-copy-text-pres [wrap]="true" language="bash" text="ng add @o3r/design"></o3r-copy-text-pres>
+    <markdown clipboard ngPreserveWhitespaces>
+      ```bash
+      ng add &#64;o3r/design
+      ```
+    </markdown>
     <h2 id="configuration-add-config-later">How to add design-tokens to a component</h2>
-    <o3r-copy-text-pres [wrap]="true" language="bash" text="ng g design-token-to-component --path='path/to/the/component/class/file'"></o3r-copy-text-pres>
-    <h2 id="design-token-install">How to extract design-tokens from Sass files</h2>
-    <o3r-copy-text-pres [wrap]="true" language="bash" text="ng g extract-token --component-file-patterns='path/to/the/components/**/*.scss'"></o3r-copy-text-pres>
+    <markdown clipboard ngPreserveWhitespaces>
+      ```bash
+      ng g design-token-to-component --path='path/to/the/component/class/file'
+      ```
+    </markdown>
+    <h2 id="design-token-extract">How to extract design-tokens from Sass files</h2>
+    <markdown clipboard ngPreserveWhitespaces>
+      ```bash
+      ng g extract-token --component-file-patterns='path/to/the/components/**/*.scss'
+      ```
+    </markdown>
     <h2 id="design-token-references">References</h2>
     <div>
       <ul>

apps/showcase/src/app/dynamic-content/dynamic-content.component.ts

@@ -3,7 +3,8 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, V
 import { RouterModule } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
 import { DynamicContentModule } from '@o3r/dynamic-content';
-import { CopyTextPresComponent, DynamicContentPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components/index';
+import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
+import { DynamicContentPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components/index';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
@@ -14,9 +15,10 @@ import { CopyTextPresComponent, DynamicContentPresComponent, IN_PAGE_NAV_PRES_DI
     DynamicContentModule,
     IN_PAGE_NAV_PRES_DIRECTIVES,
     DynamicContentPresComponent,
-    CopyTextPresComponent,
-    AsyncPipe
+    AsyncPipe,
+    MarkdownModule
   ],
+  providers: [provideMarkdown()],
   templateUrl: './dynamic-content.template.html',
   styleUrls: ['./dynamic-content.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/app/dynamic-content/dynamic-content.template.html

@@ -22,7 +22,7 @@ <h2 id="dynamic-content-example">Example</h2>
       </p>
       <o3r-dynamic-content-pres></o3r-dynamic-content-pres>
       <div class="row">
-        <o3r-copy-text-pres class="col-12 col-md-8 col-lg-9" language="html" [text]="codeDataDynamicContentPath"></o3r-copy-text-pres>
+        <markdown clipboard [data]="codeDataDynamicContentPath | language: 'html'" class="col-12 col-md-8 col-lg-9"></markdown>
         <div class="d-flex gap-2 align-self-start mt-md-2 pb-3 col-12 col-md-4 col-lg-3">
           <button type="button" class="btn btn-primary" id="btn-override-config" [disabled]="!!bodyDynamicContentPath"
                   [class.disabled]="bodyDynamicContentPath" (click)="setLocalStorage()">Override</button>
@@ -37,7 +37,11 @@ <h2 id="dynamic-content-example">Example</h2>
     </div>
     <h2 id="dynamic-content-install">How to install</h2>
     <div>
-      <o3r-copy-text-pres [wrap]="true" language="bash" text="ng add @o3r/dynamic-content"></o3r-copy-text-pres>
+      <markdown clipboard ngPreserveWhitespaces>
+        ```bash
+        ng add &#64;o3r/dynamic-content
+        ```
+      </markdown>
     </div>
     <h2 id="dynamic-content-references">References</h2>
     <div>

apps/showcase/src/app/home/home.component.ts

@@ -1,13 +1,14 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { O3rComponent } from '@o3r/core';
 import { DynamicContentModule } from '@o3r/dynamic-content';
-import { CopyTextPresComponent } from '../../components';
+import { MarkdownModule, provideMarkdown } from 'ngx-markdown';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
   selector: 'o3r-home',
   standalone: true,
-  imports: [DynamicContentModule, CopyTextPresComponent],
+  imports: [DynamicContentModule, MarkdownModule],
+  providers: [provideMarkdown()],
   templateUrl: './home.template.html',
   styleUrls: ['./home.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/app/home/home.template.html

@@ -19,20 +19,40 @@ <h3 class="display-3 text-center mt-0 mb-5">Get started with Otter</h3>
         <h3>Setup the project ...</h3>
         <p class="mt-4 text-secondary">
           Create a new project <i>(npm)</i>
-          <o3r-copy-text-pres language="bash" text="npm create @o3r <your-project>"></o3r-copy-text-pres>
+          <markdown clipboard ngPreserveWhitespaces>
+            ```bash
+            npm create &#64;o3r &lt;your-project&gt;
+            ```
+          </markdown>
           or <i>(yarn)</i>
-          <o3r-copy-text-pres language="bash" text="yarn create @o3r <your-project>"></o3r-copy-text-pres>
+          <markdown clipboard ngPreserveWhitespaces>
+            ```bash
+            yarn create &#64;o3r &lt;your-project&gt;
+            ```
+          </markdown>
         </p>
       </div>
       <div class="col-lg-6 py-lg-5 pe-lg-5 ps-lg-5 border-lg-start">
         <h3>... and start to create</h3>
         <p class="mt-4 text-secondary">
           A new application:
-          <o3r-copy-text-pres language="bash" text="ng g application <app-name>"></o3r-copy-text-pres>
+          <markdown clipboard ngPreserveWhitespaces>
+            ```bash
+            ng g application &lt;app-name&gt;
+            ```
+          </markdown>
           A new SDK:
-          <o3r-copy-text-pres language="bash" text="ng g sdk <sdk-name>"></o3r-copy-text-pres>
+          <markdown clipboard ngPreserveWhitespaces>
+            ```bash
+            ng g sdk &lt;sdk-name&gt;
+            ```
+          </markdown>
           Or a new library:
-          <o3r-copy-text-pres language="bash" text="ng g library <lib-name>"></o3r-copy-text-pres>
+          <markdown clipboard ngPreserveWhitespaces>
+            ```bash
+            ng g library &lt;lib-name&gt;
+            ```
+          </markdown>
         </p>
       </div>
     </div>