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

**URL:** <https://talk.jekyllrb.com/t/how-to-add-the-custom-title-to-tab-using-jekyll-plugin/6764>\
**Category:** Help\
**Created:** [December 2, 2021, 1:30pm UTC](https://talk.jekyllrb.com/t/how-to-add-the-custom-title-to-tab-using-jekyll-plugin/6764 "2021-12-02T13:30:06Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Poovarasan](https://avatars.discourse-cdn.com/v4/letter/p/4bbf92/32.png) [@Poovarasan](https://talk.jekyllrb.com/u/Poovarasan)\
**Post date:** [December 2, 2021, 1:30pm UTC](https://talk.jekyllrb.com/t/how-to-add-the-custom-title-to-tab-using-jekyll-plugin/6764/1 "2021-12-02T13:30:06Z")

</div>

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.

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

```

Here my plugin to show tabs on site.

```auto
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.

```auto
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](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/9/9651b59a7397f4a14ea58228f8247e57fd434761.png)  
 ![image](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/e/ee332673e1623c3b4cff5a84b44f947eeb934875.png)

Here my converted HTML code

```auto
<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](https://canada1.discourse-cdn.com/flex030/uploads/jekyllrb/original/2X/d/d9feff275d256e1272465feba35bc21ab3c60ac4.png)

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

> **[GitHub - Ovski4/jekyll-tabs: Add tabs on your pages with this Jekyll plugin](https://github.com/Ovski4/jekyll-tabs)**
>
> Add tabs on your pages with this Jekyll plugin. Contribute to Ovski4/jekyll-tabs development by creating an account on GitHub.

> **[GitHub - clustergarage/jekyll-code-tabs: Fenced code tabs plugin for Jekyll](https://github.com/clustergarage/jekyll-code-tabs)**
>
> Fenced code tabs plugin for Jekyll. Contribute to clustergarage/jekyll-code-tabs development by creating an account on GitHub.

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

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Poovarasan](https://avatars.discourse-cdn.com/v4/letter/p/4bbf92/32.png) [@Poovarasan](https://talk.jekyllrb.com/u/Poovarasan)\
**Post date:** [December 3, 2021, 3:32am UTC](https://talk.jekyllrb.com/t/how-to-add-the-custom-title-to-tab-using-jekyll-plugin/6764/2 "2021-12-03T03:32:03Z")

</div>

Could you please anyone suggest the solution ?