Removed prism and added cosmetics

angular.json

@@ -30,10 +30,6 @@
                         "styles": [
                             "src/styles.scss"
                         ],
-                        "scripts": [
-                            "node_modules/prismjs/prism.js",
-                            "node_modules/prismjs/components/prism-typescript.js"
-                        ],
                         "allowedCommonJsDependencies": ["chart.js"]
                     },
                     "configurations": {

package.json

@@ -23,7 +23,6 @@
         "primeflex": "^3.2.0",
         "primeicons": "6.0.1",
         "primeng": "14.1.2",
-        "prismjs": "1.9.0",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
         "web-animations-js": "^2.3.2",

src/app/demo/components/code/code.component.scss

@@ -1,44 +0,0 @@
-pre[class*="language-"] {
-    border-radius: 12px !important;
-
-    &:before,
-    &:after {
-        display: none !important;
-    }
-
-    code {
-        border-left: .5rem solid transparent !important;
-        box-shadow: none !important;
-        background: var(--surface-ground) !important;
-        margin: 0 !important;
-        color: var(--surface-900);
-        font-size: 14px;
-        border-radius: 10px !important;
-
-        .token {
-
-            &.tag,
-            &.keyword {
-                color: #2196F3 !important;
-            }
-
-            &.attr-name,
-            &.attr-string {
-                color: #2196F3 !important;
-            }
-
-            &.attr-value {
-                color: #4CAF50 !important;
-            }
-
-            &.punctuation {
-                color: var(--text-color);
-            }
-
-            &.operator,
-            &.string {
-                background: transparent;
-            }
-        }
-    }
-}

src/app/demo/components/code/code.component.ts

@@ -1,30 +1,14 @@
-import { Component, ElementRef, AfterViewInit, Input, NgModule, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Component, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
     selector: 'app-code',
     template: `
-        <pre [ngClass]="'language-' + lang"><code #code><ng-content></ng-content>
+        <pre class="surface-ground p-5 border-round mb-3 overflow-auto"><code class="-mt-4 p-0 line-height-3 block" [ngStyle]="{'font-family': 'monaco, Consolas, monospace'}"><ng-content></ng-content></code></pre>
-</code></pre>
+    `
-    `,
-    styleUrls: ['./code.component.scss'],
-    encapsulation: ViewEncapsulation.None
 })
-export class AppCodeComponent implements AfterViewInit {
+export class AppCodeComponent {
 
-    @Input() lang = 'markup';
-
-    @ViewChild('code') codeViewChild!: ElementRef;
-
-    constructor(public el: ElementRef) { }
-
-    ngAfterViewInit() {
-        // @ts-ignore
-        if (window['Prism']) {
-            // @ts-ignore
-            window['Prism'].highlightElement(this.codeViewChild.nativeElement);
-        }
-    }
 }
 
 @NgModule({

src/assets/layout/styles/layout/_responsive.scss

@@ -1,4 +1,4 @@
-@media screen and (min-width: 1729px) {
+@media screen and (min-width: 1960px) {
     .layout-main, .landing-wrapper {
         width: 1504px;
         margin-left: auto !important;

src/assets/layout/styles/layout/_typography.scss

@@ -3,7 +3,7 @@ h1, h2, h3, h4, h5, h6 {
     font-family: inherit;
     font-weight: 500;
     line-height: 1.2;
-    color: inherit;
+    color: var(--surface-900);
 
     &:first-child {
         margin-top: 0;

src/styles.scss

@@ -8,9 +8,6 @@ $gutter: 1rem; //for primeflex grid system
 @import "../node_modules/primeflex/primeflex.scss";
 @import "../node_modules/primeicons/primeicons.css";
 
-/* Code Highlight */
-@import "../node_modules/prismjs/themes/prism-coy.css";
-
 /* Demos */
 @import "assets/demo/styles/flags/flags.css";
 @import "assets/demo/styles/badges.scss";