feat: CodeBlock improvements

emerald-dao · Oct 25, 2023 · e2565c7 · e2565c7
1 parent eb5d294
commit e2565c7
Showing 1 changed file with 54 additions and 36 deletions.
diff --git a/src/lib/components/CodeBlock/CodeBlock.svelte b/src/lib/components/CodeBlock/CodeBlock.svelte
@@ -1,27 +1,34 @@
 <script type="ts">
 	import Prism from 'prismjs';
+	import 'prismjs/components/prism-json';
+	import 'prismjs/components/prism-bash';
+	import 'prismjs/components/prism-csharp';
 	import { onMount } from 'svelte';
-	import 'prismjs/plugins/toolbar/prism-toolbar.min.css';
-	import 'prismjs/plugins/toolbar/prism-toolbar.min';
-	import 'prismjs/plugins/line-numbers/prism-line-numbers.min.css';
-	import 'prismjs/plugins/line-numbers/prism-line-numbers.min';
-	import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min';
+	import 'prismjs/plugins/toolbar/prism-toolbar.css';
+	import 'prismjs/plugins/toolbar/prism-toolbar';
+	import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';
+	import 'prismjs/plugins/line-numbers/prism-line-numbers';
+	import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
+	import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
 
-	export let codeBlockTitle: string;
-	export let codeStyle: string;
 	export let code: string;
+	export let lang: string;
+
+	const decodedCode = decodeURIComponent(code);
+
+	let formatLang = lang === 'cadence' || lang === undefined ? 'js' : lang;
 
 	onMount(() => {
 		Prism.highlightAll();
 	});
 </script>
 
 <div class="code" data-prismjs-copy-timeout="1000">
-	<div class="language-wrapper">{codeBlockTitle}</div>
-	<pre class={`language-${codeStyle} line-numbers copy-to-clipboard`}>
-		<code class={`language-${codeStyle}`} data-prismjs-copy="Click to copy code!">
-			{@html Prism.highlight(code, Prism.languages[codeStyle], codeStyle)}
-		</code>
+	<div class="language-wrapper">{lang}</div>
+	<pre class={`language-${formatLang} line-numbers copy-to-clipboard`}>
+		<code class={`language-${formatLang}`} data-prismjs-copy="Click to copy code!">
+			{decodedCode}
+		</code> 
 	</pre>
 </div>
 
@@ -35,33 +42,44 @@
 	/>
 </svelte:head>
 
-<style>
-	.language-wrapper {
-		padding: var(--space-4);
-		border-right: 1px var(--clr-border-primary) solid;
-		border-top: 1px var(--clr-border-primary) solid;
-		border-left: 1px var(--clr-border-primary) solid;
-		border-top-right-radius: var(--radius-2);
-		border-top-left-radius: var(--radius-2);
-	}
+<style lang="scss">
+	.code {
+		border-radius: var(--radius-1);
+		border: 1px var(--clr-border-primary) solid;
+		margin-block: var(--space-4) var(--space-8);
+		background: var(--clr-background-secondary);
 
-	pre {
-		border-right: 1px var(--clr-border-primary) solid;
-		border-bottom: 1px var(--clr-border-primary) solid;
-		border-left: 1px var(--clr-border-primary) solid;
-		border-bottom-right-radius: var(--radius-2);
-		border-bottom-left-radius: var(--radius-2);
-		padding: 0;
-		margin: 0;
-	}
+		.language-wrapper {
+			padding: var(--space-4);
+			background-color: var(--clr-background-primary);
+			border-top-left-radius: var(--radius-1);
+			border-top-right-radius: var(--radius-1);
+		}
+
+		pre {
+			padding: var(--space-6) var(--space-14);
+			margin: var(--space-1);
+		}
+
+		code[class*='language-'],
+		pre[class*='language-'] {
+			color: var(--clr-text-main);
+		}
 
-	code[class*='language-'],
-	pre[class*='language-'] {
-		color: var(--clr-text-main);
+		:not(pre) > code[class*='language-'],
+		pre[class*='language-'] {
+			background: var(--clr-background-secondary);
+			border-bottom-left-radius: var(--radius-1);
+			border-bottom-right-radius: var(--radius-1);
+		}
 	}
 
-	:not(pre) > code[class*='language-'],
-	pre[class*='language-'] {
-		background: var(--clr-surface-primary);
+	// edit scrollbar styling
+	::-webkit-scrollbar {
+		height: 0.4rem;
+		margin-inline: var(--space-2);
+		&-thumb {
+			background-color: var(--clr-surface-secondary);
+		}
 	}
 </style>