How to add the custom title to Tab using Jekyll plugin?

Help
1

We are converting the md (markdown) files in to html files using Jekyll and hosting the html files in site. In our MD file we are mentioning the tabs like below.

{% tabs %}
{% highlight C# %}
int value =  10;
{% endhighlight %}
{% endtabs %}

Here my plugin to show tabs on site.

require 'kramdown'
module Tags
    class TabsBlock < Liquid::Block
        def render(context)
            content = super(context)
            content = convert(content)
        end
        def convert(context)
            liArray = context.gsub(/<li role="presentation" class="">(.+)<\/li>/)
            nextLine = "\n"
            tabOpenTag = nextLine + '<div class="tabs">' + nextLine
            ulOpenTag = nextLine + '<ul class="nav nav-tabs" role="tablist">' + nextLine
            tabContentOpenTag = nextLine + '<div class="tab-content">' + nextLine
            closedivTag = nextLine + '</div>' + nextLine
            ulCloseTag = nextLine + '</ul>' + nextLine
            lis = '' + nextLine
            liArray.each do|li|
                lis = lis + li + nextLine
            end     
        return tabOpenTag + ulOpenTag + lis + ulCloseTag + tabContentOpenTag +context.gsub(/<li role="presentation" class="">(.+)<\/li>/,'') + closedivTag + closedivTag
        end
    end
end

Liquid::Template.register_tag("tabs", Tags::TabsBlock)

As of now tab title showing as display language since the below code.

prefix = prefix + '<li role="presentation" class=""><a data-target="#'+ id + "-" + @lang.to_s.gsub("+", "-") +'" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="'+@originalLang+'">'+ @displayLanguage +'</a></li>'

image
image1907×188 48 KB

image
image1774×305 22.6 KB

Here my converted HTML code

<h1 id="single-tab">Single Tab</h1>
<div class="tabs" id="code-snippet-1">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class=""><a data-target="#vh6ciimppx3cmqhbrzcdh3s3qmb6rv0d-csharp" aria-controls="home" role="tab" data-toggle="tab" data-original-lang="csharp">c#</a></li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane" id="vh6ciimppx3cmqhbrzcdh3s3qmb6rv0d-csharp" data-original-lang="csharp">
            <div class="highlight">
                <pre><code class="language-csharp" data-lang="csharp"><span></span><span class="kt">int</span> <span class="k">value</span> <span class="p">=</span>  <span class="m">10</span><span class="p">;</span></code></pre>
            </div>
        </div>
    </div>
</div>

Instead of that, I would like to have custom tab title for my tabs like below.

image
image1033×321 25 KB

I have checked and found the below plugins. But unable to adapt the below plugins with my plugin.

Now I have to know how to improve my plugin to show custom title.

Thanks in advance.

2

Could you please anyone suggest the solution ?