jhildenbiddle / docsify-tabs

A docsify.js plugin for rendering tabbed content from markdown

About

👦🏻❤️  Proud papa
👩🏻💍  Happy husband
☀️🎸  Living in Austin, TX
🌧☕️  Previously from Seattle, WA
👨🏻‍🎨👨🏻‍💻  20+ years in UI/UX & Web Dev
🍎🤖  Intrigued by Swift and AI/ML
🧘🏻‍♂️💭  Life is short. Be kind.

I launched my first open-source project here on GitHub back in 2016. Since that time I've created and contributed to dozens of projects, most notably as a core team member of docsify.js, the creator of docsify-related projects like docsify-themeable, and the creator of web development libraries like css-vars-ponyfill. The positive reaction to these efforts has been the motivation for continuing to do this work. Countless hours, issues, and PRs later, I am still excited to be a part of the open-source community.

Elsewhere

  Personal Website
  Twitter
  LinkedIn
  Stack Overflow
 CodePen

Statistics

Noteworthy Projects

Newest

• Mergician
  A uniquely flexible and light-weight utility for deep (recursive) merging/cloning of JavaScript objects.
• Typora Themeable
  A clean, customizable, typography-focused theme system for the markdown editor, Typora.
• CSS Device Frames
  A collection of single-element, CSS-only application and device frames with support for multiple themes and customization via CSS custom properties.

Docsify

• docsify.js
  A magical "zero-build" client-side documentation site generator.
• docsify-themeable
  A delightfully simple theme system for docsify.js.
• docsify-tabs
  A plugin for rendering tabbed content from markdown.
• docsify-plugin-ethicalads
  A plugin for rendering ad placements from EthicalAds.
• docsify-plugin-runkit
  A plugin for rendering interactive JavaScript REPLs powered by RunKit.

Web Development

• css-vars-ponyfill
  A ponyfill that provides client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers.
• canvas-size
  Determine the maximum size and custom dimension support of an HTML <canvas> element.
• vertical-rhythm-reset
  A Sass/SCSS library for responsive vertical rhythm grids, modular scale typography, and CSS normalization.
• get-css-data
  A micro-library for collecting stylesheet data from link and style nodes.

Sponsorship

A sponsorship is more than just a way to show appreciation for the open-source authors and projects we rely on; it can be the spark that ignites the next big idea, the inspiration to create something new, and the motivation to share so that others may benefit.

If you benefit from my projects or contributions, please consider lending your support and encouraging future efforts by becoming a sponsor.

Thank you! 🙏🏻

---

View project statistics

Project	GitHub Stars	Direct Downloads	CDN Downloads
canvas-size
class-change
create-elms
css-device-frames
css-vars-ponyfill
docsify-plugin-ethicalads
docsify-plugin-runkit
docsify-tabs
docsify-themeable
docsify
get-css-data
karma-file-fixtures-preprocessor
mergician
sass-utilities
typora-themeable
vertical-rhythm-reset

docsify-tabs's Issues

Multiple tabs with same name changed together when one tab is clicked, how to change only one?

Here is the case, I am write api document, I named multiple request/response with docsify-tabs, e.g.,

method1
request/response
....

method2
request/response
...

When I click the tab 'response' of method1, the tabs 'response' for both method1 and method2 are both changed, but I do want the tab of method1 change only.
How to lock the other homonymic tabs and change only 1 tab? Thanks in advance!
One workaround is to keep tab name unique, but I need to keep the tab names as same in my cases.

Hyperlink to tab

Maybe I've missed it somewhere, but it would be cool to be able to link to a tab section and to an active tab.

Having a link to http://localhost:3000/#/newPage?id=windows

And it jumping to the newPage document, and activating the windows tab

Tab not working in my case

Hi, tabs are not working in my case.
attaching the screenshots.

No active tabs onload

After the release of latest version, the first tab is not opened per default anymore.

To reproduce this, go to the docs.

I get this error in the console, see screenshot:

