DEV Community

Cover image for MarkDown based GUI Help system
Ali Alp
Ali Alp

Posted on • Edited on

2 1

MarkDown based GUI Help system

Did you ever wondered to make a help system for your "Graphical User Interface" ? the ones
that when the user clicks on the "?" icon on any page of your GUI a nice help or tutorial will magically
be presented to them, if yes, then you can stop wondering :) HelpDown is here for you :)

All resources are available at alicommit-malp/HelpDown

Usage

  • Add it to your project from Nuget
dotnet add package HelpDown
Enter fullscreen mode Exit fullscreen mode
  • In Startup.cs
public void ConfigureServices(IServiceCollection services){
    //...
    services.AddHelpDown();
    //...
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env){
    //...
    app.UseHelpDown();
    //...
}
Enter fullscreen mode Exit fullscreen mode

For instance, if you wish to make a help page for Home/Index

  • under the wwwroot folder create a new directory called "helpDown"

The folder structure will be look like this

+ Project Root
    wwwroot
        helpDown 
            Home
                Index
                    en.md
                    de.md
                    fr.md
                    cat.jpg
Enter fullscreen mode Exit fullscreen mode

for example the content of the "en.md" will be something like this

# Title 
This is help document for **Index** action of **Home page**  
show the cat image which is located just beside the MD files 

![Local Image](cat.jpg) 

or show the cat image from an external link 

![External Image](https://github.com/alicommit-malp/HelpDown/raw/master/samples/wwwroot/helpDown/Home/Index/cat.jpg)

Enter fullscreen mode Exit fullscreen mode
  • In your Index.cshtml
@using HelpDown
<div style="text-align: left">

    @{
        if (HelpDown.Exists(ViewContext, CultureInfo.CurrentCulture))
        {
            @Html.Raw(HelpDown.GenerateHtml(ViewContext, CultureInfo.CurrentCulture))
        }
    }
</div>
Enter fullscreen mode Exit fullscreen mode

you can add a help button and set its visibility according to

if(HelpDown.Exists(ViewContext, CultureInfo.CurrentCulture)){
    //Help in the users current culture exists 
    //OR
    //If the the help in current culture does not exits, Help file in 
    //default culture exists
}
else{
    //Help in current culture or default current culture does not exists
}
Enter fullscreen mode Exit fullscreen mode

Settings

  • To change the name of the "helpDown" directory
app.UseHelpDown(folderName:"customFolderName");
Enter fullscreen mode Exit fullscreen mode
  • To change the default language (By default English is the default)
app.UseHelpDown(defaultLanguage:"de");
Enter fullscreen mode Exit fullscreen mode

There you have it, a simple to use and manage Markdown-based help system for any ASP.Net Core
application.

All resources are available at alicommit-malp/HelpDown

Happy coding :)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs