diff --git a/packages/rehype-highlight-lines/src/index.mjs b/packages/rehype-highlight-lines/src/index.mjs
index e6503e354ac..da7eaa9862b 100644
--- a/packages/rehype-highlight-lines/src/index.mjs
+++ b/packages/rehype-highlight-lines/src/index.mjs
@@ -99,7 +99,16 @@ export default (userOptions = {}) => {
               ? options[`${variant}Class`]
               : [options[`${variant}Class`]],
           },
-          children: [...Object.values(children)],
+          children: [
+            {
+              type: 'element',
+              tagName: 'div',
+              properties: {
+                className: ['code-section-inner'],
+              },
+              children: [...Object.values(children)],
+            },
+          ],
         }
 
         if (!options.swallow) parent[i].children.push(curNode)
diff --git a/sites/shared/components/mdx/example.js b/sites/shared/components/mdx/example.js
index 406d5476444..691939a0c0a 100644
--- a/sites/shared/components/mdx/example.js
+++ b/sites/shared/components/mdx/example.js
@@ -30,7 +30,6 @@ const Example = ({ app, draft, settings, xray = false }) => {
     gist._state.xray = { enabled: true }
     gist.margin = 20
   }
-  console.log(draft.draft, draft.sample, settings)
   if (!draft.sample) return null
   const patternProps = settings.sample
     ? draft.sample().getRenderProps()
@@ -72,7 +71,11 @@ const buildExample = (children, settings = { margin: 5 }, tutorial = false, pape
     code = code.split(')')
     code = code[0] + ') => ' + code.slice(1).join(')')
   }