This new change stems from the change introduced yesterday.

Now as far as I understand, the code expects an anchorID to be always present, which might not be the case all the time.

The issue comes from this line more specifically

const anchorID = (window.location.hash.match(/(?:id=)([^&]+)/) || [])[1];

If we find a match, okay, the return the name of the match, like for an url somethig/README?id=linux that would return linux.
But if this line does not find a match, then it does return an empty array, and you cant take the first element of an empty array [], since there is no first element.

Now all of the tabs are closed because this fails and anchorID returns undefined, to which you can't apply indexOf.

Tldr; if there is no match for an id in the url, then the tabs will be not opened because it fails with an error.

I've submitted a PR for this, please check if I am not breaking any functionality with this. It seems to be working fine with the changes applied.

Wrong parse with escape chars

Try the following markdown file:
https://pastebin.ubuntu.com/p/Q3DPwsdRPY/

Plugin will not parse the code blocks as we excepted.

Docs site is broken

https://jhildenbiddle.github.io/docsify-tabs/

access document link ‘?Id=xxx’ positioning problem

Directly accessing through the link will cause the title positioning to be lower...

example link:
http://locaohost:3000/#/xxx?id=title4

md:

## title1
.....
<!-- tabs:start -->
## **title2**
.....
## **title3**
.....
<!-- tabs:end -->
## title4

It is OK to access title 1 through the link, but the location of title 4 will be inaccurate. And the title in the tab cannot be located and displayed in the table of contents

Suggestion: Button ID

I am trying to do something like button # ID when click to the link it will auto redirect to that button and that line ID

Doesn't seems to work inside _sidebar.md

I wanted to make my sidebar tabbed, but it appears to have no effect in there.

File include support

Hi.

Created File test/test.md

<!-- tabs:start -->

#### **English**

Hello!

#### **French**

Bonjour!

#### **Italian**

Ciao!

<!-- tabs:end -->

Then another file main.md

#Start

[filename](test/test.md ':include')

#End

In this case tabs are not rendered.

Am I doing something wrong, or this is not supported?

Error with unpkg

Check the final slash, here:

docsify-tabs/docs/index.html

Line 60 in 781b165

<script src="https://unpkg.com/docsify"></script>

And all the scripts with unpkg 👍

How to change color or border ?

Is there any way to disable orange border when tab selected ? It's also appear in your examples.

Syncing tabs between pages

Hi, do you know if there's a way to sync tabs between multiple pages instead of just one page?

Redirection to a header makes the tab active

Hello,

We use Docsify tabs in our technical documentation for various purposes. In our applications, we redirect to the documentation to specific sections, and sometime to headers inside tabs.

The problem is that the redirection to the tab doesn't seem to work properly. The tab is not auto selected. We're either redirected to the default tab or to the one selected during the last navigation (due to the persist option).

