feat: add ability to copy code block (closes #366)

Author: linkdotnet

src/LinkDotNet.Blog.Web/Features/CopyCodeBlockToClipboardExtension.cs

@@ -0,0 +1,56 @@
+using Markdig;
+using Markdig.Renderers;
+using Markdig.Renderers.Html;
+using Markdig.Syntax;
+
+namespace LinkDotNet.Blog.Web.Features;
+
+internal static class MarkdownPipelineBuilderExtensions
+{
+    public static MarkdownPipelineBuilder UseCopyCodeBlock(this MarkdownPipelineBuilder pipeline)
+    {
+        pipeline.Extensions.Add(new CopyCodeBlockToClipboardExtension());
+        return pipeline;
+    }
+}
+
+internal sealed class CopyCodeBlockToClipboardExtension : IMarkdownExtension
+{
+    public void Setup(MarkdownPipelineBuilder pipeline)
+    {
+    }
+
+    public void Setup(MarkdownPipeline pipeline, IMarkdownRenderer renderer)
+    {
+        if (renderer is not HtmlRenderer htmlRenderer)
+        {
+            return;
+        }
+
+        var originalCodeBlockRenderer = htmlRenderer.ObjectRenderers.FindExact<CodeBlockRenderer>();
+        if (originalCodeBlockRenderer is null)
+        {
+            return;
+        }
+
+        htmlRenderer.ObjectRenderers.Remove(originalCodeBlockRenderer);
+        htmlRenderer.ObjectRenderers.Add(new CustomCodeBlockRenderer());
+    }
+}
+
+internal sealed class CustomCodeBlockRenderer : CodeBlockRenderer
+{
+    protected override void Write(HtmlRenderer renderer, CodeBlock obj)
+    {
+        renderer.Write("""<div class="position-relative">""");
+        renderer.Write("""
+                       <button class="btn btn-sm position-absolute top-0 end-0 m-2 border border-primary text-primary copy-btn"
+                               type="button"
+                               onclick="navigator.clipboard.writeText(this.parentElement.querySelector('pre code').textContent)">
+                               <i class="copy"></i>
+                       </button>
+                       """);
+        base.Write(renderer, obj);
+        renderer.Write("</div>");
+    }
+}

src/LinkDotNet.Blog.Web/Features/MarkdownConverter.cs

@@ -18,6 +18,7 @@ public static class MarkdownConverter
         .UseAutoIdentifiers(AutoIdentifierOptions.GitHub)
         .UseEmojiAndSmiley()
         .UseBootstrap()
+        .UseCopyCodeBlock()
         .Build();
 
     public static MarkupString ToMarkupString(string markdown)

src/LinkDotNet.Blog.Web/wwwroot/css/basic.css

@@ -115,6 +115,21 @@ code {
 	background: #696969;
 }
 
+.copy-btn {
+	border-color: whitesmoke !important;
+}
+
+.copy-btn:active {
+	animation: copy-flash 0.5s ease-out;
+}
+
+@keyframes copy-flash {
+	50% {
+		border-color: whitesmoke !important;
+		background: whitesmoke;
+	}
+}
+
 /* Template defined css */
 .valid.modified:not([type=checkbox]) {
     outline: 1px solid #26b050;
@@ -127,6 +142,7 @@ code {
 .validation-message {
     color: red;
 }
+
 #blazor-error-ui {
     background: lightyellow;
     bottom: 0;