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

## Proposed change

Following #2414
Replace all usage of `highlight.js` to `prismjs`

## Related issues

<!--
Please make sure to follow the [contribution
guidelines](https://github.com/amadeus-digital/Otter/blob/main/CONTRIBUTING.md)
-->

*- No issue associated -*

<!-- * 🐛 Fix #issue -->
<!-- * 🐛 Fix resolves #issue -->
<!-- * 🚀 Feature #issue -->
<!-- * 🚀 Feature resolves #issue -->
<!-- *  Pull Request #issue -->

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

@@ -80,6 +80,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",
@@ -91,7 +92,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

@@ -9,6 +9,7 @@ import localeFR from '@angular/common/locales/fr';
 import {
   isDevMode,
   NgModule,
+  SecurityContext,
 } from '@angular/core';
 import {
   BrowserModule,
@@ -75,15 +76,20 @@ import {
   PetApi,
 } from '@o3r-training/showcase-sdk';
 import {
-  HIGHLIGHT_OPTIONS,
-} from 'ngx-highlightjs';
+  CLIPBOARD_OPTIONS,
+  provideMarkdown,
+} from 'ngx-markdown';
 import {
+  ClipboardButtonPresComponent,
   ScrollBackTopPresComponent,
   SidenavPresComponent,
 } from '../components/index';
 import {
   DatePickerHebrewInputPresComponent,
 } from '../components/utilities/date-picker-input-hebrew';
+import {
+  markedAlert,
+} from '../helpers/marked-alert-extension';
 import {
   AppRoutingModule,
 } from './app-routing.module';
@@ -171,27 +177,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

@@ -16,12 +16,12 @@ import {
 import {
   O3rComponent,
 } from '@o3r/core';
+import {
+  MarkdownModule,
+} from 'ngx-markdown';
 import {
   ComponentReplacementPresComponent,
 } from '../../components/showcase/component-replacement/component-replacement-pres.component';
-import {
-  CopyTextPresComponent,
-} from '../../components/utilities/copy-text/copy-text-pres.component';
 import {
   InPageNavLink,
   InPageNavLinkDirective,
@@ -40,7 +40,14 @@ import {
   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
+  ]
 })
 export class ComponentReplacementComponent implements AfterViewInit {
   private readonly inPageNavPresService = inject(InPageNavPresService);

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

@@ -8,6 +8,9 @@ import {
 import {
   RouterModule,
 } from '@angular/router';
+import {
+  provideMarkdown,
+} from 'ngx-markdown';
 import {
   ComponentReplacementPresComponent,
 } from '../../components/showcase/component-replacement/component-replacement-pres.component';
@@ -21,9 +24,12 @@ describe('ComponentReplacementComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ComponentReplacementComponent,
+      imports: [
+        ComponentReplacementComponent,
         RouterModule.forRoot([]),
-        AsyncPipe]
+        AsyncPipe
+      ],
+      providers: [provideMarkdown()]
     }).overrideComponent(ComponentReplacementComponent, {
       remove: { imports: [ComponentReplacementPresComponent] }
     }).compileComponents();

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

@@ -21,9 +21,11 @@ import {
 import {
   O3rComponent,
 } from '@o3r/core';
+import {
+  MarkdownModule,
+} from 'ngx-markdown';
 import {
   ConfigurationPresComponent,
-  CopyTextPresComponent,
   IN_PAGE_NAV_PRES_DIRECTIVES,
   InPageNavLink,
   InPageNavLinkDirective,
@@ -51,9 +53,9 @@ const CONFIG_OVERRIDE = {
     RouterModule,
     ConfigurationPresComponent,
     ConfigurationBaseServiceModule,
-    CopyTextPresComponent,
     IN_PAGE_NAV_PRES_DIRECTIVES,
-    AsyncPipe
+    AsyncPipe,
+    MarkdownModule
   ],
   templateUrl: './configuration.template.html',
   styleUrls: ['./configuration.style.scss'],

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

@@ -14,6 +14,9 @@ import {
 import {
   O3rElement,
 } from '@o3r/testing/core';
+import {
+  provideMarkdown,
+} from 'ngx-markdown';
 import {
   ConfigurationComponent,
 } from './configuration.component';
@@ -34,7 +37,8 @@ describe('ConfigurationComponent', () => {
         StoreModule.forRoot(),
         RouterModule.forRoot([]),
         AsyncPipe
-      ]
+      ],
+      providers: [provideMarkdown()]
     });
     fixture = TestBed.createComponent(ConfigurationComponent);
     component = fixture.componentInstance;

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

@@ -17,7 +17,9 @@ import {
   O3rComponent,
 } from '@o3r/core';
 import {
-  CopyTextPresComponent,
+  MarkdownModule,
+} from 'ngx-markdown';
+import {
   DesignTokenPresComponent,
   IN_PAGE_NAV_PRES_DIRECTIVES,
   InPageNavLink,
@@ -31,10 +33,10 @@ import {
   standalone: true,
   imports: [
     AsyncPipe,
-    CopyTextPresComponent,
     DesignTokenPresComponent,
     RouterLink,
-    IN_PAGE_NAV_PRES_DIRECTIVES
+    IN_PAGE_NAV_PRES_DIRECTIVES,
+    MarkdownModule
   ],
   templateUrl: './design-token.template.html',
   styleUrl: './design-token.style.scss',

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

@@ -5,6 +5,9 @@ import {
 import {
   RouterModule,
 } from '@angular/router';
+import {
+  provideMarkdown,
+} from 'ngx-markdown';
 import {
   DesignTokenComponent,
 } from './design-token.component';
@@ -18,7 +21,8 @@ describe('DesignTokenComponent', () => {
       imports: [
         DesignTokenComponent,
         RouterModule.forRoot([])
-      ]
+      ],
+      providers: [provideMarkdown()]
     })
       .compileComponents();
 

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

@@ -20,7 +20,9 @@ import {
   DynamicContentModule,
 } from '@o3r/dynamic-content';
 import {
-  CopyTextPresComponent,
+  MarkdownModule,
+} from 'ngx-markdown';
+import {
   DynamicContentPresComponent,
   IN_PAGE_NAV_PRES_DIRECTIVES,
   InPageNavLink,
@@ -37,8 +39,8 @@ import {
     DynamicContentModule,
     IN_PAGE_NAV_PRES_DIRECTIVES,
     DynamicContentPresComponent,
-    CopyTextPresComponent,
-    AsyncPipe
+    AsyncPipe,
+    MarkdownModule
   ],
   templateUrl: './dynamic-content.template.html',
   styleUrls: ['./dynamic-content.style.scss'],