Code block with language tabs

[hsluoyz]

🚀 Feature

Code block with language tabs

Have you read the Contributing Guidelines on issues?

Yes

Motivation

My project is a library. It supports four languages: Golang, Java, PHP and Node.js. So I need to show code in multiple languages in my documentation.

Pitch

I already noticed the discussion here: #103. But it seems to be a little hacky. I still want to know if there's any official decision on this feature or other third-party recommendations? Thanks.

[endiliey]

There is the problem of syntax though. How do we divine code block with language tabs ? :o

[hsluoyz]

A way to do it is to extend the markdown grammar to support it. Like said here, the text of the code block should be self-contained in the markdown instead of using external files. Then maybe we need to patch the markdown parser to support this new grammar. Javascript is then used to render it.

However, modifying markdown grammer is not always good. Another way is to put a placeholder like a reserved label <docusaurus-code-block-1> in markdown. Then define the code block #1 and its text in external files. The markdown parser won't need to be changed. Javascript can replace the label with actual code block controls in the HTML layer.

[hsluoyz]

Hi, any update on this issue? @endiliey @yangshun

GitBook and readthedocs already support this feature:

1. GitBook: https://github.com/GitbookIO/plugin-codetabs

2. readthedocs: https://sphinxcontrib-contentui.readthedocs.io/en/latest/tabs.html

[JoelMarcey]

@hsluoyz - we have a pull request in review that can add tabbing to a docs page. I imagine we could repurpose the final version of that to do something similar to what is being asked for here.

[JoelMarcey]

@hsluoyz Also see #103 - as part of that, we are looking to adding code tabs too.

[hsluoyz]

@JoelMarcey Thanks!

Never thought the PR will be so fast! We are really looking forward to this feature! I will test it first when the feature is ready :)

[endiliey]

#1063 might be a better option (but we are still settling a nicer syntax, but overall the PR looks good)
cc @fiennyangeln

https://deploy-preview-1063--docusaurus-preview.netlify.com/docs/en/next/doc-markdown#code-tabs

[hsluoyz]

Thanks for the status update! This PR is really amazing! Cannot wait to try it :) @fiennyangeln @endiliey

[amimas]

I believe tabbed code block is now supported on latest version

[hsluoyz]

I will try it ASAP, close it now.