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

Question

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>'

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.

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

https://github.com/Ovski4/jekyll-tabs

https://github.com/clustergarage/jekyll-code-tabs

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

Thanks in advance.