Added syntax highlighting and copy button for code and pre

Wave/Components/ArticleComponent.razor

@@ -90,6 +90,32 @@
 	}
 </div>
 
+<template id="copyButtonTemplate">
+	<button class="btn btn-sm btn-accent btn-square absolute top-2 right-2" title="copy">
+		<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+			<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
+		</svg>
+	</button>
+</template>
+<script>
+	async function copyCode(event) {
+		const container = event.srcElement.closest("div").querySelector("code, pre");
+		let text = container.innerText;
+		await navigator.clipboard.writeText(text);
+	}
+
+	document.querySelectorAll(".prose pre, .prose code").forEach((block) => {
+		// only add a button if browser supports Clipboard API
+		if (navigator.clipboard) {
+			block.parentElement.classList.add("relative");
+			const copyButton = document.getElementById("copyButtonTemplate").content.firstElementChild;
+			let button = copyButton.cloneNode(true);
+			button.addEventListener("click", copyCode);
+			block.parentElement.appendChild(button);
+		}
+	});
+</script>
+
 @code {
     [Parameter]
     public required Article Article { get; set; }

Wave/Utilities/MarkdownUtilities.cs

@@ -1,7 +1,7 @@
 using Markdig;
 using Markdig.Extensions.MediaLinks;
 using Microsoft.AspNetCore.Components;
-using Wave.Data;
+using Markdown.ColorCode;
 
 namespace Wave.Utilities;
 
@@ -18,9 +18,10 @@ public static class MarkdownUtilities {
                 AddControlsProperty = true,
                 Class = "max-w-full"
             })
+            .UseColorCode()
             .DisableHtml()
 		.Build();
-		return Markdown.ToHtml(markdown, pipeline);
+		return Markdig.Markdown.ToHtml(markdown, pipeline);
     }
 
     public static MarkupString ParseToMarkup(string markdown) {

Wave/Wave.csproj

@@ -16,7 +16,8 @@
     <PackageReference Include="Humanizer.Core.uk" Version="2.14.1" />
     <PackageReference Include="Magick.NET-Q8-AnyCPU" Version="13.5.0" />
     <PackageReference Include="MailKit" Version="4.3.0" />
-    <PackageReference Include="Markdig" Version="0.34.0" />
+    <PackageReference Include="Markdig" Version="0.36.2" />
+    <PackageReference Include="Markdown.ColorCode" Version="2.2.1" />
     <PackageReference Include="Microsoft.AspNetCore.Authentication.OpenIdConnect" Version="8.0.2" />
     <PackageReference Include="Microsoft.AspNetCore.DataProtection.StackExchangeRedis" Version="8.0.1" />
     <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="8.0.0" />

Wave/tailwind.config.js

@@ -49,6 +49,7 @@ module.exports = {
             bold: '700'
         },
         borderRadius: {
+            'none': 0,
             DEFAULT: '0.1rem',
             'md': '0.2rem',
             'lg': '0.35rem',

Wave/wwwroot/css/main.css

@@ -44,4 +44,8 @@ @layer components {
         -webkit-mask-image: linear-gradient(black, black 80%, rgba(0, 0, 0, 0.5) 85%, transparent 100%);
         mask-image: linear-gradient(black, black 80%, rgba(0, 0, 0, 0.5) 85%, transparent 100%);
     }
+
+    .prose pre, .prose code {
+        @apply bg-neutral-200 text-black rounded-none border-current border-2;
+    }
 }