diff --git a/docs/_spec/Gemfile b/docs/_spec/Gemfile
index f1a2755e0050..36cf1ce0d5e1 100644
--- a/docs/_spec/Gemfile
+++ b/docs/_spec/Gemfile
@@ -2,7 +2,6 @@ source "https://rubygems.org"
 ruby "3.3"
 
 gem "jekyll", "4.3.3"
-gem "rouge"
 gem "rexml"
 gem "sass-embedded"
 gem "csv"
diff --git a/docs/_spec/_config.yml b/docs/_spec/_config.yml
index c66a87fe0df4..54efe662a69c 100644
--- a/docs/_spec/_config.yml
+++ b/docs/_spec/_config.yml
@@ -4,8 +4,9 @@ thisScalaVersion: 2.13
 versionCompareMessage: "an upcoming"
 safe: true
 lsi: false
-highlighter: false
 markdown: kramdown
 encoding: utf-8
+highlighter: none
 kramdown:
-  input: GFM
\ No newline at end of file
+  syntax_highlighter_opts:
+    disable : true
diff --git a/docs/_spec/_layouts/default.yml b/docs/_spec/_layouts/default.yml
index 2589a105dff2..c69aa5e9b9c4 100644
--- a/docs/_spec/_layouts/default.yml
+++ b/docs/_spec/_layouts/default.yml
@@ -6,12 +6,17 @@
   <link rel="icon" type="image/png" href="public/favicon.ico">
   <link rel="shortcut icon" type="image/png" href="public/favicon.ico">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css" integrity="sha384-9eLZqc9ds8eNjO3TmqPeYcDj8n+Qfa4nuSiGYa6DjLNcv9BtN69ZIulL9+8CqC9Y" crossorigin="anonymous">
-  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.js" integrity="sha384-K3vbOmF2BtaVai+Qk37uypf7VrgBubhQreNQe9aGsz9lB63dIFiQVlJbr92dw2Lx" crossorigin="anonymous"></script>
-  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/contrib/auto-render.min.js" integrity="sha384-kmZOZB5ObwgQnS/DuDg6TScgOiWWBiVt0plIRkZCmE6rDZGrEOQeHM5PcHi+nyqe" crossorigin="anonymous"></script>
-
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css">
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"crossorigin="anonymous">
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" crossorigin="anonymous"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/stackoverflow-light.min.css">
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/scala.min.js"></script>
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/ebnf.min.js"></script>
+
+  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css"> -->
   <!-- need to use include to see value of page.chapter variable -->
   <style type="text/css">
     {% include numbering.css %}
@@ -45,7 +50,7 @@
 
   <script>window.jekyllEnv = '{{jekyll.environment}}';</script>
   <script src="public/scripts/toc.js"></script>
-  <script src="public/scripts/highlight.pack.js"></script>
+  <!-- <script src="public/scripts/highlight.pack.js"></script> -->
   <script src="public/scripts/main.js"></script>
 </body>
 </html>
diff --git a/docs/_spec/public/scripts/main.js b/docs/_spec/public/scripts/main.js
index 9ade9c770f1e..1263bf868294 100644
--- a/docs/_spec/public/scripts/main.js
+++ b/docs/_spec/public/scripts/main.js
@@ -41,23 +41,95 @@ if(window.jekyllEnv !== 'spec-pdf') {
   );
 }
 
-// no language auto-detect so that EBNF isn't detected as scala
-hljs.configure({
-  languages: []
+// See https://github.com/highlightjs/highlight.js/issues/2889 for additional context.
+function renderMath({el, result, text}) {
+
+    const re = RegExp('´', 'g');
+
+    const spans = [];
+
+    // get the spans of all math elements
+    while(match = re.exec(text)) {
+	const start = match.index;
+	match = re.exec(text);
+	if(match == null) {
+	    break;
+	} else {
+	    const end = match.index + 1;
+	    spans.push({start, end});
+	}
+    }
+
+    // render spans using katex
+    for(const span of spans) {
+	const {start, end} = span;
+	const str = text.substring(start + 1, end - 1);
+	const parent = new DocumentFragment();
+	katex.render(str, parent, { throwOnError: false });
+	const children = parent.children;
+	// TODO: Double check mutiple elements aren't possible 
+	if (children.length == 1) {
+	    span.span = children[0];
+	}
+    }
+
+    // Here we start the merging between the katex output and highlight output.
+    if (spans.length != 0) {
+
+	// This is essentially our iterator
+	var offset = 0;
+	var span = spans.shift();
+	var child = el.firstChild;
+
+	// highlight only supports one level of nesting.
+	while (child) {
+	    if (child instanceof Text) {
+		const str = child.wholeText;
+		const start = offset;
+		const end = start + str.length;
+
+		if (span.start >= start && span.end <= end) {
+		    const beforeText = str.substring(0, span.start - start);
+		    if (beforeText) {
+			el.insertBefore(new Text(beforeText), child);
+		    }
+		    
+		    const afterText = str.substring(span.end - start);
+		    child = el.replaceChild(span.span, child);
+		    
+		    if (afterText) {
+			el.insertAfter(child, new Text(afterText), child);
+		    }
+		    
+		    offset = span.end;
+		    
+		} else {
+		    offset = end;
+		}
+	    } else if (child.tagName) {
+		offset += str.length;
+	    }
+
+	    child = child.nextSibling;
+	}
+    }
+}
+
+hljs.addPlugin({
+    'after:highlightElement': renderMath
 });
 
 // KaTeX configuration
 document.addEventListener("DOMContentLoaded", function() {
   renderMathInElement(document.body, {
-    delimiters: [
-      {left: "´", right: "´", display: false}, // "display: false" -> inline
-      {left: "$$", right: "$$", display: true}
-    ],
-    ignoredTags: ['script', 'noscript', 'style', 'textarea'],
+      delimiters: [
+	  {left: "´", right: "´", display: false}, // "display: false" -> inline
+	  {left: "$$", right: "$$", display: true}
+      ],
+      // We ignore 'code' here, because highlight will deal with it.
+      ignoredTags: ['script', 'noscript', 'style', 'code'],
   });
-  // syntax highlighting after KaTeX is loaded,
-  // so that math can be used in code blocks
-  hljs.initHighlighting();
+  hljs.highlightAll();
   $("pre nobr").addClass("fixws");
   // point when all necessary js is done, so PDF to be rendered
   window.status = "loaded";