adding bash syntax highlighting

packages/documentation/package.json

@@ -27,6 +27,7 @@
 		"@versini/ui-styles": "workspace:../ui-styles",
 		"@versini/ui-system": "workspace:../ui-system",
 		"clsx": "2.1.0",
+		"prismjs": "1.29.0",
 		"prism-react-renderer": "2.3.1",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",

packages/documentation/src/GettingStarted/2-Installation.stories.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
 import { linkTo, Story } from "@ladle/react";
 import {
 	ButtonIcon,
@@ -9,12 +11,16 @@ import {
 } from "@versini/ui-components";
 import { IconNext, IconPrevious } from "@versini/ui-icons";
 import { Flexgrid, FlexgridItem } from "@versini/ui-system";
-import { Highlight, themes } from "prism-react-renderer";
+import { Highlight, Prism, themes } from "prism-react-renderer";
 
 export default {
 	title: "Getting Started",
 };
 
+(typeof global !== "undefined" ? global : window).Prism = Prism;
+// @ts-ignore
+await import("prismjs/components/prism-bash");
+
 const data = [
 	{
 		id: 1,
@@ -44,9 +50,6 @@ const data = [
 	},
 ];
 
-const installBlock = `$ npm install --save-dev @versini/ui-styles
-$ npm install --save @versini/ui-components`;
-
 export const Installation: Story<any> = () => (
 	<>
 		<h1>Installation</h1>
@@ -87,7 +90,12 @@ export const Installation: Story<any> = () => (
 			If you only need some core components and of course the CSS styles
 			associated<sup>1</sup>, use the following command:
 		</p>
-		<Highlight theme={themes.vsDark} code={installBlock} language="jsx">
+		<Highlight
+			theme={themes.vsDark}
+			code={`$ npm install --save-dev @versini/ui-styles
+$ npm install --save @versini/ui-components`}
+			language="bash"
+		>
 			{({ style, tokens, getLineProps, getTokenProps }) => (
 				<pre style={style}>
 					{tokens.map((line, i) => (
@@ -107,7 +115,7 @@ export const Installation: Story<any> = () => (
 		<Highlight
 			theme={themes.vsDark}
 			code={`$ npm install --save react react-dom`}
-			language="jsx"
+			language="bash"
 		>
 			{({ style, tokens, getLineProps, getTokenProps }) => (
 				<pre style={style}>