I have the routermode set to "history" mode, can this be related to this ? (I bring this up based on issue34

Is there any way to manage that type of situation ?

Thanks

EDIT : It would seem that indeed, replacing "window.location.hash" with "window.location.search" in the Docsify Tabs plugin fixes the problem for "Routermode: History" and allows redirection.

array index wrong

hi, i think that array index is wrong to render tabs with comments
I tested reduce index 2 to 1 and index 3 to 1.

docsify-tabs/src/js/index.js

Line 101 in f6073bc

const tabTitle = (tabMatch[2] || '[Tab]').trim();

I need your help,using this plug-in, refresh, can not locate the exact location of the page

Can you support the refresh to locate the specific location of the page, or tell me the solution?

Direct links to subsections with id don't work

For example, this link https://jhildenbiddle.github.io/docsify-themeable/#/markdown?id=tables
doesn't lead to the desired section 'Tables'. The page hasn't been scrolled to the correct position, which is annoying.
The original docsify project doesn't suffer from this issue, see
https://docsify.js.org/#/write-a-plugin?id=edit-button

Can tabs add support for the chinese title?

My English is not very good, the following content is from Google Translate, please understand, thx

After using your plugin, when I write code like this

<!-- eg.md -->

<!-- tabs:start -->
## **baidu**
## 一
Here are some introductions 
## 二
Here are some introductions 

## **google**
## 三
Here are some introductions 
## 四
Here are some introductions 

<!-- tabs:end -->

The table of contents for this article will be automatically generated on the sidebar ，like this

When the tab selects'baidu', I can only click on the'一' and'二' in the sidebar. When clicking on the'三' and'四', it will not automatically switch to the'google' tab
（'一' means one,'二' means two,'三' means three, '四' means four）

I think this is because I used the Chinese title. When I click on the Chinese title, such as "三", I actually visited eg?id=%e4%b8%89，it is the text after UrlEncode encoding, not the original text，it may be because of this encoding that the tab will not change automatically

Hope you can fix this problem, thx

Tab is not displayed when id contains url encoded characters

hi, I found a bug according to the title.

For example, if you go directly to the URL below, the tab will not be displayed.
http://localhost:3000/#/hoge?id=%e3%81%82

It worked in version 1.2.0, but not in 1.3.0 or later.

JavaScript throws an error in the following part

docsify-tabs/src/js/index.js

Line 240 in 3c8c6f9

const isAnchorElmInTabBlock = anchorID && document.querySelector(`.${classNames.tabBlock} #${anchorID}`);

After [filename](README.md ':include'), the docsify-tabs plugin in README.md fails

Please see here for a detailed description
docsifyjs/docsify#2000

Tabs not rendering as tabs

Hello, I have tabs set up like this:

<!-- tabs:start -->

#### Manage

![Screenshot](assets/img/img1.jpg)

#### Deploy

![Screenshot](assets/img/img2.jpg)

<!-- tabs:end -->

Renders as: (screenshots redacted)

In index.html,

window.$docsify = {
     ...
      tabs: {
        persist    : true,      // default
        sync       : true,      // default
        theme      : 'classic', // default
        tabComments: true,      // default
        tabHeadings: true       // default
      },
    }

<!------------->
 <!-- PLUGINS -->
 <!------------->
 <!-- Docsify v4 -->
 <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
 ...
 <!-- docsify-tabs (latest v1.x.x) -->
 <script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>

I also have in the HEAD section of index.html:

<style>
    :root {
      --docsifytabs-border-color: #ededed;
      --docsifytabs-tab-highlight-color: purple;
    }
</style>

Am I missing something with this?

Nested Tabs - almost works

In the process of setting up an alternative version of markdown.md
visible here:
https://docs.1zm.in/#/markdown
markdown.md code here

i realized that the tabs don't quite look right if you nest them:
https://docs.1zm.in/#/nestedtabs

First Tab looks quite broken:

The last tab almost looks ok:

So it seems that it might only need small adjustments to work correctly.

Can tabs add support for Mustache template?

Hi, I'm writing document template with docsify-mustache, but unfortunately it doesn't seem to work normally. Specifically, the tag content can be rendered but cannot be clicked to jump to the corresponding label.

---
# YAML info
Branch: [A, B, C]
---

<!-- tabs:start -->

##### **{{Branch.0}}**

contents1

##### **{{Branch.1}}**

contents2

##### **{{Branch.2}}**

contents3

<!-- tabs:end -->

The reason for incompatibility may be that the value of the data-tab label is not given correctly.

Hope you to support this feature, or provide some guides so that I can fix it by myself. Thx a lot. ❤️

Minor typos in docs

Change

• “asteriscks” to “asterisks”;
• “Github to “GitHub”.

There is a bug in the tabcomments

Examples

<!-- tabs:start -->

<!-- tab:title1 -->

```css
.aa{color:#aaa}
```

<!-- tab:title2 -->

bbb

<!-- tabs:end -->

After tabs uses HTML comments, the code block will be parsed incorrectly, resulting in page display disorder.

Vue.css theme is not supported

Vue.css theme is not supported, Do you plan to adapt to this theme?
link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css"

Tabs not working in embedded markdown files

With docsify 4.6 it is now possible to embed any type of file, including a markdown file.

If a tab-set is added to the parent file it works fine. However a tab-set added to an embedded file does not render.

tabs-main.md

# tabs-main.md

<!-- tabs:start -->

#### ** English **

Hello!

<!-- tabs:end -->

[filename](tabs-include.md ':include')

tabs-include.md

# tabs-include.md

<!-- tabs:start -->

#### ** English **

Hello!

<!-- tabs:end -->

I have included a screen shot of the results I get.

Doesn't work on pages linked via `alias`

Hi, I found that the tabs won't show on pages set via the alias.

For example, if I have some tabs in an markdown from an external github repo, and I used the markups for tab, it doesn't work:

window.$docsify = {
  alias: {
    '/changelog':
      'https://raw.githubusercontent.com/docsifyjs/docsify/master/CHANGELOG',
  },
};

If I copy and paste the same content to a relative file path under the current folder, then it works.

Here is a real example using alias and the tabs failed to render, and this is a working example.

[Bug] Headers inside of tab contents flickering

Hello,

We've experienced a bug with tab switching - when there's an opening heading inside of a tab and you switch tabs, the heading is going to flicker.

Video showing the issue: https://streamable.com/zbilpc
Browsers used: Firefox 70.0, Chromium 76.0.3809.100
How to reproduce: Put a heading inside of a tab (as its first content), switch tabs and notice the heading flickering

We also prepared a repo allowing you reproduce it easily - you can just clone it and run: https://github.com/brcdev/docsify-tabs-bug-demo

Thank you,
Emil

Tabs unselected when changing pages

Hello,

First of all, thanks for everything you've done for Docsify !!

I recently updated "Docsify-tabs" from v1.4.4 to v1.6.0 and encountered an issue.
I have a two tabs set-up on a page that appears selected with the class "docsify-tabs__tab docsify-tabs__tab--active", but when browsing to another page and coming back, both tabs appears unselected (class "docsify-tabs__content").
Would anyone have any general idea that could be causing this ?

In case of:
I'm using the "vue" theme and running those plugins :

• Pagescroll
• Search
• Zoom_image
• Alerts
• Tabs
• Copycode
• Toc

I will continue to look into this issue and will update if I find anything.

Thanks :)

