Merge pull request #12784 from kyjus25/bug/installation-syntax-highli…

…ghting Fixed #12783: Syntax highlighting on Docs Installation page
primefaces · Mar 23, 2023 · 1b18d58 · 1b18d58
2 parents c575680 + 882040a
commit 1b18d58
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 8 deletions.
diff --git a/angular.json b/angular.json
@@ -45,7 +45,9 @@
               ],
               "scripts": [
                 "./node_modules/prismjs/prism.js",
-                "./node_modules/prismjs/components/prism-typescript.js"
+                "./node_modules/prismjs/components/prism-typescript.js",
+                "./node_modules/prismjs/components/prism-scss.js",
+                "./node_modules/prismjs/components/prism-bash.js"
               ],
               "allowedCommonJsDependencies": [
                 "@fullcalendar/timegrid",

diff --git a/src/app/showcase/doc/icons/downloaddoc.ts b/src/app/showcase/doc/icons/downloaddoc.ts
@@ -16,6 +16,7 @@ export class DownloadDoc {
     @Input() title: string;
 
     code: Code = {
-        basic: `npm install primeicons`
+        command: `
+npm install primeicons`
     };
 }
diff --git a/src/app/showcase/doc/icons/importdoc.ts b/src/app/showcase/doc/icons/importdoc.ts
@@ -16,6 +16,7 @@ export class ImportDoc {
     @Input() title: string;
 
     code: Code = {
-        typescript: `@import "primeicons/primeicons.css";`
+        scss: `
+@import "primeicons/primeicons.css";`
     };
 }
diff --git a/src/app/showcase/doc/installation/downloaddoc.ts b/src/app/showcase/doc/installation/downloaddoc.ts
@@ -16,10 +16,11 @@ export class DownloadDoc {
     @Input() title: string;
 
     code: Code = {
-        basic: `// with npm
+        command: `
+# with npm
 npm install primeng primeicons
 
-// with yarn
+# with yarn
 yarn add primeng primeicons`
     };
 }
diff --git a/src/app/showcase/doc/installation/stylesdoc.ts b/src/app/showcase/doc/installation/stylesdoc.ts
@@ -23,7 +23,7 @@ export class StylesDoc {
     @Input() title: string;
 
     code1: Code = {
-        basic: `...
+        typescript: `...
 "styles": [
     "node_modules/primeicons/primeicons.css",
     "node_modules/primeng/resources/themes/lara-light-blue/theme.css",
@@ -33,8 +33,10 @@ export class StylesDoc {
     };
 
     code2: Code = {
-        basic: `@import "primeng/resources/themes/lara-light-blue/theme.css";
+        scss: `
+@import "primeng/resources/themes/lara-light-blue/theme.css";
 @import "primeng/resources/primeng.css";
-@import "primeicons/primeicons.css";`
+@import "primeicons/primeicons.css";
+        `
     };
 }
diff --git a/src/app/showcase/domain/code.ts b/src/app/showcase/domain/code.ts
@@ -2,6 +2,7 @@ export interface Code {
     basic?: string;
     html?: string;
     typescript?: string;
+    command?: string;
     scss?: string;
     data?: string;
     module?: string;

diff --git a/src/app/showcase/layout/doc/code/app.code.component.html b/src/app/showcase/layout/doc/code/app.code.component.html
@@ -66,5 +66,15 @@
 <pre *ngIf="lang === 'data'" class="language-json"><code #codeElement>
 {{code.data}}
 
+</code></pre>
+
+<pre *ngIf="lang === 'scss'" class="language-scss"><code #codeElement>
+    {{code.scss}}
+
+</code></pre>
+
+<pre *ngIf="lang === 'command'" class="language-shell"><code #codeElement>
+    {{code.command}}
+
 </code></pre>
 </div>