diff --git a/docs/_spec/Dockerfile b/docs/_spec/Dockerfile
index 1fc28081c59f..ff2b089fe1dc 100644
--- a/docs/_spec/Dockerfile
+++ b/docs/_spec/Dockerfile
@@ -1,13 +1,12 @@
-FROM ruby:2.7
+FROM ruby:3.3
 
 RUN apt-get install -y curl \
   && curl -sL https://deb.nodesource.com/setup_18.x | bash - \
   && apt-get install -y nodejs \
   && curl -L https://www.npmjs.com/install.sh | sh
 
-RUN gem update --system
-RUN gem install sass-embedded -v 1.58.0
-RUN gem install bundler:1.17.2 jekyll
+RUN gem update --system 3.5.6
+RUN gem install bundler:2.5.6
 
 WORKDIR /srv/jekyll
 
diff --git a/docs/_spec/Gemfile b/docs/_spec/Gemfile
index bc45dc84db8c..36cf1ce0d5e1 100644
--- a/docs/_spec/Gemfile
+++ b/docs/_spec/Gemfile
@@ -1,8 +1,7 @@
-# To build the spec on Travis CI
 source "https://rubygems.org"
+ruby "3.3"
 
-gem "jekyll", "3.6.3"
-gem "webrick"
-gem "rouge"
-# gem 's3_website'
-gem "redcarpet", "3.5.1"
+gem "jekyll", "4.3.3"
+gem "rexml"
+gem "sass-embedded"
+gem "csv"
diff --git a/docs/_spec/Gemfile.lock b/docs/_spec/Gemfile.lock
index 48efd373725e..d13209ef9a5a 100644
--- a/docs/_spec/Gemfile.lock
+++ b/docs/_spec/Gemfile.lock
@@ -1,57 +1,78 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.1)
+    addressable (2.8.6)
       public_suffix (>= 2.0.2, < 6.0)
     colorator (1.1.0)
-    ffi (1.15.5)
+    concurrent-ruby (1.2.3)
+    csv (3.2.8)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.16.3)
     forwardable-extended (2.6.0)
-    jekyll (3.6.3)
+    google-protobuf (3.25.3-x86_64-linux)
+    http_parser.rb (0.8.0)
+    i18n (1.14.1)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.3.3)
       addressable (~> 2.4)
       colorator (~> 1.0)
-      jekyll-sass-converter (~> 1.0)
-      jekyll-watch (~> 1.1)
-      kramdown (~> 1.14)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
       liquid (~> 4.0)
-      mercenary (~> 0.3.3)
+      mercenary (>= 0.3.6, < 0.5)
       pathutil (~> 0.9)
-      rouge (>= 1.7, < 3)
+      rouge (>= 3.0, < 5.0)
       safe_yaml (~> 1.0)
-    jekyll-sass-converter (1.5.2)
-      sass (~> 3.4)
-    jekyll-watch (1.5.1)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
+    jekyll-sass-converter (3.0.0)
+      sass-embedded (~> 1.54)
+    jekyll-watch (2.2.1)
       listen (~> 3.0)
-    kramdown (1.17.0)
-    liquid (4.0.3)
-    listen (3.7.1)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.4)
+    listen (3.8.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.3.6)
+    mercenary (0.4.0)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (5.0.0)
+    public_suffix (5.0.4)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    redcarpet (3.5.1)
-    rouge (2.2.1)
+    rexml (3.2.6)
+    rouge (4.2.0)
     safe_yaml (1.0.5)
-    sass (3.7.4)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
-    webrick (1.7.0)
+    sass-embedded (1.71.0-x86_64-linux-gnu)
+      google-protobuf (~> 3.25)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.5.0)
+    webrick (1.8.1)
 
 PLATFORMS
-  ruby
   x86_64-linux
 
 DEPENDENCIES
-  jekyll (= 3.6.3)
-  redcarpet (= 3.5.1)
+  csv
+  jekyll (= 4.3.3)
+  rexml
   rouge
-  webrick
+  sass-embedded
+
+RUBY VERSION
+   ruby 3.3.0p0
 
 BUNDLED WITH
-   2.3.5
+   2.5.6
diff --git a/docs/_spec/_config.yml b/docs/_spec/_config.yml
index 3cb9c8f0d440..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: redcarpet
+markdown: kramdown
 encoding: utf-8
-redcarpet:
-  extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data", "strikethrough", "lax_spacing", "space_after_headers", "superscript", "footnotes", "disable_indented_code_blocks"]
+highlighter: none
+kramdown:
+  syntax_highlighter_opts:
+    disable : true
diff --git a/docs/_spec/_layouts/default.yml b/docs/_spec/_layouts/default.yml
index 2589a105dff2..feefe12d9dff 100644
--- a/docs/_spec/_layouts/default.yml
+++ b/docs/_spec/_layouts/default.yml
@@ -6,12 +6,22 @@
   <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>
+  <!-- Mathjax Support -->
+  <script type="text/javascript" async
+	  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
+  </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 +55,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..33489c4f8e8d 100644
--- a/docs/_spec/public/scripts/main.js
+++ b/docs/_spec/public/scripts/main.js
@@ -41,23 +41,113 @@ 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 = [];
+
+    console.log(text);
+
+    // 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;
+	if (children.length == 1) {
+	    span.span = children[0];
+	}
+    }
+
+    function go(parent, offset, spans) {
+	
+	var span = spans.shift();
+	var child = parent.firstChild;
+	
+	while (child && span) {
+
+	    if (child instanceof Text) {
+		const str = child.wholeText;
+		const start = offset;
+		const end = start + str.length;
+		
+		// TODO: Deal with the other situation, where our math span encompasses multiple highlight spans...
+		if (span.start >= start && span.end <= end) {
+		    const beforeText = str.substring(0, span.start - start);
+		    if (beforeText) {
+			parent.insertBefore(new Text(beforeText), child);
+		    }
+		    const afterText = str.substring(span.end - start);
+		    const newChild = span.span;
+		    parent.replaceChild(newChild, child);
+		    child = newChild;
+		    const afterChild = new Text(afterText);
+		    const next = child.nextSibling;
+		    if (next) {
+			parent.insertBefore(afterChild, next);
+		    } else {
+			parent.appendChild(afterChild);
+		    }
+		    offset = span.end;
+		    span = spans.shift();
+		} else {
+		    offset = end;
+		}
+	    } else if (child.tagName == "SPAN") {
+		spans.unshift(span);
+		offset = go(child, offset, spans);
+	    } else {
+		console.log("skipping element");
+	    }
+
+	    while (span && offset > span.end) {
+		console.log("dropping span...");
+		span = spans.shift();
+	    }
+
+	    child = child.nextSibling;
+	}
+
+	return offset;
+    }
+
+    // Here we start the merging between the katex output and highlight output.
+    if (spans.length != 0) {
+	go(el, 0, spans);
+    }
+}
+
+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.configure({ cssSelector: 'code' });
+  hljs.highlightAll();
   $("pre nobr").addClass("fixws");
   // point when all necessary js is done, so PDF to be rendered
   window.status = "loaded";