title: How to add the custom title to Tab using Jekyll plugin?
body: <p>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.</p>
  <pre><code>{% tabs %}
  {% highlight C# %}
  int value =  10;
  {% endhighlight %}
  {% endtabs %}
  </code></pre>
  <p>Here my plugin to show tabs on site.</p>
  <pre><code>require 'kramdown'
  module Tags
      class TabsBlock &lt; Liquid::Block
          def render(context)
              content = super(context)
              content = convert(content)
          end
          def convert(context)
              liArray = context.gsub(/&lt;li role=&quot;presentation&quot; class=&quot;&quot;&gt;(.+)&lt;\/li&gt;/)
              nextLine = &quot;\n&quot;
              tabOpenTag = nextLine + '&lt;div class=&quot;tabs&quot;&gt;' + nextLine
              ulOpenTag = nextLine + '&lt;ul class=&quot;nav nav-tabs&quot; role=&quot;tablist&quot;&gt;' + nextLine
              tabContentOpenTag = nextLine + '&lt;div class=&quot;tab-content&quot;&gt;' + nextLine
              closedivTag = nextLine + '&lt;/div&gt;' + nextLine
              ulCloseTag = nextLine + '&lt;/ul&gt;' + nextLine
              lis = '' + nextLine
              liArray.each do|li|
                  lis = lis + li + nextLine
              end     
          return tabOpenTag + ulOpenTag + lis + ulCloseTag + tabContentOpenTag +context.gsub(/&lt;li role=&quot;presentation&quot; class=&quot;&quot;&gt;(.+)&lt;\/li&gt;/,'') + closedivTag + closedivTag
          end
      end
  end
  
  Liquid::Template.register_tag(&quot;tabs&quot;, Tags::TabsBlock)
  </code></pre>
  <p>As of now tab title showing as display language since the below code.</p>
  <pre><code>prefix = prefix + '&lt;li role=&quot;presentation&quot; class=&quot;&quot;&gt;&lt;a data-target=&quot;#'+ id + &quot;-&quot; + @lang.to_s.gsub(&quot;+&quot;, &quot;-&quot;) +'&quot; aria-controls=&quot;home&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot; data-original-lang=&quot;'+@originalLang+'&quot;&gt;'+ @displayLanguage +'&lt;/a&gt;&lt;/li&gt;'
  </code></pre>
  <p><a href="https://i.stack.imgur.com/qUiQi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qUiQi.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/QrqPT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QrqPT.png" alt="enter image description here" /></a></p>
  <p>Here my converted HTML code</p>
  <pre><code>&lt;h1 id=&quot;single-tab&quot;&gt;Single Tab&lt;/h1&gt;
  &lt;div class=&quot;tabs&quot; id=&quot;code-snippet-1&quot;&gt;
      &lt;ul class=&quot;nav nav-tabs&quot; role=&quot;tablist&quot;&gt;
          &lt;li role=&quot;presentation&quot; class=&quot;&quot;&gt;&lt;a data-target=&quot;#vh6ciimppx3cmqhbrzcdh3s3qmb6rv0d-csharp&quot; aria-controls=&quot;home&quot; role=&quot;tab&quot; data-toggle=&quot;tab&quot; data-original-lang=&quot;csharp&quot;&gt;c#&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class=&quot;tab-content&quot;&gt;
          &lt;div role=&quot;tabpanel&quot; class=&quot;tab-pane&quot; id=&quot;vh6ciimppx3cmqhbrzcdh3s3qmb6rv0d-csharp&quot; data-original-lang=&quot;csharp&quot;&gt;
              &lt;div class=&quot;highlight&quot;&gt;
                  &lt;pre&gt;&lt;code class=&quot;language-csharp&quot; data-lang=&quot;csharp&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;span class=&quot;kt&quot;&gt;int&lt;/span&gt; &lt;span class=&quot;k&quot;&gt;value&lt;/span&gt; &lt;span class=&quot;p&quot;&gt;=&lt;/span&gt;  &lt;span class=&quot;m&quot;&gt;10&lt;/span&gt;&lt;span class=&quot;p&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/QGWl0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QGWl0.png" alt="enter image description here" /></a></p>
  <p>Instead of that, I would like to have custom tab title for my tabs like below.</p>
  <p><a href="https://i.stack.imgur.com/wyfXS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wyfXS.png" alt="enter image description here" /></a></p>
  <p>I have checked and found the below plugins. But unable to adapt the below plugins with my plugin.</p>
  <p><a href="https://github.com/Ovski4/jekyll-tabs" rel="nofollow noreferrer">https://github.com/Ovski4/jekyll-tabs</a></p>
  <p><a href="https://github.com/clustergarage/jekyll-code-tabs" rel="nofollow noreferrer">https://github.com/clustergarage/jekyll-code-tabs</a></p>
  <p><strong>Now I have to know how to improve my plugin to show custom title.</strong></p>
  <p>Thanks in advance.</p>