docs(apps): create new CodeBlock (#3321)

* docs(apps): create new `CodeBlock`

* remove code snippet imports

* add bg to inline code

* add supported langs

* plaintext white color

* literal

* comment

* get bash support

* comment out await

apps/_components/package.json

@@ -22,11 +22,11 @@
     "@digdir/designsystemet": "workspace:^",
     "@digdir/designsystemet-react": "workspace:^",
     "@navikt/aksel-icons": "^7.0.0",
-    "@types/react-syntax-highlighter": "^15.5.13",
     "clsx": "^2.1.1",
     "next": "^15.1.5",
-    "prettier": "^3.3.3",
-    "react-syntax-highlighter": "^15.6.1"
+    "prism-react-renderer": "^2.4.1",
+    "prismjs": "^1.29.0",
+    "react-code-block": "^1.1.3"
   },
   "devDependencies": {
     "typescript": "^5.7.3"

apps/_components/src/CodeBlock/CodeBlock.module.css

@@ -0,0 +1,37 @@
+.codeBlock {
+  max-width: 100%;
+  overflow-x: auto;
+  width: auto;
+  padding: var(--ds-size-5);
+  border-top-left-radius: var(--ds-border-radius-md);
+  border-top-left-radius: var(--ds-border-radius-md);
+  height: fit-content;
+  font-size: min(0.8em, 14px);
+  background-color: var(--ds-color-neutral-background-tinted);
+  font-family: monospace;
+  margin-bottom: 0;
+
+  & [class~='plain-text'] {
+    color: var(--ds-color-neutral-text-default);
+  }
+}
+
+.codeBlockWrapper {
+  position: relative;
+}
+
+.copyButton {
+  border-radius: 0;
+  margin-left: auto;
+  border-bottom-right-radius: var(--ds-border-radius-md);
+}
+
+.toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: var(--ds-size-4);
+  background-color: var(--ds-color-neutral-background-tinted);
+  border-top: 1px solid var(--ds-color-neutral-border-subtle);
+  border-bottom-right-radius: var(--ds-border-radius-md);
+  border-bottom-left-radius: var(--ds-border-radius-md);
+}

apps/_components/src/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,92 @@
+'use client';
+import { Button } from '@digdir/designsystemet-react';
+import cl from 'clsx/lite';
+import { useState } from 'react';
+import { CodeBlock as ReactCodeBlock } from 'react-code-block';
+import classes from './CodeBlock.module.css';
+
+/* (typeof global !== 'undefined' ? global : window).Prism = Prism; */
+/* @ts-ignore - TODO: fix this */
+/* await import('prismjs/components/prism-bash'); */
+
+export type CodeBlockProps = {
+  children: string;
+  className?: string;
+  /**
+   * Language for syntax highlighting.
+   * Only some languages give syntax highlighting, if the passed language is not supported
+   * it will default to 'text'.
+   *
+   * @todo Extend the language list with prismjs.
+   */
+  language?:
+    | 'markup'
+    | 'jsx'
+    | 'tsx'
+    | 'swift'
+    | 'kotlin'
+    | 'objectivec'
+    | 'js-extras'
+    | 'reason'
+    | 'rust'
+    | 'graphql'
+    | 'yaml'
+    | 'go'
+    | 'cpp'
+    | 'markdown'
+    | 'python'
+    | 'json'
+    | 'text'
+    | 'bash'
+    | string;
+};
+
+export const CodeBlock = ({
+  children,
+  className,
+  language = 'text',
+}: CodeBlockProps) => {
+  return (
+    <ReactCodeBlock code={children} language={language}>
+      <div className={classes.codeBlockWrapper}>
+        <ReactCodeBlock.Code
+          data-color-scheme='dark'
+          className={cl(classes.codeBlock, className)}
+        >
+          <ReactCodeBlock.LineContent>
+            <ReactCodeBlock.Token />
+          </ReactCodeBlock.LineContent>
+        </ReactCodeBlock.Code>
+        <div data-color-scheme='dark' className={classes.toolbar}>
+          <CopyButton text={children} />
+        </div>
+      </div>
+    </ReactCodeBlock>
+  );
+};
+
+const CopyButton = ({ text }: { text: string }) => {
+  const [toolTipText, setToolTipText] = useState('Kopier');
+
+  const onButtonClick = () => {
+    setToolTipText('Kopiert!');
+    navigator.clipboard.writeText(text).catch((reason) => {
+      throw Error(String(reason));
+    });
+  };
+  return (
+    <>
+      {/* @ts-ignore */}
+      <Button
+        onMouseEnter={() => setToolTipText('Kopier')}
+        onClick={() => onButtonClick()}
+        className={classes.copyButton}
+        aria-label='Kopier kodesnutt'
+        data-color='neutral'
+        data-size='2xs'
+      >
+        {toolTipText}
+      </Button>
+    </>
+  );
+};