[Bug] tabs not work when config homepage and basePath

Hello, I'm using docsify-tabs follow config: ( but when i try to get file from local, it work )

window.$docsify = {
        loadSidebar: true,
        notFoundPage: "404.md",
        homepage: "https://ngthtung.github.io/docs/README.md",
        basePath: "https://raw.githubusercontent.com/ngthtung/docs/master/",
        subMaxLevel: 2,
        tabs: {
          persist: true, // default
          sync: true, // default
          theme: "classic", // default
          tabComments: true, // default
          tabHeadings: true // default
        }
      };

And tabs not working:

this is my demo:
https://gqhzr.csb.app/#/test.md

Feature request: collapsable tabs (by default)

Hi,

Your tabs plug-in is lovely. I use it a lot to let readers see the appropriate fragments for their language and framework.

As you can see below, I add a small dummy tab in the front ("...") allowing users to make their selection explicitly. The other tabs are actually quite long and can be overwhelming, especially if that information is not relevant for that reader.

<!-- tabs:start -->

### **...**

*Select your language and framework.*

### **Typescript**

![anonymous-call.ts](anonymous-call.ts ':include :type=code')

### **Java**

![anonymous-call.java](anonymous-call.java ':include :type=code')

### **Ruby**

![anonymous-call.rb](anonymous-call.rb ':include :type=code')

<!-- tabs:end -->

This dummy-tab pattern occurs quite a lot, but it would be obsolete if all tabs were "inactive" by default. It would be beautiful if clicking an already "active" tab again would make it "inactive" again as well. It would also be useful if the default state for tabs ("collapsed" or "expanded") would be configurable via the plugin config.

