diff --git a/packages/documentation-v7/.storybook/preview.ts b/packages/documentation-v7/.storybook/preview.ts
index ec8aa24698..412b18f19e 100644
--- a/packages/documentation-v7/.storybook/preview.ts
+++ b/packages/documentation-v7/.storybook/preview.ts
@@ -1,19 +1,24 @@
 import type { Preview } from '@storybook/web-components';
 
-import DocsLayout from './blocks/layout';
-import { format } from 'prettier';
-import { badgesConfig, prettierOptions, resetComponents } from './helpers';
-import './helpers/register-web-components';
 import {
   extractArgTypesFactory,
   extractComponentDescription,
   setStencilDocJson,
 } from '@pxtrn/storybook-addon-docs-stencil';
 import { StencilJsonDocs } from '@pxtrn/storybook-addon-docs-stencil/dist/types';
+import { format } from 'prettier';
+import DocsLayout from './blocks/layout';
+import { badgesConfig, prettierOptions, resetComponents } from './helpers';
+import './helpers/register-web-components';
 
 import './styles/preview.scss';
 import themes from './styles/themes';
 
+import { SyntaxHighlighter } from '@storybook/components';
+import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
+
+SyntaxHighlighter.registerLanguage('scss', scss);
+
 import docJson from '@swisspost/design-system-components/dist/docs.json';
 
 if (docJson) setStencilDocJson(docJson as StencilJsonDocs);
diff --git a/packages/documentation-v7/package.json b/packages/documentation-v7/package.json
index 8c79428552..8af070ace7 100644
--- a/packages/documentation-v7/package.json
+++ b/packages/documentation-v7/package.json
@@ -37,6 +37,7 @@
     "@storybook/addon-essentials": "7.1.1",
     "@storybook/addon-links": "7.1.1",
     "@storybook/blocks": "7.1.1",
+    "@storybook/components": "^7.1.1",
     "@storybook/manager-api": "^7.0.26",
     "@storybook/testing-library": "0.2.0",
     "@storybook/theming": "6.5.16",
@@ -44,10 +45,12 @@
     "@storybook/web-components-vite": "7.1.1",
     "@types/mdx": "2.0.5",
     "@types/react": "18.2.17",
+    "@types/react-syntax-highlighter": "^15.5.7",
     "lit": "2.7.6",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-syntax-highlighter": "^15.5.0",
     "rimraf": "5.0.1",
     "sass": "1.64.1",
     "storybook": "7.1.1",
diff --git a/packages/documentation-v7/src/stories/foundation/color/color.docs.mdx b/packages/documentation-v7/src/stories/foundation/color/color.docs.mdx
index cd2b44a411..eb65d1d73e 100644
--- a/packages/documentation-v7/src/stories/foundation/color/color.docs.mdx
+++ b/packages/documentation-v7/src/stories/foundation/color/color.docs.mdx
@@ -5,10 +5,7 @@ import { forEach } from '../../../utils/react';
 import { ColorSwatch, SCSS_VARIABLES } from './color.blocks';
 import './color.styles.scss';
 
-<Meta
-  title="Foundations/Color"
-  parameters={{ badges: [BADGE.BETA, BADGE.NEEDS_REVISION] }}
-/>
+<Meta title="Foundations/Color" parameters={{ badges: [BADGE.BETA, BADGE.NEEDS_REVISION] }} />
 
 # Color
 
@@ -18,7 +15,8 @@ They theme our elements and components.
 <div className="alert alert-info alert-md mt-regular">
   For accessibility reasons, you should always make sure that your individually created color combinations are sufficiently contrasting. There may be a better solution than coloring elements individually.
 
-  For example, use the <LinkTo kind="utilities-background--background-containers">background utilities</LinkTo> to get elements with a specific background color and the best possible contrast color for its content.
+For example, use the <LinkTo kind="utilities-background--background-containers">background utilities</LinkTo> to get elements with a specific background color and the best possible contrast color for its content.
+
 </div>
 
 ## Brand colors
