From d944fc819240cfce4ccd54759fc91df273929b40 Mon Sep 17 00:00:00 2001
From: Stefano Lottini <stefano.lottini@datastax.com>
Date: Fri, 28 Apr 2023 15:44:43 +0200
Subject: [PATCH 1/4] fix for bgcolor of overflowing code blocks. Relies on
 katapodv2.css, revert when merging

---
 package.json     | 2 +-
 src/rendering.ts | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index d3e990a..078ccd1 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
         "url": "https://github.com/DataStax-Academy/katapod"
     },
     "description": "",
-    "version": "1.2.0",
+    "version": "1.2.1",
     "license": "Apache-2.0",
     "engines": {
         "vscode": "^1.64.0"
diff --git a/src/rendering.ts b/src/rendering.ts
index 7222bf7..4281a13 100644
--- a/src/rendering.ts
+++ b/src/rendering.ts
@@ -217,10 +217,11 @@ export function loadPage(target: TargetStep, env: KatapodEnvironment) {
 		const executionHref = `command:katapod.sendText?${renderCommandUri(parsedCommand)}`;
 		const aSpanEle = suppressExecution ? '<span>': `<a class="codeblock" title="Click to execute" href="${executionHref}">`;
 		const aSpanEleCloser = suppressExecution ? '</span>': '</a>';
-		const preEle = `<pre` + slf.renderAttrs(token) + `>`;
-		const codeEleClasses = suppressExecution ? "codeblock nonexecutable" : "codeblock executable";
-		const codeEleStyle = parsedCommand.backgroundColor ? ` style="background-color: ${parsedCommand.backgroundColor};"` : "";
-		const codeEle = `<code id="${parsedCommand.codeBlockId}" class="${codeEleClasses}"${codeEleStyle}>`;
+		const preEleClasses = suppressExecution ? "nonexecutable" : "executable";
+		const preEleStyle = parsedCommand.backgroundColor ? ` style="background-color: ${parsedCommand.backgroundColor};"` : "";
+		const preEle = `<pre` + slf.renderAttrs(token) + ` class="${preEleClasses}"${preEleStyle}>`;
+		const codeEleClasses = "codeblock";
+		const codeEle = `<code id="${parsedCommand.codeBlockId}" class="${codeEleClasses}">`;
 
 		return `${aSpanEle}${preEle}${codeEle}${renderedCode}</code></pre>${aSpanEleCloser}`;
 

From b884836e28a60b2d6aa363a551475012bf6bceee Mon Sep 17 00:00:00 2001
From: Stefano Lottini <stefano.lottini@datastax.com>
Date: Fri, 28 Apr 2023 16:05:36 +0200
Subject: [PATCH 2/4] switch pages to css v2

---
 src/rendering.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/rendering.ts b/src/rendering.ts
index 4281a13..8138b29 100644
--- a/src/rendering.ts
+++ b/src/rendering.ts
@@ -26,7 +26,7 @@ const stepPageHtmlPrefix = `
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/default.min.css">
-		<link rel="stylesheet" type="text/css" href="https://datastax-academy.github.io/katapod-shared-assets/css/katapod.css" />
+		<link rel="stylesheet" type="text/css" href="https://datastax-academy.github.io/katapod-shared-assets/css/katapodv2.css" />
 		<script src="https://datastax-academy.github.io/katapod-shared-assets/js/katapod.js"></script>
 		<link rel="stylesheet" type="text/css" href="https://datastax-academy.github.io/katapod-shared-assets/quiz/quiz.css" />
 		<link rel="stylesheet" type="text/css" href="https://datastax-academy.github.io/katapod-shared-assets/quiz/page.css" />

From ad25797aedbab96d973f50de0dc225da9fe77383 Mon Sep 17 00:00:00 2001
From: Stefano Lottini <stefano.lottini@datastax.com>
Date: Sat, 29 Apr 2023 00:01:05 +0200
Subject: [PATCH 3/4] fix executed-mark moving with the horiz-scrolling of
 overflowing codeblocks

---
 src/rendering.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/rendering.ts b/src/rendering.ts
index 8138b29..904395a 100644
--- a/src/rendering.ts
+++ b/src/rendering.ts
@@ -45,9 +45,9 @@ const stepPageHtmlPostfix = `
 						window.scrollTo(0, 0);
 						break;
 					case "mark_executed_block":
-						const codeBlock = document.getElementById(message.blockId);
-						if (codeBlock) {
-							codeBlock.classList.add("executed");
+						const codeBlockPre = document.getElementById("pre_" + message.blockId);
+						if (codeBlockPre) {
+							codeBlockPre.classList.add("executed");
 							break;
 						}
 				}
@@ -219,7 +219,7 @@ export function loadPage(target: TargetStep, env: KatapodEnvironment) {
 		const aSpanEleCloser = suppressExecution ? '</span>': '</a>';
 		const preEleClasses = suppressExecution ? "nonexecutable" : "executable";
 		const preEleStyle = parsedCommand.backgroundColor ? ` style="background-color: ${parsedCommand.backgroundColor};"` : "";
-		const preEle = `<pre` + slf.renderAttrs(token) + ` class="${preEleClasses}"${preEleStyle}>`;
+		const preEle = `<pre id="pre_${parsedCommand.codeBlockId}"` + slf.renderAttrs(token) + ` class="${preEleClasses}"${preEleStyle}>`;
 		const codeEleClasses = "codeblock";
 		const codeEle = `<code id="${parsedCommand.codeBlockId}" class="${codeEleClasses}">`;
 

From 804985d7ecb31ba0c1910b14ece8095b41f1028b Mon Sep 17 00:00:00 2001
From: Stefano Lottini <stefano.lottini@datastax.com>
Date: Thu, 4 May 2023 11:04:09 +0200
Subject: [PATCH 4/4] revert to base css

---
 src/rendering.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/rendering.ts b/src/rendering.ts
index 904395a..9d8729a 100644
--- a/src/rendering.ts
+++ b/src/rendering.ts
@@ -26,7 +26,7 @@ const stepPageHtmlPrefix = `
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/default.min.css">
-		<link rel="stylesheet" type="text/css" href="https://datastax-academy.github.io/katapod-shared-assets/css/katapodv2.css" />
+		<link rel="stylesheet" type="text/css" href="https://datastax-academy.github.io/katapod-shared-assets/css/katapod.css" />
 		<script src="https://datastax-academy.github.io/katapod-shared-assets/js/katapod.js"></script>
 		<link rel="stylesheet" type="text/css" href="https://datastax-academy.github.io/katapod-shared-assets/quiz/quiz.css" />
 		<link rel="stylesheet" type="text/css" href="https://datastax-academy.github.io/katapod-shared-assets/quiz/page.css" />
@@ -193,7 +193,7 @@ export function loadPage(target: TargetStep, env: KatapodEnvironment) {
 
 	// process inline code
 	md.renderer.rules.code_inline = function (tokens: any, idx: any, options: any, env: any, slf: any) {
-		// modified from: https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.js#L21-L27
+		// modified from: https://github.com/markdown-it/markdown-it/blob/2b6cac25823af011ff3bc7628bc9b06e483c5a08/lib/renderer.js#L21-L27
 		var token = tokens[idx];
 		return  '<code class="inline_code"' + slf.renderAttrs(token) + '>' +
 				md.utils.escapeHtml(token.content) +