Docsify: Tabs for multiple code examples

[soulfly]

Does docsify support multiple code examples in tabs?

something like this
https://github.com/yacir/markdown-fenced-code-tabs

[dmed256]

I don't think it's an extension inside docsify, but it can be done using the plugin extension

• Example
• Source code (not super pretty...)

Which takes

::: tabs language

- C++
    <content>

- C
    <content>

:::

And converts it to use vue material-ui components:

The language part is the group name so you can toggle all tabs with the same group

Maybe we can strip it out and move it to a docsify-plugin repo?

[jinxuan]

Really looking forward for this to be a seperate plugin

[jinxuan]

@dmed256
I tried use your repo at but the marked is not rendered as expected.

I just git clone this repo and run python -m SimpleHTTPServer 3000.

[soulfly]

The same on my side, tried to use above example but had no luck..
Really need it as a core plugin. I 100% believe this feature has to be here, many people need it.

For example, iOS developers use 2 languages ObjC and Swift. Android developers also use 2 langs now: Java and Kotlin, so we need this plugin

[dmed256]

@jinxuan Sorry for the late reply

Strange it doesn't work right out of the box for you, mine rendered it with the commands below using Chrome and Firefox :thinking:

[~]
> rm -rf libocca.org
[~]
> git clone [email protected]:libocca/libocca.org
Cloning into 'libocca.org'...
remote: Counting objects: 243, done.
remote: Compressing objects: 100% (167/167), done.
remote: Total 243 (delta 115), reused 177 (delta 58), pack-reused 0
Receiving objects: 100% (243/243), 557.05 KiB | 0 bytes/s, done.
Resolving deltas: 100% (115/115), done.
Checking connectivity... done.
[~]
> cd libocca.org/
[~/libocca.org]
> python -m http.server 3000
Serving HTTP on 0.0.0.0 port 3000 (http://0.0.0.0:3000/) ...
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /assets/occa.css HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /assets/occa.js HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /README.md HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /_navbar.md HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /assets/images/logo/blue.svg HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /_sidebar.md HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /guide/user-guide/introduction.md HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /api/README.md HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /examples/cpp/add-vectors.md HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /examples/c/add-vectors.md HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /history.md HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /team.md HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /gallery.md HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /publications.md HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /guide/occa/introduction.md HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /guide/okl/introduction.md HTTP/1.1" 200 -
127.0.0.1 - - [02/Jun/2018 10:57:42] code 404, message File not found
127.0.0.1 - - [02/Jun/2018 10:57:42] "GET /favicon.ico HTTP/1.1" 404 -

Do you see any error messages in the console?
Since it works with Github page hosting, I don't think it's something in the current master branch

@soulfly Can you also provide with any possible error messages?

[dmed256]

Also, if you want to try it by copy-pasting the CSS/JS, here are the index.html updates you need, along with the assets/occa.{js,css} files in the repo

Dependencies

<link rel="stylesheet" href="./assets/occa.css">
    <script src="//unpkg.com/vue-material@beta"></script>
    <script src="./assets/occa.js"></script>

Docsify Config

       markdown: {
         renderer: {
           code: (text, lang) => (
             occa.markdown.code({ lang, text })
           ),
         }
       },
       plugins: [
         occa.docsifyPlugin,
       ],

Vue Setup

     Vue.use(VueMaterial.default)
     var vm = new Vue({
       el: '#app',
       data: {
         tabNamespaces: {},
       },
       methods: {
         onTabChange: (namespace, tab) => {
           if (tab === vm.$data.tabNamespaces[namespace]) {
             return;
           }
           vm.$data.tabNamespaces[namespace] = tab;
         }
       },
     })

[ning1022]

When I insert the table tag in the content, I get an error. @dmed256

this error console.error(`Missing token format for: ${token.type}`, token);

[jhildenbiddle]

I created docsify-tabs for this very purpose.

Features

• Generate tabbed content using unobtrusive markup
• Persist tab selections on refresh/revisit
• Sync tab selection for tabs with matching labels
• Style tabs using “classic” or “material” tab theme
• Customize styles using CSS custom properties
• Compatible with docsify-themeable themes

Enjoy!