EES-5464 used react-syntax-highlighter instead for much more simple i…

…mplementation

src/explore-education-statistics-common/package.json

@@ -11,6 +11,7 @@
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-dialog": "1.0.4",
     "@tanstack/react-query": "4.32.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "axios": "^1.4.0",
     "classnames": "^2.3.2",
     "color2k": "^2.0.2",
@@ -30,8 +31,6 @@
     "lodash": "^4.17.21",
     "memoizee": "^0.4.14",
     "nanoid": "^4.0.0",
-    "prism-react-renderer": "^2.4.0",
-    "prismjs": "^1.29.0",
     "qs": "^6.11.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -40,6 +39,7 @@
     "react-lazyload": "3.2.1",
     "react-leaflet": "^4.2.1",
     "react-markdown": "^8.0.0",
+    "react-syntax-highlighter": "^15.5.0",
     "recharts": "^2.7.2",
     "regenerator-runtime": "0.13.9",
     "sanitize-html": "^2.11.0",

src/explore-education-statistics-common/src/components/Code.module.scss

@@ -26,15 +26,11 @@
   background: #f9f9f8;
   max-width: 100%;
   overflow-x: auto;
-  padding: 46px 15px 15px;
+  padding: 60px 15px 15px !important;
 
   &:focus {
     border: $govuk-focus-width solid #000;
     outline: $govuk-focus-colour solid $govuk-focus-width;
-    padding: 44px 13px 13px; // counter border width to avoid content shift
-  }
-
-  > code {
-    background: none;
+    padding: 58px 13px 13px !important; // counter border width to avoid content shift
   }
 }