Fix code highlighting in blogs & docs

This provides a better background color (for blogs) and proper
light/dark highlighting, and drops the unnecessary generic 'code
example' header.

Author: pimterry

src/components/modules/block-code/block-code.styles.ts

@@ -6,7 +6,7 @@ import { styled } from '@/styles';
 export const StyledBlockCodeWrapper = styled.div`
   border-radius: 16px;
   box-shadow: 0 0 0 1px ${({ theme }) => theme.colors.button.border};
-  background-color: ${({ theme }) => theme.colors.darkGrey};
+  background-color: var(--prism-bg);
   overflow: hidden;
   margin-top: 24px;
   margin-bottom: 24px;
@@ -27,6 +27,7 @@ export const StyledBlockCodeContent = styled.div`
 
     & code {
       color: ${({ theme }) => theme.colors.lightGrey};
+      background-color: var(--prism-bg);
       font-size: 13px;
       line-height: 19.5px;
       font-family: var(--font-code) !important;
@@ -37,8 +38,8 @@ export const StyledBlockCodeContent = styled.div`
 
 export const StyledInlineCode = styled(Text)`
   &&& {
-    color: ${({ theme }) => theme.colors.lightGrey};
-    background: ${({ theme }) => theme.colors.darkGrey};
+    color: var(--prism-text);
+    background-color: var(--prism-bg);
     box-shadow: 0 0 0 1px ${({ theme }) => theme.colors.button.border};
     padding: 0 6px;
     border-radius: 4px;

src/components/modules/block-code/block-code.types.ts

@@ -1,5 +1,5 @@
 export interface BlockCodeProps {
-  title: string;
+  title?: string;
   content: string | React.ReactNode;
   language?: string;
 }

src/components/modules/block-code/components/code.tsx

@@ -10,7 +10,6 @@ import 'prismjs/components/prism-docker';
 import 'prismjs/components/prism-go';
 import 'prismjs/components/prism-dart';
 import 'prismjs/components/prism-yaml';
-import 'prismjs/themes/prism-tomorrow.css';
 import React, { useEffect } from 'react';
 
 import type { BlockCodeProps } from '../block-code.types';
@@ -37,4 +36,4 @@ export const Code = ({ children, language, title }: Component<Pick<BlockCodeProp
       </code>
     </pre>
   );
-};
+};

src/components/modules/block-code/index.tsx

@@ -24,11 +24,13 @@ export const InlineCode = ({ children }: Component) => {
 export const BlockCode = ({ title, content, language = 'javascript' }: BlockCodeProps) => {
   return (
     <StyledBlockCodeWrapper className={dmCodeFont.variable}>
-      <StyledBlockCodeTitleWrapper>
-        <Text fontSize="m" fontWeight="bold" color="white">
-          {title}
-        </Text>
-      </StyledBlockCodeTitleWrapper>
+      { title &&
+        <StyledBlockCodeTitleWrapper>
+          <Text fontSize="m" fontWeight="bold" color="white">
+            {title}
+          </Text>
+        </StyledBlockCodeTitleWrapper>
+      }
       <StyledBlockCodeContent>
         <Code title={title} language={language}>
           {content}

src/components/sections/rich-text/components/index.tsx

@@ -67,12 +67,18 @@ export const defaultComponents: MDXComponents = {
   ol({ children }: Component) {
     return <StyledOL>{children}</StyledOL>;
   },
-  code({ children, className }) {
-    if (!className) {
-      return <InlineCode>{children}</InlineCode>;
-    }
+  // Triple-tick ``` code renders as <pre><code>... blocks, while inline code
+  // renders as a single <code> element.
+  pre: ({ children }: { children?: React.ReactNode }) => {
+    const codeElement = children as React.ReactElement<{ children?: React.ReactNode; className?: string }>;
+    const { children: content, className } = codeElement.props;
 
-    return <BlockCode content={children} language={className} title="Code example" />;
+    return <pre>
+      <BlockCode content={content} language={className} />
+    </pre>;
+  },
+  code({ children }) {
+    return <InlineCode>{children}</InlineCode>;
   },
   ...Icons,
 };

src/styles/index.ts

@@ -209,6 +209,18 @@ export const GlobalStyles = createGlobalStyle`
       --background-gradient: url('/images/backgrounds/gradient_dark.svg');
       --background-func-gradient: url('/images/backgrounds/func_gradient_dark.png');
       --hero-box-shadow: 0 0 20px 52px inset rgb(30 32 40 / 55%);
+
+      --prism-bg: var(--ink-black);
+      --prism-comment: #999;
+      --prism-punctuation: #ccc;
+      --prism-tag: #e2777a;
+      --prism-function-name: #6196cc;
+      --prism-boolean: #f08d49;
+      --prism-property: #f8c555;
+      --prism-selector: #cc99cd;
+      --prism-string: #7ec699;
+      --prism-operator: #67cdcc;
+      --prism-inserted: green;
     }
 
     [data-theme="light"] {
@@ -252,6 +264,18 @@ export const GlobalStyles = createGlobalStyle`
       --background-gradient: url('/images/backgrounds/gradient_light.svg');
       --background-func-gradient: url('/images/backgrounds/func-gradient-dark.png');
       --hero-box-shadow: transparent;
+
+      --prism-bg: var(--ink-black);
+      --prism-comment: #7d8b99;
+      --prism-punctuation: #5f6364;
+      --prism-tag: #c92c2c;
+      --prism-function-name: #c92c2c;
+      --prism-boolean: #c92c2c;
+      --prism-property: #c92c2c;
+      --prism-selector: #2f9c0a;
+      --prism-string: #2f9c0a;
+      --prism-operator: #a67f59;
+      --prism-inserted: #2f9c0a;
     }
 
     [data-theme='dark'] [data-hide-on-theme='dark'],
@@ -332,10 +356,80 @@ export const GlobalStyles = createGlobalStyle`
       white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
     }
 
-    /* Override Auth0's style choices */
-    .auth0-lock {
-      /* It's always light - this fixes the browser UI */
-      color-scheme: light;
-      font-family: ${theme.fontFamily.dmSans};
+    /* PrismJS syntax highlighting, based on prism-tomorrow but linked to vars */
+    pre[class*="language-"] {
+      background: var(--prism-bg);
+      color: var(--prism-text);
+    }
+
+    .token.comment,
+    .token.block-comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata {
+      color: var(--prism-comment);
+    }
+
+    .token.punctuation {
+      color: var(--prism-punctuation);
+    }
+
+    .token.tag,
+    .token.attr-name,
+    .token.namespace,
+    .token.deleted {
+      color: var(--prism-tag);
+    }
+
+    .token.function-name {
+      color: var(--prism-function-name);
+    }
+
+    .token.boolean,
+    .token.number,
+    .token.function {
+      color: var(--prism-boolean);
+    }
+
+    .token.property,
+    .token.class-name,
+    .token.constant,
+    .token.symbol {
+      color: var(--prism-property);
+    }
+
+    .token.selector,
+    .token.important,
+    .token.atrule,
+    .token.keyword,
+    .token.builtin {
+      color: var(--prism-selector);
+    }
+
+    .token.string,
+    .token.char,
+    .token.attr-value,
+    .token.regex,
+    .token.variable {
+      color: var(--prism-string);
+    }
+
+    .token.operator,
+    .token.entity,
+    .token.url {
+      color: var(--prism-operator);
+    }
+
+    .token.inserted {
+      color: var(--prism-inserted);
+    }
+
+    .token.important,
+    .token.bold {
+      font-weight: bold;
+    }
+
+    .token.italic {
+      font-style: italic;
     }
 `;