Blazor Developer for MarkDig Extension

I need a seasoned Blazor Developer to develop a MarkDig extension that allows markdown-rendered codeblocks to be wrapped by a custom Blazor component with a File Name and action link.

UI Components (Input):

1. Markdown containing <pre> <code> ... </code> </pre> blocks (example included below)

Key Operations:

1. Parse the Code Blocks out, wrap their content with a component containing a title and an action link

Output:

Rendered HTML containing the original code block wrapped in a component.

Technologies:

MudBlazor

MarkDig

MarkDig.CodeColor

Example Input (including ColorCode colorization):

<div class="codebuddy-markdown my-4"><!--!--><p>To integrate the core functionality of uploading images to Azure Blob Storage using a Shared Access Signature into your codebase, follow these instructions. The language used is C#, and it's assumed your project supports dependency injection, similar functionalities, and configurations.</p>

<h3>1. Install Required Packages</h3>

<p>Ensure you have the necessary packages installed in your project. These include the Azure Storage Blobs package. You can install it using NuGet package manager:</p>

<pre><code class="language-shell">Install-Package Azure.Storage.Blobs -Version 12.13.0

</code></pre>

<h3>2. Define Storage Constants</h3>

<p>Create a <code>Constants.cs</code> file to store constant values, including your Azure Blob Storage connection string and the container name.</p>

<div style="color:#DADADA;background-color:#1E1E1E;"><pre><span style="color:#57A64A;">// File: Constants.cs</span>

<span style="color:#569CD6;">public</span> <span style="color:#569CD6;">class</span> Constants

{

   <span style="color:#569CD6;">public</span> <span style="color:#569CD6;">const</span> <span style="color:#569CD6;">string</span> StorageAccount = <span style="color:#D69D85;">"YourStorageAccountConnectionString"</span>;

   <span style="color:#569CD6;">public</span> <span style="color:#569CD6;">const</span> <span style="color:#569CD6;">string</span> ImageContainer = <span style="color:#D69D85;">"images"</span>; <span style="color:#57A64A;">// Or your preferred container name</span>

}

</pre></div>

Upon acceptance of the job, we will provide a Github Repository to use as source control.