-  draft = eval(code)
+  try {
+    draft = eval(code)
+  } catch (err) {
+    console.log(err, code)
+  }
   const part = {
     draft: draft,
     measurements: tutorial ? [] : ['head'],
diff --git a/sites/shared/mdx/loader.js b/sites/shared/mdx/loader.js
index b6dd768afa9..c292505d976 100644
--- a/sites/shared/mdx/loader.js
+++ b/sites/shared/mdx/loader.js
@@ -87,7 +87,7 @@ const mdxLoader = async (language, site, slug, jargon) => {
         [
           rehypeHighlightLines,
           {
-            highlightClass: ['highlight-lines', 'bg-yellow-300', 'bg-opacity-5', 'border-l-4'],
+            highlightClass: ['highlight-lines', 'border-l-4'],
             strikeoutClass: [
               'strikeout-lines',
               'bg-orange-300',
diff --git a/sites/shared/styles/code.css b/sites/shared/styles/code.css
index 81fec1344ae..5f084d4e04d 100644
--- a/sites/shared/styles/code.css
+++ b/sites/shared/styles/code.css
@@ -37,9 +37,15 @@ div.hljs > pre > code {
  */
 div.hljs > pre > code section {
   margin: 0 -1rem;
-  padding: 0.25rem 1rem 0.25rem calc(1rem - 4px);
+  padding: 0 1rem 0 calc(1rem - 4px);
   border-left: 0.35rem solid transparent;
   border-color: rgb(130, 203, 21);
+  background-color: var(--code-background-highlight-color);
+}
+div.hljs > pre > code section > div.code-section-inner {
+  display: inline-block;
+  padding: 0.25rem 0.25rem 0.25rem 0;
+  background-color: var(--code-background-highlight-color);
 }
 div.hljs > pre > code section.strikeout-lines {
   border-color: rgb(255, 75, 57);
diff --git a/sites/shared/styles/globals.css b/sites/shared/styles/globals.css
index fc74c4d85cc..9d4dff68dca 100644
--- a/sites/shared/styles/globals.css
+++ b/sites/shared/styles/globals.css
@@ -3,8 +3,6 @@
 @tailwind utilities;
 
 @import './code.css';
-/* import for dot graphs */
-@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Montserrat+Alternates:ital,wght@1,900&display=swap');
 
 @layer components {
   /* Applied styles for common HTML tags */
diff --git a/sites/shared/themes/dark.js b/sites/shared/themes/dark.js
index 3d171e729a2..a0e71c59337 100644
--- a/sites/shared/themes/dark.js
+++ b/sites/shared/themes/dark.js
@@ -1,33 +1,34 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
-  'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
 
   'base-100': colors.neutral['900'],
   'base-200': colors.neutral['700'],
   'base-300': colors.neutral['600'],
   'base-content': colors.neutral['300'],
 
-  'primary': colors.violet['700'],
+  primary: colors.violet['700'],
   'primary-focus': colors.violet['600'],
   'primary-content': colors.violet['50'],
 
-  'secondary': colors.sky['500'],
+  secondary: colors.sky['500'],
   'secondary-focus': colors.sky['400'],
   'secondary-content': colors.sky['50'],
 
-  'accent': colors.pink['500'],
+  accent: colors.pink['500'],
   'accent-focus': colors.pink['400'],
   'accent-content': colors.pink['50'],
 
-  'neutral': '#000000', // Dark as my soul
+  neutral: '#000000', // Dark as my soul
   'neutral-focus': colors.neutral['800'],
   'neutral-content': colors.neutral['50'],
 
-  'info': colors.indigo['700'],
-  'success': colors.green['700'],
-  'warning': colors.orange['500'],
-  'error': colors.red['700'],
+  info: colors.indigo['700'],
+  success: colors.green['700'],
+  warning: colors.orange['500'],
+  error: colors.red['700'],
 
   '--btn-info-content': colors.neutral[50],
   '--btn-success-content': colors.neutral[50],
@@ -44,6 +45,7 @@ module.exports = {
   )`,
 
   '--code-background-color': '#111',
+  '--code-background-highlight-color': '#191919',
   '--code-border-color': colors.neutral['800'],
   '--code-color': colors.neutral['300'],
   '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
@@ -60,7 +62,7 @@ module.exports = {
   '--code-color-string': colors.sky['300'],
   '--code-font-style-string': 'italic',
   '--code-color-variable': colors.indigo['300'],
-  '--code-color-comment': colors.neutral['600'],
+  '--code-color-comment': colors.neutral['400'],
   '--code-color-tag': colors.green['600'],
   '--code-color-property': colors.yellow['200'],
   '--code-font-weight-property': 'bold',
diff --git a/sites/shared/themes/hax0r.js b/sites/shared/themes/hax0r.js
index 9c6fbc8ee7b..a0f0f4f96ce 100644
--- a/sites/shared/themes/hax0r.js
+++ b/sites/shared/themes/hax0r.js
@@ -2,34 +2,34 @@ const colors = require('tailwindcss/colors')
 
 const bg = '#002808'
 
-module.exports =  {
-  'fontFamily': `ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;`,
+module.exports = {
+  fontFamily: `ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;`,
 
   'base-100': bg,
   'base-200': colors.lime['900'],
   'base-300': colors.lime['800'],
   'base-content': colors.lime['500'],
 
-  'primary': colors.lime['700'],
+  primary: colors.lime['700'],
   'primary-focus': colors.lime['600'],
   'primary-content': colors.lime['50'],
 
-  'secondary': colors.lime['400'],
+  secondary: colors.lime['400'],
   'secondary-focus': colors.lime['500'],
   'secondary-content': bg,
 
-  'accent': colors.lime['700'],
+  accent: colors.lime['700'],
   'accent-focus': colors.lime['600'],
   'accent-content': colors.yellow['200'],
 
-  'neutral': '#001c06', // Even darker
+  neutral: '#001c06', // Even darker
   'neutral-focus': colors.lime['600'],
   'neutral-content': colors.lime['200'],
 
-  'info': colors.lime['700'],
-  'success': colors.lime['700'],
-  'warning': colors.lime['700'],
-  'error': colors.lime['700'],
+  info: colors.lime['700'],
+  success: colors.lime['700'],
+  warning: colors.lime['700'],
+  error: colors.lime['700'],
 
   '--btn-info-content': colors.teal[300],
   '--btn-success-content': colors.green[300],
@@ -44,6 +44,7 @@ module.exports =  {
   )`,
 
   '--code-background-color': '#002407',
+  '--code-background-highlight-color': '#191919',
   '--code-border-color': colors.lime['900'],
   '--code-color': colors.lime['600'],
   '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
@@ -60,7 +61,7 @@ module.exports =  {
   '--code-color-string': colors.lime['200'],
   '--code-font-style-string': 'italic',
   '--code-color-variable': colors.lime['400'],
-  '--code-color-comment': colors.lime['600'],
+  '--code-color-comment': colors.lime['700'],
   '--code-color-tag': colors.lime['400'],
   '--code-color-property': colors.lime['200'],
   '--code-font-weight-property': 'bold',
@@ -106,12 +107,12 @@ module.exports =  {
   '--pattern-text-4xl': '3rem',
 
   '--pattern-scale': '1',
-  '--pattern-stroke-xs': "0.2px",
-  '--pattern-stroke-sm': "0.4px",
-  '--pattern-stroke': "0.7px",
-  '--pattern-stroke-lg': "1.3px",
-  '--pattern-stroke-xl': "2px",
-  '--pattern-stroke-2xl': "4px",
-  '--pattern-stroke-3xl': "6px",
-  '--pattern-stroke-4xl': "8px",
+  '--pattern-stroke-xs': '0.2px',
+  '--pattern-stroke-sm': '0.4px',
+  '--pattern-stroke': '0.7px',
+  '--pattern-stroke-lg': '1.3px',
+  '--pattern-stroke-xl': '2px',
+  '--pattern-stroke-2xl': '4px',
+  '--pattern-stroke-3xl': '6px',
+  '--pattern-stroke-4xl': '8px',
 }
diff --git a/sites/shared/themes/lgbtq.js b/sites/shared/themes/lgbtq.js
index 21706faab02..33997fb1e81 100644
--- a/sites/shared/themes/lgbtq.js
+++ b/sites/shared/themes/lgbtq.js
@@ -1,32 +1,33 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
-  'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
 
   'base-100': colors.fuchsia['50'],
   'base-200': colors.neutral['200'],
   'base-300': colors.neutral['400'],
   'base-content': colors.neutral['700'],
 
-  'primary': colors.sky['500'],
+  primary: colors.sky['500'],
   'primary-focus': colors.sky['400'],
   'primary-content': colors.sky['50'],
-  'secondary': colors.violet['500'],
+  secondary: colors.violet['500'],
   'secondary-focus': colors.violet['400'],
   'secondary-content': colors.violet['50'],
 
-  'accent': colors.fuchsia['500'],
+  accent: colors.fuchsia['500'],
   'accent-focus': colors.fuchsia['400'],
   'accent-content': colors.neutral['50'],
 
-  'neutral': colors.neutral['900'],
+  neutral: colors.neutral['900'],
   'neutral-focus': colors.neutral['700'],
   'neutral-content': colors.yellow['50'],
 
-  'info': colors.pink['400'],
-  'success': colors.green['600'],
-  'warning': colors.amber['500'],
-  'error': colors.red['600'],
+  info: colors.pink['400'],
+  success: colors.green['600'],
+  warning: colors.amber['500'],
+  error: colors.red['600'],
 
   '--theme-gradient': `repeating-linear-gradient(
      90deg,
@@ -45,6 +46,7 @@ module.exports = {
   )`,
 
   '--code-background-color': colors.neutral['800'],
+  '--code-background-highlight-color': '#313131',
   '--code-border-color': colors.neutral['900'],
   '--code-color': colors.neutral['100'],
   '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
@@ -108,13 +110,12 @@ module.exports = {
   '--pattern-text-4xl': '3rem',
 
   '--pattern-scale': '1',
-  '--pattern-stroke-xs': "0.2px",
-  '--pattern-stroke-sm': "0.4px",
-  '--pattern-stroke': "0.7px",
-  '--pattern-stroke-lg': "1.3px",
-  '--pattern-stroke-xl': "2px",
-  '--pattern-stroke-2xl': "4px",
-  '--pattern-stroke-3xl': "6px",
-  '--pattern-stroke-4xl': "8px",
+  '--pattern-stroke-xs': '0.2px',
+  '--pattern-stroke-sm': '0.4px',
+  '--pattern-stroke': '0.7px',
+  '--pattern-stroke-lg': '1.3px',
+  '--pattern-stroke-xl': '2px',
+  '--pattern-stroke-2xl': '4px',
+  '--pattern-stroke-3xl': '6px',
+  '--pattern-stroke-4xl': '8px',
 }
-
diff --git a/sites/shared/themes/light.js b/sites/shared/themes/light.js
index 8e05a2a6f04..fbbb48bc157 100644
--- a/sites/shared/themes/light.js
+++ b/sites/shared/themes/light.js
@@ -18,24 +18,25 @@ const colors = require('tailwindcss/colors')
 
 module.exports = {
   /* FONTS
-  *
-  * This will apply to everything except code blocks
-  * Note that we're using a system font stack here.
-  * That means we're not loading any fonts in the browser,
-  * but rather relying on what the user has available locally.
-  */
-  'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
+   *
+   * This will apply to everything except code blocks
+   * Note that we're using a system font stack here.
+   * That means we're not loading any fonts in the browser,
+   * but rather relying on what the user has available locally.
+   */
+  fontFamily:
+    '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
 
   /* COLORS
-  *
-  * These names are a bit 'bootstrap' like, which can be misleading.
-  * We don't really use primary and secondary colors, nor do we have
-  * a warning color and so on.
-  * However, these names are used under the hood by TailwindCSS
-  * and DaisyUI, so we're stuck with them.
-  *
-  * Read the descriptions below to understand what each color is used for.
-  */
+   *
+   * These names are a bit 'bootstrap' like, which can be misleading.
+   * We don't really use primary and secondary colors, nor do we have
+   * a warning color and so on.
+   * However, these names are used under the hood by TailwindCSS
+   * and DaisyUI, so we're stuck with them.
+   *
+   * Read the descriptions below to understand what each color is used for.
+   */
 
   // base-100: The default background color for a regular page (docs and so on)
   'base-100': colors.neutral['50'],
@@ -47,14 +48,14 @@ module.exports = {
   'base-content': colors.neutral['700'],
 
   // primary: The main brand color and color of the primary button
-  'primary': colors.violet['500'],
+  primary: colors.violet['500'],
   // primary-focus: The :hover color for the primary button
   'primary-focus': colors.violet['600'],
   // primary-content: The text color on a primary button
   'primary-content': colors.neutral['50'],
 
   // secondary: The link color on default backgrounds (base-100)
-  'secondary': colors.sky['500'],
+  secondary: colors.sky['500'],
   // secondary-focus: The :hover link color for default backgrounds. Or:
   // secondary-focus: An alternative link color for on dark backgrounds
   'secondary-focus': colors.sky['400'],
@@ -63,7 +64,7 @@ module.exports = {
 
   // accent: The accent color is used to highlight active things
   // Should be something is positive/neutral. Avoid red or orange.
-  'accent': colors.pink['400'],
+  accent: colors.pink['400'],
   // accent-focus: The :hover color for the accent button
   'accent-focus': colors.pink['300'],
   // accent-content: The text color for the accent button
@@ -71,7 +72,7 @@ module.exports = {
 
   // neutral: Used as the background for the footer and navigation on desktop
   // Should always be dark
-  'neutral': colors.neutral['900'],
+  neutral: colors.neutral['900'],
   // neutral-focus: Typically a shade lighter than neutral
   'neutral-focus': colors.neutral['700'],
   // neutral-content: The text color on neutral backgrounds
@@ -79,30 +80,30 @@ module.exports = {
 
   // info: Used rarely, can be another color best somewhat neutral looking
   // and should work with the default text color
-  'info': colors.indigo['600'],
+  info: colors.indigo['600'],
   // Text color on the info button
   '--btn-info-content': colors.neutral[50],
   // success: Used rarely, but if it is it's in notifications indicating success
   // Typically some shade of green
-  'success': colors.green['600'],
+  success: colors.green['600'],
   // Text color on the success button
   '--btn-success-content': colors.neutral[50],
   // warning: We don't do warnings, but this is used for the tabs under code blocks
   // and a couple of other UI elements.
-  'warning': colors.orange['500'],
+  warning: colors.orange['500'],
   // Text color on the warning button
   '--btn-warning-content': colors.neutral[50],
   // error: Used rarely, but if it is it's in notifications indicating success
   // or the danger button
   // Typically some shade of red
-  'error': colors.red['600'],
+  error: colors.red['600'],
   // Text color on the error button
   '--btn-error-content': colors.neutral[50],
 
   /* THEME GRADIENT
-  *
-  * This is used as a border & loading indicator
-  */
+   *
+   * This is used as a border & loading indicator
+   */
   '--theme-gradient': `repeating-linear-gradient(
     90deg,
     ${colors.violet[600]} 0,
@@ -113,14 +114,15 @@ module.exports = {
   )`,
 
   /* CODE HIGHLIGHTING COLORS
-  *
-  * These are variables to style highlighted code blocks.
-  *
-  * Specifically this first set applies to the wrapper around
-  * the highlighted code.
-  * The names should (hopefully) speak for themselves
-  */
+   *
+   * These are variables to style highlighted code blocks.
+   *
+   * Specifically this first set applies to the wrapper around
+   * the highlighted code.
+   * The names should (hopefully) speak for themselves
+   */
   '--code-background-color': colors.neutral['800'],
+  '--code-background-highlight-color': '#313131',
   '--code-border-color': colors.neutral['900'],
   '--code-color': colors.neutral['100'],
   '--code-font-family': `"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`,
@@ -130,8 +132,8 @@ module.exports = {
   '--code-outer-padding': '0 0.5rem',
   '--code-inner-padding': '1rem',
   /*
-    * These variables are used to style the highlighted tokens themselves
-    */
+   * These variables are used to style the highlighted tokens themselves
+   */
   '--code-color-keyword': colors.yellow['500'],
   '--code-font-weight-keyword': 'bold',
   '--code-color-entity': colors.violet['400'],
@@ -146,9 +148,9 @@ module.exports = {
   '--code-font-weight-property': 'bold',
 
   /* VARIOUS
-  *
-  * These are additional variables to control other aspects of the theme
-  */
+   *
+   * These are additional variables to control other aspects of the theme
+   */
   // border-radius for cards and other big elements
   '--rounded-box': '0.5rem',
   // border-radius for buttons and similar elements
@@ -173,9 +175,9 @@ module.exports = {
   '--focus-ring-offset': '2px',
 
   /* FREESEWING PATTERN THEMEING
-  *
-  * These are variables to style FreeSewing SVG output (drafts, examples, and so on)
-  */
+   *
+   * These are variables to style FreeSewing SVG output (drafts, examples, and so on)
+   */
   // Pattern background color
   '--pattern-bg': colors.neutral['50'],
   // Color for the main fabric
@@ -236,38 +238,37 @@ module.exports = {
   // Pattern overal scale for strokes and text sizes
   '--pattern-scale': '1',
   // Pattern xs stroke width
-  '--pattern-stroke-xs': "0.2px",
+  '--pattern-stroke-xs': '0.2px',
   // Pattern sm stroke width
-  '--pattern-stroke-sm': "0.4px",
+  '--pattern-stroke-sm': '0.4px',
   // Pattern default stroke width
-  '--pattern-stroke': "0.7px",
+  '--pattern-stroke': '0.7px',
   // Pattern lg stroke width
-  '--pattern-stroke-lg': "1.3px",
+  '--pattern-stroke-lg': '1.3px',
   // Pattern xl stroke width
-  '--pattern-stroke-xl': "2px",
+  '--pattern-stroke-xl': '2px',
   // Pattern 2xl stroke width
-  '--pattern-stroke-2xl': "4px",
+  '--pattern-stroke-2xl': '4px',
   // Pattern 3xl stroke width
-  '--pattern-stroke-3xl': "6px",
+  '--pattern-stroke-3xl': '6px',
   // Pattern 4xl stroke width
-  '--pattern-stroke-4xl': "8px",
+  '--pattern-stroke-4xl': '8px',
   // Pattern 5xl stroke width
-  '--pattern-stroke-5xl': "12px",
+  '--pattern-stroke-5xl': '12px',
   // Pattern 6xl stroke width
-  '--pattern-stroke-6xl': "16px",
+  '--pattern-stroke-6xl': '16px',
   // Pattern 7xl stroke width
-  '--pattern-stroke-7xl': "20px",
+  '--pattern-stroke-7xl': '20px',
 
   // Pattern sampling styles
-  '--pattern-sample-1': colors.red["500"],
-  '--pattern-sample-2': colors.orange["500"],
-  '--pattern-sample-3': colors.yellow["500"],
-  '--pattern-sample-4': colors.lime["500"],
-  '--pattern-sample-5': colors.emerald["500"],
-  '--pattern-sample-6': colors.cyan["500"],
-  '--pattern-sample-7': colors.blue["500"],
-  '--pattern-sample-8': colors.violet["500"],
-  '--pattern-sample-9': colors.fuchsia["500"],
-  '--pattern-sample-10': colors.rose["500"],
-
+  '--pattern-sample-1': colors.red['500'],
+  '--pattern-sample-2': colors.orange['500'],
+  '--pattern-sample-3': colors.yellow['500'],
+  '--pattern-sample-4': colors.lime['500'],
+  '--pattern-sample-5': colors.emerald['500'],
+  '--pattern-sample-6': colors.cyan['500'],
+  '--pattern-sample-7': colors.blue['500'],
+  '--pattern-sample-8': colors.violet['500'],
+  '--pattern-sample-9': colors.fuchsia['500'],
+  '--pattern-sample-10': colors.rose['500'],
 }