Vuepress: Allow adding Tabs to showcase different snippets for different programming languages

[rajaraodv]

Feature request

In Gitbook, we can add Tabs to showcase different snippets for different programming languages. Further these Tabs are "in-sync" with other Tabs with the same name. For example, if there is are Tabs for "JS", "Java", "Ruby" that shows snippets for Step 1 of something. And then there are another set of Tabs for Step 2, then if the user selects "Ruby" in Step 1, then the "Ruby" tab is auto-selected in the Tabs in Step 2 as well.

Please see the picture from Gitbook for more.

What problem does this feature solve?

Helps us showcase multiple code snippets or multiple OS specific instructions.

What does the proposed API look like?

How should this be implemented in your opinion?

Not sure, but I think it should be a simple html markup that should transform to a functioning Tabs.

Are you willing to work on this yourself?**

No

[ulivz]

That's a good feature! and it would be better to just create a Vue component for that.

[rajaraodv]

Thanks, hope to see this. Vuepress is really awesome!

[seifertm]

I am trying to get the proposed functionality to work, but I am unsure on how to approach this:
I built a custom component, but I cannot use slots, because the number of OSes or languages are not known in advance. Passing the the information to the component as props gets unwieldy quickly.

@ulivz Can you describe how such a Vue component could work and how it would be used inside a Markdown file?

[jhildenbiddle]

I recently published docsify-tabs, which is a docsify.js plugin for rendering tabbed content from markdown. I would be happy to port the plugin (or something similar to it) to VuePress if folks are interested.

• Documentation & Demos

I welcome any feedback prior to beginning the effort such as feature requests, implementation concerns, etc.

Thanks!

[rajaraodv]

@jhildenbiddle Wow, that looks great! Very elegant! It'd be fantastic if you could port it to Vuepress!

[jhildenbiddle]

FYI --

I was about to dive into this today, but a quick search on NPM produced this:

• Vuewpress Tabs: https://www.npmjs.com/package/vuepress-tabs

Is this sufficient for your needs, @rajaraodv? I'm happy to port docsify-tabs, but I don't want to add more noise into the VuePress plugin ecosystem if the above package adequately handles markdown -> tabs duties.

Thx!

[seifertm]

* Vuewpress Tabs: https://www.npmjs.com/package/vuepress-tabs

This package only works with VuePress v0.14 (as of vuepress-tabs-0.1.6), but the author is currently porting it to VuePress v1.0.0 (see https://github.com/pskordilakis/vuepress-tabs/issues/6)

[rajaraodv]

Is this sufficient for your needs, @rajaraodv?
Should be enough! But if yours is better, will use yours :)

[seifertm]

FYI: The author of vuepress-tabs ported the project to VuePress>=1.0 and released it as a separate project: https://github.com/pskordilakis/vuepress-plugin-tabs

[wahidyankf]

FYI: The author of vuepress-tabs ported the project to VuePress>=1.0 and released it as a separate project: https://github.com/pskordilakis/vuepress-plugin-tabs

This works sufficiently for me at VuePress >= 1.0. The setup steps are straightforward, and the API is clean too.

[superbiger]

https://superbiger.github.io/vuepress-plugin-tabs/#preview

[alexeyzimarev]

The issue with tabs is that each block is independent and for the best experience one should be able to switch one block (for example, a language) and all blocks switch.