Enhancing UI/UX in LLM Responses with Markdown Formatting Using Markdig and Bootstrap in C#

#llm #markdown #markdig #csharp

Introduction

In this article, we'll explore the powerful library Markdig and how it can be used to enhance your Markdown formatting capabilities. We'll also introduce a custom class, PromptFormatter, which transforms Markdown into HTML while integrating Bootstrap classes for improved styling. By the end of this tutorial, you'll be equipped to write prompts that support Markdown formatting, including tables and lists, using GitHub-flavored Markdown syntax.

Prerequisites

Before diving into the implementation, ensure you have the following:

Markdig Library: A .NET library for converting Markdown to HTML with advanced extensions. Install it via NuGet in your C# project.
Bootstrap Framework: Familiarity with Bootstrap classes for styling HTML tables.
C# Development Environment: Set up with Visual Studio or your preferred IDE to implement and test the PromptFormatter class.

Step 1: Understanding Markdig

Markdig is a flexible and extensible Markdown processor for .NET. It supports GitHub-flavored Markdown and offers various extensions to enhance Markdown parsing and conversion to HTML. This makes it an excellent choice for applications requiring Markdown formatting.

Potential Usage
Markdig can be utilized in various scenarios, such as:

Chatrooms: Enhance user messages with Markdown formatting, allowing for structured content like lists, tables, and links.
Documentation Tools: Convert Markdown documentation into HTML for web-based viewing.
Content Management Systems: Enable Markdown editing and display for blog posts and articles.

Step 2: Implementing the `PromptFormatter` Class

The PromptFormatter class is designed to convert Markdown into HTML and apply Bootstrap classes to tables for responsive and styled layouts.

using Markdig;
using System.Text.RegularExpressions;

public class PromptFormatter
{
    // Convert Markdown to HTML and add Bootstrap classes to every table
    public static string FormatResponse(string markdown)
    {
        // 1. Convert markdown -> html
        var pipeline = new MarkdownPipelineBuilder()
                       .UseAdvancedExtensions()
                       .Build();

        var html = Markdown.ToHtml(markdown, pipeline);

        // 2. Inject Bootstrap classes into each table tag
        html = Regex.Replace(html,
                "<table>",
                "<div class=\"table-responsive\"><table class=\"table table-sm table-bordered\">",
                RegexOptions.IgnoreCase);

        html = html.Replace("</table>", "</table></div>");

        return html;
    }
}

Step 3: Creating a Generic Markdown Template

To effectively use Markdown in your prompts, you can create a generic template that includes sections for headings, lists, and tables. This template serves as a guide for structuring your Markdown content.

Generic Markdown Template:

# Title

## Introduction
Provide a brief introduction to your topic.

## Section 1: Key Points
- Point 1
- Point 2
- Point 3

## Section 2: Detailed Information
Here, you can include more detailed information and examples.

### Example Table:
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Data 1   | Data 2   | Data 3   |

## Conclusion
Summarize the key takeaways and any final thoughts.

Step 4: Demo - Creating a Cooking Guide in Markdown

Let's create a prompt asking a language model to generate a cooking guide in Markdown format. You can then use the PromptFormatter to convert it into HTML.

Prompt Example:

Create a cooking guide in Markdown format that includes a list of essential kitchen tools, a simple recipe, and a table of ingredients with quantities, following the Markdown Template:

# Title

## Introduction
Provide a brief introduction to your topic.

## Section 1: Key Points
- Point 1
- Point 2
- Point 3

## Section 2: Detailed Information
Here, you can include more detailed information and examples.

### Example Table:
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Data 1   | Data 2   | Data 3   |

## Conclusion
Summarize the key takeaways and any final thoughts.

LLM Generated Markdown Cooking Guide:

# Essential Cooking Guide

## Introduction
Cooking at home can be a rewarding and enjoyable experience. To make the process smooth and efficient, it's important to have the right tools and a simple recipe to start with. This guide will provide you with a list of essential kitchen tools, a straightforward recipe, and a detailed table of ingredients with their quantities.

## Section 1: Key Points
- Essential kitchen tools for beginners
- A simple and delicious recipe
- Detailed ingredient list with quantities

## Section 2: Detailed Information