Is this feature easy to add? Or would you be open to a Pull Request? What would be the best way to annotate which tab (if any) should be active by default, in a certain tab block?

Issue with windoys style linebreaks

Hi,

I had a little issue with your plugin : the markdown files saved yith windows style linebreaks (\r\n) were not correctly detected and parsed. I fixed it by making a quick hack on the regexes :

    codeMarkup: new RegExp(/(```[\s\S]*?```)/gm),
    commentReplaceMarkup: new RegExp("\x3c!-- " + commentReplaceMark + " (.*) --\x3e"),
    tabBlockMarkup: /^(<!-+\s+tabs:\s*?start\s+-+>)[\r\n]+([\s|\S]*?)[\r\n]+(<!-+\s+tabs:\s*?end\s+-+>)/m,
    tabCommentMarkup: /^<!-+\s+tab:\s*(.*)\s+-+>[\r\n]+([\s\S]*?)[\r\n]+(?=<!-+\s+tabs?:)/m,
    tabHeadingMarkup: /^#{1,6}\s*[*_]{2}\s*(.*[^\s])\s*[*_]{2}[\r\n]+([\s\S]*?)(?=#{1,6}\s*[*_]{2}|<!-+\s+tabs:\s*?end\s+-+>)/m

Basicly replacing the \n+ by [\r\n]+

I may have missed a spot but it seam to work for me this way

Anyway, thanks for your great work !

Reopen #18

You can try this code: https://hastebin.com/dewobogepe.md
and this is image https://imgur.com/a/GRTbqkH - sorry for late respone and the other website is down because i upload it to main domain and removed the plugin. (Still need to use)

the inline code `$` in tabs not show or render error

this is my markdown content:

This is `$` (this dollar show)


<!-- tabs:start -->

#### **Tab A**

This is `$` (this dollar not show)

#### **Tab B**
This is `a` (this is show)
<!-- tabs:end -->

the render result is :

the dollar symbol in the tabs was missed, how can i resolve this?

Search Functionality in Tabs Tables

Search plugin is not able to search in the tabs tables.

!BUG - TABS bug at the bottom of the page

If u put the tabs at the bottom of the page it will stuck hard and didnt create scroll bar. (easiest way to see is using a phone)
I am using .md

e.g: http://neetvn.net/#/species/casau

For now i use tag right after it to make it move down. or else it will stuck

Tab titles aren't processed by the markdown compiler

<!-- tab:Example **manifest.webmanifest** -->

Doesn't render as Example <strong>manifest.webmanifest</strong>, but as Example **manifest.webmanifest**. Using the "bold heading" method also ignores any markup.

VuePress

I saw you offered to migrate your plugin to VuePress (vuejs/vuepress#851)

Did you use VuePress for anything or what was your intention to do the port?
What do you think about VuePress (now)?

Scroll position on long pages

First off, thanks for making this plugin!

While we've been using docsify and this plugin for our documentation we've noticed that following anchors to specific sections on longer pages doesn't properly navigate you to that section (e.g. https://yuzudocs.balanced.dev/#/definition/markup?id=enum). Turning off docsify-tabs however remedies this problem as content is no longer disappearing into tabs.

Not sure if I'm missing the obvious solution or not, but is there anything that could be done to maintain the scroll position after docsify-tabs has finished arranging content?

If not we may just split out our content into multiple pages so the issue is less pronounced, or if we're desperate we'll just try something along the lines of adding a custom plugin to the docsify setup with a horrible setTimeout with an arbitrary 1 second value to wait for the page & docsify-tabs to fully load, then scroll to the correct section.

plugins: [
  function (hook, vm) {
    hook.doneEach(function () {
      const id = vm.route.query.id;
      const element = id ? document.querySelector(`[data-id="${id}"]`) : undefined;
      if (element) {
        setTimeout(function() {
          element.scrollIntoView();
        }, 1000);
      }
    });
  }
]

Thanks in advance