diff --git a/kit/preprocess.js b/kit/preprocess.js
index 4c622ac1..74a1f463 100644
--- a/kit/preprocess.js
+++ b/kit/preprocess.js
@@ -432,6 +432,7 @@ const _mdsvexPreprocess = mdsvex({
 				lang && hljs.getLanguage(lang)
 					? hljs.highlight(lang, code, true).value
 					: hljs.highlightAuto(code).value;
+			const base64 = (val) => btoa(encodeURIComponent(val));
 			const escape = (code) =>
 				code.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/}/g, "\\}").replace(/\$/g, "\\$");
 			const REGEX_FRAMEWORKS_SPLIT = /\s*===(PT-TF|STRINGAPI-READINSTRUCTION)-SPLIT===\s*/gm;
@@ -462,12 +463,12 @@ const _mdsvexPreprocess = mdsvex({
 	<CodeBlockFw
 		group1={{
 			id: '${isPtTf ? "pt" : "stringapi"}',
-			code: \`${escape(codeGroup1)}\`,
+			code: \`${base64(codeGroup1)}\`,
 			highlighted: \`${escape(highlightedPt)}\`
 		}}
 		group2={{
 			id: '${isPtTf ? "tf" : "readinstruction"}',
-			code: \`${escape(codeGroup2)}\`,
+			code: \`${base64(codeGroup2)}\`,
 			highlighted: \`${escape(highlightedTf)}\`
 		}}
 	/>`;
@@ -484,7 +485,7 @@ const _mdsvexPreprocess = mdsvex({
 				}
 				return `
 	<CodeBlock 
-		code={\`${escape(code)}\`}
+		code={\`${base64(code)}\`}
 		highlighted={\`${escape(highlighted)}\`}
 	/>`;
 			}
diff --git a/kit/src/lib/CopyButton.svelte b/kit/src/lib/CopyButton.svelte
index 184d4895..8bb87ca8 100644
--- a/kit/src/lib/CopyButton.svelte
+++ b/kit/src/lib/CopyButton.svelte
@@ -21,7 +21,7 @@
 	});
 
 	function handleClick() {
-		copyToClipboard(value);
+		copyToClipboard(decodeURIComponent(atob(value)));
 		isSuccess = true;
 		if (timeout) {
 			clearTimeout(timeout);