### Essential Kitchen Tools
To get started in the kitchen, you'll need a few basic tools:
- **Chef's Knife**: A versatile knife for chopping, slicing, and dicing.
- **Cutting Board**: A sturdy surface for preparing ingredients.
- **Measuring Cups and Spoons**: For accurate measurement of ingredients.
- **Mixing Bowls**: Various sizes for mixing ingredients.
- **Saucepan**: For cooking sauces, boiling, and simmering.
- **Frying Pan**: Ideal for sautéing and frying.
- **Baking Sheet**: For baking and roasting.
- **Spatula**: For flipping and stirring.
- **Wooden Spoon**: Great for stirring sauces and soups.

### Simple Recipe: Spaghetti Aglio e Olio
Spaghetti Aglio e Olio is a classic Italian pasta dish that is easy to prepare and incredibly delicious.

#### Ingredients:
| Ingredient          | Quantity  | Notes                |
|---------------------|-----------|----------------------|
| Spaghetti           | 200g      |                      |
| Olive Oil           | 1/4 cup   | Extra virgin         |
| Garlic              | 4 cloves  | Thinly sliced        |
| Red Pepper Flakes   | 1 tsp     | Adjust to taste      |
| Parsley             | 1/4 cup   | Fresh, chopped       |
| Parmesan Cheese     | 1/2 cup   | Grated               |
| Salt                | To taste  |                      |
| Black Pepper        | To taste  | Freshly ground       |

#### Instructions:
1. **Cook the Spaghetti**: Bring a large pot of salted water to a boil. Add the spaghetti and cook according to the package instructions until al dente. Reserve 1 cup of pasta water, then drain the spaghetti.
2. **Prepare the Sauce**: In a large frying pan, heat the olive oil over medium heat. Add the sliced garlic and red pepper flakes. Sauté until the garlic is golden brown and fragrant, but not burnt.
3. **Combine Pasta and Sauce**: Add the cooked spaghetti to the frying pan. Toss to coat the pasta with the garlic and oil mixture. If the pasta seems dry, add a splash of the reserved pasta water.
4. **Finish and Serve**: Stir in the chopped parsley and season with salt and freshly ground black pepper. Serve immediately, topped with grated Parmesan cheese.

### Example Table:
| Kitchen Tool       | Function               | Recommended Brand |
|--------------------|------------------------|-------------------|
| Chef's Knife       | Chopping and slicing   | Wüsthof           |
| Cutting Board      | Preparing ingredients  | OXO               |
| Measuring Cups     | Measuring ingredients  | Pyrex             |

## Conclusion
Having the right kitchen tools and a simple recipe can make cooking at home an enjoyable and stress-free experience. With this guide, you now have a list of essential tools, a delicious Spaghetti Aglio e Olio recipe, and a detailed ingredient table to help you get started. Happy cooking!

Converted Markdown Cooking Guide using `PromptFormatter`:

<h1 id="essential-cooking-guide">Essential Cooking Guide</h1>
<h2 id="introduction">Introduction</h2>
<p>Cooking at home can be a rewarding and enjoyable experience. To make the process smooth and efficient, it's important to have the right tools and a simple recipe to start with. This guide will provide you with a list of essential kitchen tools, a straightforward recipe, and a detailed table of ingredients with their quantities.</p>
<h2 id="section-1-key-points">Section 1: Key Points</h2>
<ul>
    <li>Essential kitchen tools for beginners</li>
    <li>A simple and delicious recipe</li>
    <li>Detailed ingredient list with quantities</li>
</ul>
<h2 id="section-2-detailed-information">Section 2: Detailed Information</h2>
<h3 id="essential-kitchen-tools">Essential Kitchen Tools</h3>
<p>To get started in the kitchen, you'll need a few basic tools:</p>
<ul>
    <li><strong>Chef's Knife</strong>: A versatile knife for chopping, slicing, and dicing.</li>
    <li><strong>Cutting Board</strong>: A sturdy surface for preparing ingredients.</li>
    <li><strong>Measuring Cups and Spoons</strong>: For accurate measurement of ingredients.</li>
    <li><strong>Mixing Bowls</strong>: Various sizes for mixing ingredients.</li>
    <li><strong>Saucepan</strong>: For cooking sauces, boiling, and simmering.</li>
    <li><strong>Frying Pan</strong>: Ideal for sautéing and frying.</li>
    <li><strong>Baking Sheet</strong>: For baking and roasting.</li>
    <li><strong>Spatula</strong>: For flipping and stirring.</li>
    <li><strong>Wooden Spoon</strong>: Great for stirring sauces and soups.</li>