@@ -85,7 +83,7 @@ CSS variables are globally available on your page.
 
 Import the color variables from the `core` file with `@use`. This way, the color variables are scoped and don't mix with your own variables.
 
-```css dark
+```scss dark
 @use '@swisspost/design-system-styles/core' as post;
 
 .my-element {
diff --git a/packages/documentation-v7/src/stories/foundation/elevation/elevation.docs.mdx b/packages/documentation-v7/src/stories/foundation/elevation/elevation.docs.mdx
index 1085e145e8..b3c6648b83 100644
--- a/packages/documentation-v7/src/stories/foundation/elevation/elevation.docs.mdx
+++ b/packages/documentation-v7/src/stories/foundation/elevation/elevation.docs.mdx
@@ -40,7 +40,7 @@ The easiest way to add an elevation to an element is to apply an elevation class
 
 Import the elevation variables from the Design System Styles package from the `core` sass file with `@use`. This way, the elevation variables are scoped and don't mix with your own variables.
 
-```css dark
+```scss dark
 @use '@swisspost/design-system-styles/core' as post;
 
 .elevated-element {
diff --git a/packages/documentation-v7/src/stories/utilities/text/text.docs.mdx b/packages/documentation-v7/src/stories/utilities/text/text.docs.mdx
index 9d8c67aaa9..d58330e260 100644
--- a/packages/documentation-v7/src/stories/utilities/text/text.docs.mdx
+++ b/packages/documentation-v7/src/stories/utilities/text/text.docs.mdx
@@ -4,10 +4,7 @@ import { BADGE } from '../../../../.storybook/constants';
 import { SCSS_VARIABLES, TextUtilityAPI } from './text.blocks';
 import * as TextDemos from './text.demo.stories';
 
-<Meta
-  title="Utilities/Text"
-  parameters={{ badges: [BADGE.NEEDS_REVISION] }}
-/>
+<Meta title="Utilities/Text" parameters={{ badges: [BADGE.NEEDS_REVISION] }} />
 
 # Text
 
@@ -19,11 +16,11 @@ import * as TextDemos from './text.demo.stories';
 
 ### Font Family
 
-<Canvas of={TextDemos.FontFamily} sourceState='shown' />
+<Canvas of={TextDemos.FontFamily} sourceState="shown" />
 
 #### Set Font Family in SCSS
 
-```css dark
+```scss dark
 @use '@swisspost/design-system-styles/core' as post;
 
 .my-element {
@@ -33,19 +30,15 @@ import * as TextDemos from './text.demo.stories';
 
 #### Possible Values
 
-<TextUtilityAPI
-  values={SCSS_VARIABLES.fontFamilies}
-  cssPrefix="font"
-  scssPrefix="font-family"
-/>
+<TextUtilityAPI values={SCSS_VARIABLES.fontFamilies} cssPrefix="font" scssPrefix="font-family" />
 
 ### Font Size
 
-<Canvas of={TextDemos.FontSize} sourceState='shown' />
+<Canvas of={TextDemos.FontSize} sourceState="shown" />
 
 #### Set Font Size in SCSS
 
-```css dark
+```scss dark
 @use '@swisspost/design-system-styles/core' as post;
 
 .my-element {
@@ -55,11 +48,7 @@ import * as TextDemos from './text.demo.stories';
 
 #### Possible Values
 
-<TextUtilityAPI
-  values={SCSS_VARIABLES.fontSizes}
-  cssPrefix="fs"
-  scssPrefix="font-size"
-/>
+<TextUtilityAPI values={SCSS_VARIABLES.fontSizes} cssPrefix="fs" scssPrefix="font-size" />
 
 ### Font Weight
 
@@ -67,11 +56,11 @@ import * as TextDemos from './text.demo.stories';
   The `.bold`, `.regular`, and `.light` classes are deprecated in favor of the `.fw-*` classes.
 </div>
 
-<Canvas of={TextDemos.FontWeight} sourceState='shown' />
+<Canvas of={TextDemos.FontWeight} sourceState="shown" />
 
 #### Set Font Weight in SCSS
 
-```css dark
+```scss dark
 @use '@swisspost/design-system-styles/core' as post;
 
 .my-element {
@@ -81,24 +70,19 @@ import * as TextDemos from './text.demo.stories';
 
 #### Possible Values
 
-<TextUtilityAPI
-  values={SCSS_VARIABLES.fontWeights}
-  cssPrefix="fw"
-  scssPrefix="font-weight"
-/>
+<TextUtilityAPI values={SCSS_VARIABLES.fontWeights} cssPrefix="fw" scssPrefix="font-weight" />
 
 ### Font Style
 
-<Canvas of={TextDemos.FontStyle} sourceState='shown' />
+<Canvas of={TextDemos.FontStyle} sourceState="shown" />
 
-<p className="mb-big"><em>There are no Sass variables for font styles at this time.</em></p>
+<p className="mb-big">
+  <em>There are no Sass variables for font styles at this time.</em>
+</p>
 
 #### Possible Values
 
-<TextUtilityAPI
-  values={SCSS_VARIABLES.fontStyles}
-  cssPrefix="fst"
-/>
+<TextUtilityAPI values={SCSS_VARIABLES.fontStyles} cssPrefix="fst" />
 
 ### Line Heights
 
@@ -106,11 +90,11 @@ import * as TextDemos from './text.demo.stories';
   Fixed-size line heights are deprecated in favor of relative line height utility classes.
 </div>
 
-<Canvas of={TextDemos.LineHeight} sourceState='shown' />
+<Canvas of={TextDemos.LineHeight} sourceState="shown" />
 
 #### Set Line Height in SCSS
 
-```css dark
+```scss dark
 @use '@swisspost/design-system-styles/core' as post;
 
 .my-element {
@@ -122,21 +106,15 @@ import * as TextDemos from './text.demo.stories';
 
 ##### Fixed-size (deprecated)
 
-<TextUtilityAPI
-  values={SCSS_VARIABLES.fixedLineHeights}
-  cssPrefix="lh"
-  scssPrefix="line-height"
-/>
+<TextUtilityAPI values={SCSS_VARIABLES.fixedLineHeights} cssPrefix="lh" scssPrefix="line-height" />
 
 ##### Relative
+
 For good accessibility, the line height is set to <code>1.5</code> for body text and <code>1.2</code> for headings.
 To make the line height equal to the font size, you can use the `.lh-1` class.
 There are no Sass variables for these row heights.
 
-<TextUtilityAPI
-  values={SCSS_VARIABLES.relativeLineHeights}
-  cssPrefix="lh"
-/>
+<TextUtilityAPI values={SCSS_VARIABLES.relativeLineHeights} cssPrefix="lh" />
 
 ## Text
 
@@ -145,17 +123,18 @@ Define how text-blocks are displayed.
 ### Color
 
 <div className="alert alert-warning my-4">
-  The `.text-auto` class is deprecated since text color is now set by the <LinkTo href="utilities-background">backgrounds</LinkTo> themselves.
+  The `.text-auto` class is deprecated since text color is now set by the{' '}
+  <LinkTo href="utilities-background">backgrounds</LinkTo> themselves.
 </div>
 
 Colorize text with `.text-*` utility classes.
 To colorize links, use the `.link-*` classes instead as they also provide styling for the `:hover` and `:focus` states.
 
-<Canvas of={TextDemos.TextColor} sourceState='shown' />
+<Canvas of={TextDemos.TextColor} sourceState="shown" />
 
 #### Set the Color in SCSS
 
-```css dark
+```scss dark
 @use '@swisspost/design-system-styles/core' as post;
 
 .my-element {
@@ -165,22 +144,19 @@ To colorize links, use the `.link-*` classes instead as they also provide stylin
 
 #### Possible Values
 
-<TextUtilityAPI
-  values={SCSS_VARIABLES.colors}
-  cssPrefix="text"
-/>
+<TextUtilityAPI values={SCSS_VARIABLES.colors} cssPrefix="text" />
 
 ### Reset Color
 
 Reset a text color with `.text-reset`, so that an element inherits the color from its parent.
 
-<Canvas of={TextDemos.TextColorReset} sourceState='shown' />
+<Canvas of={TextDemos.TextColorReset} sourceState="shown" />
 
 ### Alignment
 
 Easily realign text to components with text alignment classes.
 
-<Canvas of={TextDemos.TextAlign} sourceState='shown' />
+<Canvas of={TextDemos.TextAlign} sourceState="shown" />
 
 #### Responsive Alignment
 
@@ -193,22 +169,22 @@ For more detailed informations about breakpoints read our <LinkTo kind="foundati
 
 Wrap text or prevent it from wrapping with the `.text-wrap` and `.text-nowrap` utility classes.
 
-<Canvas of={TextDemos.TextWrapping} sourceState='shown' />
+<Canvas of={TextDemos.TextWrapping} sourceState="shown" />
 
 ### Word Break
 
 Prevent long strings of text from breaking your component's layout by using the utility class `.text-break`.
 
-<Canvas of={TextDemos.WordBreak} sourceState='shown' />
+<Canvas of={TextDemos.WordBreak} sourceState="shown" />
 
 ### Transform
 
 Transform text with the following text capitalization classes: `.text-lowercase`, `.text-uppercase` and `.text-capitalize`.
 
-<Canvas of={TextDemos.TextTransform} sourceState='shown' />
+<Canvas of={TextDemos.TextTransform} sourceState="shown" />
 
 ### Decorations
 
 Decorate text with the following text decoration classes.: `.text-decoration-line-through` and `.text-decoration-none`.
 
-<Canvas of={TextDemos.TextDecoration} sourceState='shown' />
+<Canvas of={TextDemos.TextDecoration} sourceState="shown" />
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 53f65ed568..4fcd2af93b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -619,7 +619,7 @@ importers:
     devDependencies:
       '@geometricpanda/storybook-addon-badges':
         specifier: 1.1.1
-        version: 1.1.1(@storybook/addons@6.5.16)(@storybook/api@6.5.16)(@storybook/components@6.5.16)(@storybook/core-events@6.5.16)(@storybook/theming@6.5.16)(react-dom@18.2.0)(react@18.2.0)
+        version: 1.1.1(@storybook/addons@6.5.16)(@storybook/api@6.5.16)(@storybook/components@7.1.1)(@storybook/core-events@6.5.16)(@storybook/theming@6.5.16)(react-dom@18.2.0)(react@18.2.0)
       '@open-wc/lit-helpers':
         specifier: ^0.6.0
         version: 0.6.0(lit@2.7.6)
@@ -638,6 +638,9 @@ importers:
       '@storybook/blocks':
         specifier: 7.1.1
         version: 7.1.1(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components':
+        specifier: ^7.1.1
+        version: 7.1.1(react-dom@18.2.0)(react@18.2.0)
       '@storybook/manager-api':
         specifier: ^7.0.26
         version: 7.0.26(react-dom@18.2.0)(react@18.2.0)
@@ -659,6 +662,9 @@ importers:
       '@types/react':
         specifier: 18.2.17
         version: 18.2.17
+      '@types/react-syntax-highlighter':
+        specifier: ^15.5.7
+        version: 15.5.7
       lit:
         specifier: 2.7.6
         version: 2.7.6
@@ -671,6 +677,9 @@ importers:
       react-dom:
         specifier: 18.2.0
         version: 18.2.0(react@18.2.0)
+      react-syntax-highlighter:
+        specifier: ^15.5.0
+        version: 15.5.0(react@18.2.0)
       rimraf:
         specifier: 5.0.1
         version: 5.0.1
@@ -1696,10 +1705,10 @@ packages:
       '@babel/helper-compilation-targets': 7.22.1(@babel/core@7.19.3)
       '@babel/helper-module-transforms': 7.22.1
       '@babel/helpers': 7.22.3
-      '@babel/parser': 7.22.4
+      '@babel/parser': 7.22.7
       '@babel/template': 7.22.5
       '@babel/traverse': 7.22.4
-      '@babel/types': 7.22.4
+      '@babel/types': 7.22.5
       convert-source-map: 1.9.0
       debug: 4.3.4(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
@@ -2314,20 +2323,6 @@ packages:
       chalk: 2.4.2
       js-tokens: 4.0.0
 
-  /@babel/parser@7.22.4:
-    resolution: {integrity: sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.22.5
-
-  /@babel/parser@7.22.5:
-    resolution: {integrity: sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-    dependencies:
-      '@babel/types': 7.22.5
-
   /@babel/parser@7.22.7:
     resolution: {integrity: sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==}
     engines: {node: '>=6.0.0'}
@@ -4950,7 +4945,7 @@ packages:
       '@babel/helper-function-name': 7.22.5
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.5
-      '@babel/parser': 7.22.5
+      '@babel/parser': 7.22.7
       '@babel/types': 7.22.5
       debug: 4.3.4(supports-color@8.1.1)
       globals: 11.12.0
@@ -4967,7 +4962,7 @@ packages:
       '@babel/helper-function-name': 7.22.5
       '@babel/helper-hoist-variables': 7.22.5
       '@babel/helper-split-export-declaration': 7.22.5
-      '@babel/parser': 7.22.5
+      '@babel/parser': 7.22.7
       '@babel/types': 7.22.5
       debug: 4.3.4(supports-color@8.1.1)
       globals: 11.12.0
@@ -4992,14 +4987,6 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/types@7.22.4:
-    resolution: {integrity: sha512-Tx9x3UBHTTsMSW85WB2kphxYQVvrZ/t1FxD88IpSgIjiUJlCm9z+xWIDwyo1vffTwSqteqyznB8ZE9vYYk16zA==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      '@babel/helper-string-parser': 7.22.5
-      '@babel/helper-validator-identifier': 7.22.5
-      to-fast-properties: 2.0.0
-
   /@babel/types@7.22.5:
     resolution: {integrity: sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==}
     engines: {node: '>=6.9.0'}
@@ -5988,6 +5975,31 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
+  /@geometricpanda/storybook-addon-badges@1.1.1(@storybook/addons@6.5.16)(@storybook/api@6.5.16)(@storybook/components@7.1.1)(@storybook/core-events@6.5.16)(@storybook/theming@6.5.16)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-oruMaqUTq8kceJCQhoCHg4SJcCx/34j9t0g9P0krLH7cTgZQJVtmFyvtO9tMtOIU+FQUvizL+cDUt54TU5pIyQ==}
+    peerDependencies:
+      '@storybook/addons': ^6.5.8
+      '@storybook/api': ^6.5.8
+      '@storybook/components': ^6.5.8
+      '@storybook/core-events': ^6.5.8
+      '@storybook/theming': ^6.5.8
+      react: ^16.8.0 || ^17.0.0 || >=18
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=18
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      '@storybook/addons': 6.5.16(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/api': 6.5.16(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/components': 7.1.1(react-dom@18.2.0)(react@18.2.0)
+      '@storybook/core-events': 6.5.16
+      '@storybook/theming': 6.5.16(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
   /@hapi/hoek@9.3.0:
     resolution: {integrity: sha512-/c6rf4UJlmHlC9b5BaNvzAcFv7HZ2QHaV0D4/HNlBdvFnvQq8RI4kYdhyPCl7Xj+oWvTWQ8ujhqS53LIgAe6KQ==}
     dev: true
@@ -10218,6 +10230,12 @@ packages:
       '@types/react': 18.2.17
     dev: true
 
+  /@types/react-syntax-highlighter@15.5.7:
+    resolution: {integrity: sha512-bo5fEO5toQeyCp0zVHBeggclqf5SQ/Z5blfFmjwO5dkMVGPgmiwZsJh9nu/Bo5L7IHTuGWrja6LxJVE2uB5ZrQ==}
+    dependencies:
+      '@types/react': 18.2.17
+    dev: true
+
   /@types/react@17.0.59:
     resolution: {integrity: sha512-gSON5zWYIGyoBcycCE75E9+r6dCC2dHdsrVkOEiIYNU5+Q28HcBAuqvDuxHcCbMfHBHdeT5Tva/AFn3rnMKE4g==}
     requiresBuild: true
@@ -15697,6 +15715,12 @@ packages:
       reusify: 1.0.4
     dev: true
 
+  /fault@1.0.4:
+    resolution: {integrity: sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==}
+    dependencies:
+      format: 0.2.2
+    dev: true
+
   /faye-websocket@0.11.4:
     resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
     engines: {node: '>=0.8.0'}
@@ -16093,6 +16117,11 @@ packages:
       mime-types: 2.1.35
     dev: true
 
+  /format@0.2.2:
+    resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
+    engines: {node: '>=0.4.x'}
+    dev: true
+
   /forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
@@ -17020,6 +17049,10 @@ packages:
     hasBin: true
     dev: true
 
+  /highlight.js@10.7.3:
+    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+    dev: true
+
   /highlight.js@11.8.0:
     resolution: {integrity: sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==}
     engines: {node: '>=12.0.0'}
@@ -18246,7 +18279,7 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       '@babel/core': 7.22.9
-      '@babel/parser': 7.22.5
+      '@babel/parser': 7.22.7
       '@istanbuljs/schema': 0.1.3
       istanbul-lib-coverage: 3.2.0
       semver: 6.3.0
@@ -20465,6 +20498,13 @@ packages:
       tslib: 2.6.1
     dev: true
 
+  /lowlight@1.20.0:
+    resolution: {integrity: sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==}
+    dependencies:
+      fault: 1.0.4
+      highlight.js: 10.7.3
+    dev: true
+
   /lru-cache@4.1.5:
     resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
     dependencies:
@@ -23084,6 +23124,16 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /prismjs@1.27.0:
+    resolution: {integrity: sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /prismjs@1.29.0:
+    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+    engines: {node: '>=6'}
+    dev: true
+
   /proc-log@3.0.0:
     resolution: {integrity: sha512-++Vn7NS4Xf9NacaU9Xq3URUuqZETPsf8L4j5/ckhaRYsfPeRyzGw+iDjFhV/Jr3uNmTvvddEJFWh5R1gRgUH8A==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -23652,6 +23702,19 @@ packages:
       throttle-debounce: 3.0.1
     dev: true
 
+  /react-syntax-highlighter@15.5.0(react@18.2.0):
+    resolution: {integrity: sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==}
+    peerDependencies:
+      react: '>= 0.14.0 || >=18'
+    dependencies:
+      '@babel/runtime': 7.21.5
+      highlight.js: 10.7.3
+      lowlight: 1.20.0
+      prismjs: 1.29.0
+      react: 18.2.0
+      refractor: 3.6.0
+    dev: true
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -23854,6 +23917,14 @@ packages:
   /reflect-metadata@0.1.13:
     resolution: {integrity: sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==}
 
+  /refractor@3.6.0:
+    resolution: {integrity: sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==}
+    dependencies:
+      hastscript: 6.0.0
+      parse-entities: 2.0.0
+      prismjs: 1.27.0
+    dev: true
+
   /regenerate-unicode-properties@10.1.0:
     resolution: {integrity: sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==}
     engines: {node: '>=4'}