apps/_components/src/index.ts

@@ -1,4 +1,3 @@
-export { CodeSnippet } from './CodeSnippet/CodeSnippet';
 export { Container } from './Container/Container';
 export { ClipboardButton } from './ClipboardButton/ClipboardButton';
 export { ColorModal } from './ColorModal/ColorModal';
@@ -8,3 +7,4 @@ export { Github } from './logos/Github';
 export { Slack } from './logos/Slack';
 export { Footer } from './Footer/Footer';
 export { Showcase } from './Showcase/Showcase';
+export { CodeBlock } from './CodeBlock/CodeBlock';

apps/storefront/app/bloggen/2024/v1rc1/page.mdx

@@ -2,7 +2,6 @@ import { Link } from '@digdir/designsystemet-react';
 
 import { PostLayout, Contributors } from '../../_components';
 import { ResponsiveIframe } from '@components';
-import { CodeSnippet } from '@repo/components';
 
 export default ({ children }) => (
   <PostLayout
@@ -84,12 +83,11 @@ Vi kommer til å jobbe kontinuerlig med mindre forbedringer basert på tilbakeme
 
 For å lett komme i gang som utvikler med Release Candidate av Designsystemet kan installerer følgende med ditt pakkesystem:
 
-<CodeSnippet language='shell'>
-{`npm i @digdir/designsystemet-react@next
+```shell
+npm i @digdir/designsystemet-react@next
 npm i @digdir/designsystemet-theme@next
 npm i @digdir/designsystemet-css@next
-`}
-</CodeSnippet>
+```
 
 Denne installerer alle tre pakken, og inneholder tokens, CSS og React komponenter.
 
@@ -98,9 +96,9 @@ Denne installerer alle tre pakken, og inneholder tokens, CSS og React komponente
 Ønsker du å teste `dark`, `light` eller `contrast` modus kan du legge på data-atributtet `data-color-scheme="MODE"`.
 Denne kan legges hvor som helst, og endrer alle barn til modusen du har valgt.
 
-<CodeSnippet language='html'>
-  {`<Details data-color-scheme='dark'>...</Details>`}
-</CodeSnippet>
+```tsx
+<Details data-color-scheme='dark'>...</Details>
+```
 
 #### Design-tokens templat
 
@@ -122,9 +120,9 @@ Migreringsscriptet kjører automatisk på alle `.css` filer (inkl. undermapper)
 
 _Merk at du må dobbelsjekke koden din etter scriptet har kjørt_
 
-<CodeSnippet language='shell'>
-{`npx @digdir/designsystemet migrate beta-to-v1`}
-</CodeSnippet>
+```shell
+npx @digdir/designsystemet migrate beta-to-v1
+```
 
 ## Takk for samarbeidet så langt!
 

apps/storefront/app/bloggen/2024/v1rc2/page.mdx

@@ -2,7 +2,6 @@ import { Link } from '@digdir/designsystemet-react';
 
 import { PostLayout, Contributors } from '../../_components';
 import { ResponsiveIframe, Image } from '@components';
-import { CodeSnippet } from '@repo/components';
 
 export default ({ children }) => (
   <PostLayout

apps/storefront/app/bloggen/2025/generering-av-fargar-i-fargesystemet/page.mdx

@@ -1,6 +1,5 @@
 import { PostLayout, Contributors } from '../../_components';
 import { ResponsiveIframe, Image } from '@components';
-import { CodeSnippet } from '@repo/components';
 
 export default ({ children }) => (
   <PostLayout