</ul>
<h3 id="simple-recipe-spaghetti-aglio-e-olio">Simple Recipe: Spaghetti Aglio e Olio</h3>
<p>Spaghetti Aglio e Olio is a classic Italian pasta dish that is easy to prepare and incredibly delicious.</p>
<h4 id="ingredients">Ingredients:</h4>
<div class="table-responsive">
    <table class="table table-sm table-bordered">
        <thead>
            <tr>
                <th>Ingredient</th>
                <th>Quantity</th>
                <th>Notes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Spaghetti</td>
                <td>200g</td>
                <td></td>
            </tr>
            <tr>
                <td>Olive Oil</td>
                <td>1/4 cup</td>
                <td>Extra virgin</td>
            </tr>
            <tr>
                <td>Garlic</td>
                <td>4 cloves</td>
                <td>Thinly sliced</td>
            </tr>
            <tr>
                <td>Red Pepper Flakes</td>
                <td>1 tsp</td>
                <td>Adjust to taste</td>
            </tr>
            <tr>
                <td>Parsley</td>
                <td>1/4 cup</td>
                <td>Fresh, chopped</td>
            </tr>
            <tr>
                <td>Parmesan Cheese</td>
                <td>1/2 cup</td>
                <td>Grated</td>
            </tr>
            <tr>
                <td>Salt</td>
                <td>To taste</td>
                <td></td>
            </tr>
            <tr>
                <td>Black Pepper</td>
                <td>To taste</td>
                <td>Freshly ground</td>
            </tr>
        </tbody>
    </table>
</div>
<h4 id="instructions">Instructions:</h4>
<ol>
    <li><strong>Cook the Spaghetti</strong>: Bring a large pot of salted water to a boil. Add the spaghetti and cook according to the package instructions until al dente. Reserve 1 cup of pasta water, then drain the spaghetti.</li>
    <li><strong>Prepare the Sauce</strong>: In a large frying pan, heat the olive oil over medium heat. Add the sliced garlic and red pepper flakes. Sauté until the garlic is golden brown and fragrant, but not burnt.</li>
    <li><strong>Combine Pasta and Sauce</strong>: Add the cooked spaghetti to the frying pan. Toss to coat the pasta with the garlic and oil mixture. If the pasta seems dry, add a splash of the reserved pasta water.</li>
    <li><strong>Finish and Serve</strong>: Stir in the chopped parsley and season with salt and freshly ground black pepper. Serve immediately, topped with grated Parmesan cheese.</li>
</ol>
<h3 id="example-table">Example Table:</h3>
<div class="table-responsive">
    <table class="table table-sm table-bordered">
        <thead>
            <tr>
                <th>Kitchen Tool</th>
                <th>Function</th>
                <th>Recommended Brand</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Chef's Knife</td>
                <td>Chopping and slicing</td>
                <td>Wüsthof</td>
            </tr>
            <tr>
                <td>Cutting Board</td>
                <td>Preparing ingredients</td>
                <td>OXO</td>
            </tr>
            <tr>
                <td>Measuring Cups</td>
                <td>Measuring ingredients</td>
                <td>Pyrex</td>
            </tr>
        </tbody>
    </table>
</div>
<h2 id="conclusion">Conclusion</h2>
<p>Having the right kitchen tools and a simple recipe can make cooking at home an enjoyable and stress-free experience. With this guide, you now have a list of essential tools, a delicious Spaghetti Aglio e Olio recipe, and a detailed ingredient table to help you get started. Happy cooking!</p>

Final Result:

Conclusion

By integrating Markdig and Bootstrap within your C# projects, you can significantly enhance the presentation of Markdown content. The PromptFormatter class provides a streamlined way to convert Markdown to HTML while ensuring tables are styled for responsive design. This is especially beneficial when using Language Model chat interfaces, where presenting well-structured and visually appealing content can greatly enhance the user experience. With the Markdown formatting guidelines and templates provided, you can craft prompts that are not only informative but also visually appealing.